1 1 CPET 565 Mobile Computing Systems CPET/ITC 499 Mobile Computing Building User Interface and Basic Applications & Lab 2-1 Shipping Calculator app Reference Android Programming Concepts, by Trish Cornez and Richard Cornez, pubslihed by Jones & Barlett Learning, pp. 89-184. Paul I-Hai Lin, Professor Spring 2017 A Specialty Course Purdue University M.S. Technology Graduate Program Dept. of Computer, Electrical and Information Technology Purdue University Fort Wayne Campus Prof. Paul Lin 2 Topics of Discussion Android User Interface Layout The View Class Text Input and Output Soft Keyboard Lab Example 2-1: Basic Input and the Shipping Calculator; pp. 107-118 Android’s Form Widgets for User Interfaces Unique ID of a View Object and the R Class The ViewGroup Lab Example 2-2: Burger Calorie Calculator App Prof. Paul Lin
26
Embed
CPET 565 Mobile Computing Systems CPET/ITC 499 Mobile ...lin/CPET565/2017S/2-Lectures/CPET565-499-Ch-… · Adaptive Design Concepts – Screens and Orientation ... Android User Interface
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
1
CPET 565 Mobile Computing SystemsCPET/ITC 499 Mobile Computing
Building User Interface and Basic Applications
&
Lab 2-1 Shipping Calculator appReference
Android Programming Concepts, by Trish Cornez and Richard Cornez, pubslihed by Jones & Barlett Learning, pp. 89-184.
Paul I-Hai Lin, ProfessorSpring 2017
A Specialty Course Purdue University M.S. Technology Graduate Program
Dept. of Computer, Electrical and Information Technology
Purdue University Fort Wayne CampusProf. Paul Lin
2
Topics of Discussion Android User Interface Layout The View Class Text Input and Output Soft Keyboard Lab Example 2-1: Basic Input and the Shipping
Calculator; pp. 107-118
Android’s Form Widgets for User Interfaces Unique ID of a View Object and the R Class The ViewGroup Lab Example 2-2: Burger Calorie Calculator App
Prof. Paul Lin
2
3
Topics of Discussion Adaptive Design Concepts – Screens and Orientation Lab Example 2-3: Shipping Cost Calculator II – Adaptive
Design
TableLayout and TableRow Lab Example 2-4: Simple Calculator App and the
TableLayout
Container Views Using an Adapter Lab Example 2-5: Renaissance Painting App
Prof. Paul Lin
4
Android User Interface Android User Interface,
https://developer.android.com/guide/topics/ui/index.html All UI elements in an Android app are built using - View
and ViewGroup objects• View object – draws something on the screen that the user
can interact with• ViewGroup object – holds other View (and ViewGroup)
objects in order to define the layout of the interface
Visual objects can be created using• Java code, or• An external layout XML file
Android Studio• Graphical Layout tool – building external XML layout file
Prof. Paul Lin
3
5
Android User Interface Android User Interface,
https://developer.android.com/guide/topics/ui/index.html View Hierarchy of an Android UI Layout
Prof. Paul Lin
6
Android User Interface OnCreate() method for an Activity The layout file will be inflated on the screen when the
Activity is created.//HelloGoodByeApppublic class MainActivity extends Activity {...protected void onCreate(Bundle savedInstanceState) {//TASK 1: INFLATE THE MAIN SCREEN LAYOUT USED BY THE APP
super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//TASK 2: ESTABLISH REFERENCES TO THE TEXTVIEW AND BUTTON
Layout Figure 2-4 FrameLayouts contain a single control object, such as a
canvas or list
Prof. Paul Lin
9
17
The View Class
The View class is the basic building block for UI in Android, https://developer.android.com/reference/android/view/View.html• Android.view.View
Using Views – arranged in a single “tree” in one or more XML layout files
Vies subclasses for building control objects: • Buttons, input/output text elements, radio buttons, checkboxes• Displaying text, images, or other content
Prof. Paul Lin
18
The View Class
Button View in XML layout file is defined using a set of attributes: • Width, height, alignment, background color• Handler method – respond to an onClick event
Button View in XML layout file is defined using a set of attributes: • Width, height, alignment, background color• Handler method – respond to an onClick event
View class methods• Retrieve location/position of a View object: getLeft(), getTop(),
getRight(), getBottom()• Size, padding and margin: getMeasureHeight(),
EditText class, https://developer.android.com/reference/android/widget/EditText.html• Allow text input and editing by the user• A range of input types: number, date, password, email
address• InputType properties:
textCapSentences, textCapCharacters, textCapWords textAutoCorrect, textAutoComplete, textNoSuggestions textUri, textShortMessage, textLongMessage textWebEditText, textPhoneticProf. Paul Lin
22
Text Input and Output Text Fields that Defines the EditView Control
Text Field inputType Property Value• Plant Text None• Person Name textPersonName• Password textPassword• Password (Numeric) numberPassword• Email textEmailAddress• Phone phone• Postal Address textPostalAddress• MuitilineText textMultipLine• Time time• Date date• Number number• Number (signed) numberSigned• Number (decimal) numberDecimal
Prof. Paul Lin
12
23
EditText
InputType properties is used to reconfigure the soft keyboard
Prof. Paul Lin
24
EditText
Figure 2-6 A softkeybord configured for the input of an email address
Prof. Paul Lin
13
25
EditText
Figure 2-7 A softkeybord configured for password input
<string name="weightLBL">Weight of the package</string><string name="ouncesLBL">(in ounces)</string><string name="baseLBL">Base Cost:</string><string name="addCostLBL">Added Cost:</string><string name="totalLBL">Total Shipping Cost:</string><string name="zeroDec">$0.00</string><string name="zero">0</string>
</resources>
Prof. Paul Lin
40
Lab Example 2-1: Shipping Cost Calculator
// ShipItem.javapackage com.example.lin.shippingcalculator;/*** Created by trishcornez on 6/29/14.*/
public class ShipItem {// SHIPPING CONSTANTSstatic final Double BASE = 3.00;static final Double ADDED = .50;static final int BASE_WEIGHT = 16;static final double EXTRA_OUNCES = 4.0;
// MyActivity.java .. Continue//CREATE THE DATA MODEL FOR STORING THE ITEM TO BE SHIPPED
shipItem = new ShipItem();
//TASK 3: ESTABLISH THE REFERENCES TO INPUT WEIGHT ELEMENTweightET = (EditText) findViewById(R.id.editText1);
//TASK 3: ESTABLISH THE REFERENCES TO OUTPUT ELEMENTSbaseCostTV = (TextView) findViewById(R.id.textView4);addedCostTV = (TextView) findViewById(R.id.textView6);totalCostTV = (TextView) findViewById(R.id.textView8);
//TASK 4: REGISTER THE LISTENER EVENT FOR WEIGHT INPUTweightET.addTextChangedListener(weightTextWatcher);
}
Prof. Paul Lin
24
47
Lab Example 2-1: Shipping Cost Calculator
// MyActivity.java .. Continueprivate TextWatcher weightTextWatcher = new TextWatcher() {//THE INPUT ELEMENT IS ATTACHED TO AN EDITABLE,//THEREFORE THESE METHODS ARE CALLED WHEN THE TEXT IS CHANGED
public void onTextChanged(CharSequence s,int start, int before, int count){
//CATCH AN EXCEPTION WHEN THE INPUT IS NOT A NUMBERtry {
public boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.menu, menu);return true;
// Handle action bar item clicks here. The action bar will// automatically handle clicks on the Home/Up button, so long// as you specify a parent activity in AndroidManifest.xml.int id = item.getItemId();if (id == R.id.action_settings) {