Download Topics of Discussion

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
1
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
1
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
3
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
4
2
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
5
Android User Interface
OnCreate() method for an Activity
 The layout file will be inflated on the screen when the
Activity is created.
//HelloGoodByeApp

public 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
Button exclaimBtn = (Button) findViewById(R.id.button);
greetingTextView = (TextView) findViewById(R.id.textView);
//TASK 4: REGISTER THE LISTENER EVENT FOR THE BUTTON
exclaimBtn.setOnClickListener(toggleGreeting);
}
Prof. Paul Lin
6
3
Layout, https://developer.android.com/guide/topics/ui/declaringlayout.html


A Layout defines the visual structure for a UI.
A Layout can be declared in two ways:
• In XML layout file
• At run time

Six Standard Root Layout
•
•
•
•
•
•
LinearLayout
RelativeLayout
TableLayout
RowLayout
GridLayout
FrameLayout
Prof. Paul Lin
7
Layout, https://developer.android.com/guide/topics/ui/declaringlayout.html
Prof. Paul Lin
8
4
Layout

Figure 2-1 Standard Layout Types
Prof. Paul Lin
9
Layout

Figure 2-2 RelativeLayout elements
Prof. Paul Lin
10
5
RelativeLayout – Figure 2-2
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent”
<TextView
android:text="Text 1"
android:id="@+id/text1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginleft="65dp"
android:layout_marginTop="86dp"/>
Prof. Paul Lin
11
RelativeLayout – Figure 2-2
<TextView
android:text="Text 2"
android:id="@+id/text2"
android:layout_below="@+id/text1"
android:layout_alignLeft="@+id/text1"
android:layout_alignStart="@+id/text1"
android:layout_marginTop="51dp"/>
<Button
android:text="Button"
android:id="@+id/button"
android:layout_alignBottom="@+id/text2"
android:layout_toRightOf="@+id/text2"
android:layout_marginleft="95dp"/>
Prof. Paul Lin
12
6
RelativeLayout – Figure 2-2
<TextView
android:text="Text 3"
android:id="@+id/text3"
android:layout_below="@+id/button"
android:layout_alignLeft="@+id/button"
android:layout_alignStart="@+id/button"
android:layout_marginTop="57dp"/>
</RelativeLayout>
Prof. Paul Lin
13
Layout - GridLayout

Figure 2-3 A GridLayout has two orientation
Prof. Paul Lin
14
7
Layout - GridLayout

Figure 2-3 A GridLayout has two
orientation
<GridLayout
xmlns:android="http://schemas.android.com/
apk/res/android"
xmlns:tools="http://schemas.android.com/to
ols"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="2"
android:orientation="horizontal">
<TextView
android:text="Text 1" />
<TextView
android:text="Text 2"/>
<TextView
android:text="Text 3" />
<TextView
android:text="Text 4"/>
</GridLayout>
Prof. Paul Lin
15
Layout

Figure 2-4 FrameLayouts contain a single control object, such as a
canvas or list
Prof. Paul Lin
16
8
The View Class

The View class is the basic building block for UI in
Android,
https://developer.android.com/reference/android/view/Vi
ew.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
17
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
android:id=“@+id/button1”
android:layout_width=“wrap_content”
android:layout_width=“20dp”
android:layout_alignParentTop=“true”
android:layout_centerHorizontal=“true”
android:onClick=“goTap”
android:background=“blue”
android:text=“Button” />
Prof. Paul Lin
18
9
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

View class methods
• Retrieve location/position of a View object: getLeft(), getTop(),
getRight(), getBottom()
• Size, padding and margin: getMeasureHeight(),
getMeasuredWidth(): setPadding(int, int, int, int),
setPaddingRelative(int, int, int, int), getPaddingLeft(),
getPaddingTop(), getPaddingRight(), getPaddingBottom()
Prof. Paul Lin
19
The View Class
Event Handling and Threading (basic cycle)
 An event occurs => dispatched to the appropriate view
 The view handle (Handler) the event and notifies any
event listeners.
 If the view’s bound may need to be changed => call
requestLayout() method
 If view’s appearance may need to be changed => call
invalidate() method
 If either requestLayout() or invalidate() were called, the
framework => measuring, laying out, and drawing the
tree as appropriate
Prof. Paul Lin
20
10
Text Input and Output

Text Input/Text Output – Text Field class handling
• TextView – for text output
• EditText – allows text input and editing by the user


TextView class,
https://developer.android.com/reference/android/widget/
TextView.html
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
21
Prof. Paul Lin
 textWebEditText, textPhonetic
Text Input and Output

Text Fields that Defines the EditView Control
Text Field
inputType Property Value
•
•
•
•
•
•
•
•
•
•
•
•
•
Plant Text
Person Name
Password
Password (Numeric)
Email
Phone
Postal Address
MuitilineText
Time
Date
Number
Number (signed)
Number (decimal)
None
textPersonName
textPassword
numberPassword
textEmailAddress
phone
textPostalAddress
textMultipLine
time
date
number
numberSigned
numberDecimal
Prof. Paul Lin
22
11
EditText

InputType properties is used to reconfigure the soft
keyboard
Prof. Paul Lin
23
EditText

Figure 2-6 A softkeybord configured for the input of an
email address
Prof. Paul Lin
24
12
EditText

Figure 2-7 A softkeybord configured for password input
Prof. Paul Lin
25
EditText

Figure 2-8 Android supports multiple softkeybord
configuration
Prof. Paul Lin
26
13
EditText

Figure 2-9 Text AutoComplete will produce dictionarybased suggestions during input
Prof. Paul Lin
27
EditText

InputType properties is used to reconfigure the soft
keyboard
<LinearLayout
xmlns:android=“http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
<EditText
android:layout_width=“match_parent”
android:layout_height=”wrap_content”
andorid:id=“@+id/editText”
android:hint=”Name”
android:inputType=“textCapWords|textPersonName”/>
</LinearLayout>
Prof. Paul Lin
28
14
Figure 2-10 The search icon appears when you declare
android:imeOptions=“autoSearch”
<EditText
andorid:id=“@+id/editText”
android:layout_width=“fill_parent”
android:layout_height=”wrap_content”
android:hint=”@string/search_hint”
android:imeOptions=“actionSearch
”/>

imeOptions property:
actionSend, actionDone,
actionGo, actionNext,
actionPrevious
Prof. Paul Lin
29
Lab Example 2-1: Shipping Cost Calculator

Figure 2-11 A Sketched Prototype
Prof. Paul Lin
30
15
Lab Example 2-1: Shipping Cost Calculator

Figure 2-12
Prof. Paul Lin
31
Lab Example 2-1: Shipping Cost Calculator

Figure 2-13 View objects arrangement in the Layout Editor’s Design
mode
Prof. Paul Lin
32
16
Lab Example 2-1: Shipping Cost Calculator
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.lin.shippingcalculator" >
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MyActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Prof. Paul Lin
33
Lab Example 2-1: Shipping Cost Calculator
//activity_my.xml .. See text book pp. 111-113
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:background="@drawable/shippingbck"
tools:context=".MyActivity">
Prof. Paul Lin
34
17
Lab Example 2-1: Shipping Cost Calculator
<!-- WEIGHT INPUT SECTION -->
<TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="@string/weightLBL"
android:textAppearance="?android:attr/textAppearanceLarge"
android:gravity="center_horizontal" />
Prof. Paul Lin
35
Lab Example 2-1: Shipping Cost Calculator
<!-- WEIGHT INPUT EDIT TEXT FIELD RECEIVES FOCUS -->
<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:ems="10"
android:gravity="center_vertical|center_horizontal"
android:inputType="number"
android:selectAllOnFocus="true"
android:textSize="35sp"
android:hint="@string/zero">
<requestFocus />
</EditText>
Prof. Paul Lin
36
18
Lab Example 2-1: Shipping Cost Calculator
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/editText1"
android:layout_centerHorizontal="true"
android:text="@string/ouncesLBL"
android:textAppearance="?android:attr/textAppearanceSmall" />
Prof. Paul Lin
37
Lab Example 2-1: Shipping Cost Calculator
//menu/my.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MyActivity" >
<item android:id="@+id/action_settings"
android:title="@string/action_settings"
android:orderInCategory="100"
android:showAsAction="never" />
</menu>
//res/values/dimens.xml
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="output_margin_buffer">30dp</dimen>
</resources>
Prof. Paul Lin
38
19
Lab Example 2-1: Shipping Cost Calculator
//res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Shipping Calculator</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
<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
39
Lab Example 2-1: Shipping Cost Calculator
// ShipItem.java
package com.example.lin.shippingcalculator;
/**
* Created by trishcornez on 6/29/14.
*/
public class ShipItem {
// SHIPPING CONSTANTS
static final Double BASE = 3.00;
static final Double ADDED = .50;
static final int BASE_WEIGHT = 16;
static final double EXTRA_OUNCES = 4.0;
// DATA MEMBERS
private Integer mWeight;
private Double mBaseCost;
private Double mAddedCost;
private Double mTotalCost;
Prof. Paul Lin
40
20
Lab Example 2-1: Shipping Cost Calculator
// ShipItem.java .. Continue
public ShipItem() {
mWeight = 0;
mAddedCost = 0.0;
mBaseCost = BASE;
mTotalCost = 0.0;
}
public void setWeight (int weight){
mWeight = weight;
computeCosts();
}
Prof. Paul Lin
41
Lab Example 2-1: Shipping Cost Calculator
// ShipItem.java .. Continue
private void computeCosts() {
mAddedCost = 0.0;
mBaseCost = BASE;
if (mWeight <= 0)
mBaseCost = 0.0;
else if (mWeight > BASE_WEIGHT)
mAddedCost = Math.ceil((double) (mWeight - BASE_WEIGHT) /
EXTRA_OUNCES) * ADDED;
mTotalCost = mBaseCost + mAddedCost;
}
Prof. Paul Lin
42
21
Lab Example 2-1: Shipping Cost Calculator
// ShipItem.java .. Continue
public Double getBaseCost() {
return mBaseCost;
}
public Double getAddedCost() {
return mAddedCost;
}
public Double getTotalCost() {
return mTotalCost;
}
}
}
Prof. Paul Lin
43
Lab Example 2-1: Shipping Cost Calculator
// MyActivity.java
package com.example.lin.shippingcalculator;
import android.app.Activity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.EditText;
import android.widget.TextView;
Prof. Paul Lin
44
22
Lab Example 2-1: Shipping Cost Calculator
// MyActivity.java .. Continue
public class MyActivity extends Activity {
//DATA MODEL FOR SHIP ITEM
private ShipItem shipItem;
//VIEW OBJECTS FOR LAYOUT UI REFERENCE
private EditText weightET;
private TextView baseCostTV;
private TextView addedCostTV;
private TextView totalCostTV;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
Prof. Paul Lin
45
Lab Example 2-1: Shipping Cost Calculator
// 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 ELEMENT
weightET = (EditText) findViewById(R.id.editText1);
//TASK 3: ESTABLISH THE REFERENCES TO OUTPUT ELEMENTS
baseCostTV = (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 INPUT
weightET.addTextChangedListener(weightTextWatcher);
}
Prof. Paul Lin
46
23
Lab Example 2-1: Shipping Cost Calculator
// MyActivity.java .. Continue
private 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 NUMBER
try {
shipItem.setWeight((int) Double.parseDouble(s.toString()));
}catch (NumberFormatException e){
shipItem.setWeight(0);
}
displayShipping();
}
public void afterTextChanged(Editable s) {}
public void beforeTextChanged(CharSequence s,
int start, int count, int after){}
};
Prof. Paul Lin
47
Lab Example 2-1: Shipping Cost Calculator
// MyActivity.java .. Continue
private void displayShipping() {
//DISPLAY THE BASE COST, ADDED COST, AND TOTAL COST
baseCostTV.setText("$" + String.format("%.02f",
shipItem.getBaseCost()));
addedCostTV.setText("$" + String.format("%.02f",
shipItem.getAddedCost()));
totalCostTV.setText("$" + String.format("%.02f",
shipItem.getTotalCost()));
}
Prof. Paul Lin
48
24
Lab Example 2-1: Shipping Cost Calculator
// MyActivity.java .. Continue
@Override
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;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// 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) {
return true;
}
return super.onOptionsItemSelected(item);
}
Prof. Paul Lin
}
49
Lab Example 2-1: Shipping Cost Calculator
Prof. Paul Lin
50
25
Summary
Q/A?
Prof. Paul Lin
51
26