CS499 – Mobile Application
Development
Fall 2013
Programming the Android Platform
User Interface
User Interfaces in Android
• Activities typically display a user interface
• Android provides many classes for this
purpose.
– Views & Layouts
– Event Handling
– Menus
– Dialogs
User Interfaces in Android
• Part I: Creating the interface
– Widgets
– Layouts & Views
• Part 2: Wiring the interface
– Basic wiring
– Listening for events
Widgets
• Many predefined interactive
UI components (aka widgets)
– Buttons
• radio
• toggle
–
–
–
–
Text field (editable or not)
Check box
Rating bar
…
Widgets
Widgets
Widgets
• MapView
• WebView
Widgets
Spinner
• provides a scrollable
list of elements
• User can select one
item at a time
• Items added to
spinner with a
ListAdapter
Simple UI: text box & button
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/text"
android:layout_width="wrap_content“
android:layout_height="wrap_content"
android:text="I am a TextView" />
<Button
android:id="@+id/button“
android:layout_width="wrap_content"
android:layout_height="wrap_content“ />
</LinearLayout>
TextView
<TextView
android:id="@+id/text” android:text="I am a TextView"
android:layout_width="wrap_content“
android:layout_height="wrap_content"
android:textColor=“red”
android:gravity=“center_horizontal”
android:background=“#aa0000”
/>
•
•
http://developer.android.com/reference/android/widget/TextView.html
http://developer.android.com/guide/topics/ui/controls/text.html
EditText
<EditText
android:id="@+id/text"
android:layout_width="wrap_content“
android:layout_height="wrap_content"
android:hint=“Enter a number"
android:digits=“true”
/>
http://developer.android.com/reference/android/widget/EditText.html
Button
<Button
android:id="@+id/mybutton"
android:layout_width="wrap_content“
android:layout_height="wrap_content"
android:text=“Cancel"
/>
• http://developer.android.com/reference/android/widget/Button.html
• http://developer.android.com/guide/topics/ui/controls/button.html
RadioButton
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation=“horizontal">
<RadioButton android:id="@+id/radio_yes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/yes"/>
<RadioButton android:id="@+id/radio_maybe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/maybe"/>
<RadioButton android:id="@+id/radio_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/n0"/>
</RadioGroup>
• http://developer.android.com/reference/android/widget/RadioButton.html
• http://developer.android.com/guide/topics/ui/controls/radiobutton.html
User Interfaces in Android
• Part I: Creating the interface
– Widgets
– Layouts & Views
• Part 2: Wiring the interface
– Basic wiring
– Listening for events
ViewGroup
• An invisible View that contains other views
• Used for grouping and organizing a set of
views
• Base class for layouts and view containers
– LinearLayout
– RelativeLayout
– TableLayout
– ListView
–…
ViewGroup & View
• Illustration of a view hierarchy, which defines a UI
layout.
• Specified in XML
View
• Key building block for UI components
• Views occupy a rectangular space on screen
– Responsible for drawing themselves and for handling
events
• Common Operations
– Set properties: opacity, background, rotation
– Set focus: allow view to take focus, request focus
– Attach Listeners: components that should be notified
when events occur
– Set visibility: hide or show
• Will come back to this…
Using the layout
• setContentView(R.layout.main);
• When you load a layout resource in your app,
Android initializes each node of the layout into a
runtime object you can use to define additional
behaviors, query the object state, or modify the
layout.
• Can do all this in code as well. The advantage to
declaring your UI in XML is that it enables you to
better separate the presentation of your
application from the code that controls its
behavior.
Android:layout
• android:layout_height, android:layout_width are used for
widgets & layouts
• Difficult to find info/insight into these
• Three possible values: “fill_parent”, “match_parent”,
“wrap_content”
• “fill_parent”, “match_parent” – equilivent – expand to fit
the height (width) of parent layout
• “wrap_content” – is more ‘fit into available space’
• android:layout_weight – allows you to give relative space
requirements for the given layout or widget
• You will need to experiment with these to get the effect
you want.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical“ … >
<LinearLayout
android:orientation="horizontal“ … android:layout_weight="1">
<TextView android:text="red“ android:gravity="center_horizontal"
android:background="#aa0000“ android:layout_width="wrap_content"
android:layout_height="fill_parent“ android:layout_weight="2"/>
<TextView android:text="green“ … />
<TextView android:text="blue“ … />
<TextView android:text=“yellow“ … />
</LinearLayout>
<LinearLayout android:orientation =“vertical” … >
<TextView android:text=“row one” android:textSize=“15pt” … />
<TextView android:text=“row two” android:textSize=“15pt” … />
<TextView android:text=“row three” android:textSize=“15pt” … />
<TextView android:text=“row four” android:textSize=“15pt” … />
</LinearLayout>
</LinearLayout>
LinearLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="@+id/label“ android:text="Type here:"/>
<EditText android:id="@+id/entry"
android:background="@android:drawable/editbox_background"
android:layout_below="@id/label"/>
<Button android:id="@+id/ok"
android:layout_below="@id/entry"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dip"
android:text="OK" />
<Button android:layout_toLeftOf="@id/ok"
android:layout_alignTop="@id/ok"
android:text="Cancel" />
</RelativeLayout>
RelativeLayout
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent” android:layout_height="fill_parent“ >
<TableRow>
<TextView android:layout_column="1" android:text="Open...“ android:padding="3dip" />
<TextView android:text="Ctrl-O“ android:gravity="right“ android:padding="3dip" />
</TableRow>
<TableRow>
<TextView android:layout_column="1“ android:text="Save...“ android:padding="3dip" />
<TextView android:text="Ctrl-S“ android:gravity="right“ android:padding="3dip" />
</TableRow>
<TableRow>
<TextView android:layout_column="1“ … />
<TextView android:text="Ctrl-Shift-S“ … />
</TableRow>
<View android:layout_height="2dip“ android:background="#FF909090" />
<TableRow>
<TextView android:text="X“ android:padding="3dip" />
<TextView android:text="Import...“ android:padding="3dip" />
</TableRow>
…
TableLayout
…
<TableRow>
<TextView android:text="X“ android:padding="3dip" />
<TextView android:text="Export...“ android:padding="3dip" />
<TextView android:text="Ctrl-E“ android:gravity="right“ android:padding="3dip" />
</TableRow>
<View android:layout_height="2dip“ android:background="#FF909090" />
<TableRow>
<TextView android:layout_column="1“ android:text="Quit“ android:padding="3dip" />
</TableRow>
</TableLayout>
TableLayout
Other types:
• GridView – 2-d scrollable grid
• TabLayout (not in later OS) –
allows multiple activities to
share the single content area –
one tab per activity – selected
tab for the activity with focus
ListView
• ViewGroup containing a scrollable
list of selectable items
• ListView can filter the list of items
based on text input
• List items inserted using a
ListAdapter
• One of the most complicated
ViewGroups to use (in my
experience) – will return to in
more detail a few weeks
User Interfaces in Android
• Part I: Creating the interface
– Widgets
– Layouts & Views
• Part 2: Wiring the interface
– Basic wiring
– Listening for events
Basic Wiring
EditText userText =
(EditText)findViewById(R.id.intext);
String myData = userText.getText().toString();
TextView myText =
(TextView)findViewById(R.id.outtext);
myText.setText(myData);
Basic Wiring
final Spinner spnConversions =
(Spinner)findViewById(R.id.conversions);
ArrayAdapter<CharSequence> aa;
aa = ArrayAdapter.createFromResource(this,
R.array.conversions,
android.R.layout.simple_spinner_item);
aa.setDropDownViewResource(android.R.layout.simple_spin
ner_item);
spnConversions.setAdapter(aa);
User Interfaces in Android
• Part I: Creating the interface
– Widgets
– Layouts & Views
• Part 2: Wiring the interface
– Basic wiring
– Listening for events
Handling View Events
• Can handle events with listeners
• Listener interfaces defined in View class
• onClickListener.onClick()
– View has been clicked
• onLongClickListener.onLongClick()
– View has been pressed & held
• onFocusChangeListener.onFocusChange()
– View has received or lost focus
• onKeyListener.onKey()
– View has received a key press
Handling View Events
• There are usually multiple ways to do this…
– creating an adapter and setting
– setting in the layout
– onClickListener interface
– …??
For example, consider a button --
Setting in the layout…
Button button = (Button)findViewById(R.id.button);
button.setText(“Click me”);
…
public void myOnClick(View v) {
/* my action on click */
}
in the XML for Button:
android:onClick=“myOnClick()”
Creating an adapter…
Button button =
(Button)findViewById(R.id.button);
button.setText(“Click me”);
AdapterView.OnClickListener ocl;
ocl = new AdapterView.OnClickListener() {
public void onClick(View v) {
/* my on click action */
}
};
button.setOnClickListener(ocl);
onClickListener interface…
public class SampleActivity extends Activity
implements OnClickListener {
…
Button button =
(Button)findViewById(R.id.button);
button.setText(“Click me”);
button.setOnClickListener(this);
…
}
public void OnClick(View v) {
/* my action on click */
}
Spinner
final Spinner spnConversions =
(Spinner)findViewById(R.id.conversions);
…
AdapterView.OnItemSelectedListener oisl;
oisl = new AdapterView.OnItemSelectedListener() {
public void onItemSelected(AdapterView<?> parent, View view,
int position, long id) {
UCActivity.this.position = position;
}
public void onNothingSelected(AdapterView<?> parent) {
System.out.println("nothing");
}
};
spnConversions.setOnItemSelectedListener(oisl);
Radio Buttons
public void onRadioButtonClicked(View view) {
// Is the button now checked?
boolean checked = ((RadioButton) view).isChecked();
}
// Check which radio button was clicked
switch(view.getId()) {
case R.id.radio_yes:
if (checked)
//
break;
case R.id.radio_maybe:
if (checked)
//
break;
case R.id.radio_no:
if (checked)
//
break;
}
<RadioGroup
xmlns:android="http://schemas.android.com/
apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation=“horizontal“>
<RadioButton android:id="@+id/radio_yes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/yes“
android:onClick=“onRadioButtonClicked />
<RadioButton
android:id="@+id/radio_maybe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/maybe“
android:onClick=“onRadioButtonClicked />
<RadioButton android:id="@+id/radio_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/n0“
android:onClick=“onRadioButtonClicked />
</RadioGroup>
EditText
TextWatcher tw = new TextWatcher(){
public void afterTextChanged(Editable s) { }
public void beforeTextChanged(CharSequence s, int start, int count, int after) {}
public void onTextChanged(CharSequence s, int start, int before, int count) {
if (etUnits.getText().length() == 0) {
btnClear.setEnabled(false);
btnConvert.setEnabled(false);
} else {
btnClear.setEnabled(true);
btnConvert.setEnabled(true);
}
}
};
etUnits.addTextChangedListener(tw);
Handling View Events
• Can also handle some events in custom Views
• onFinishInflate()
– View and all children inflated
• onLayout()
– View must assign a value and position to components
• onDraw()
– View should render its content
• onKeyXXX()
– A particular key has been pressed
• onWindowVisibilityChanged()
– Window containing view has changed its visibility
Toast
• Quick message to the user – I’ve used this in a
manner analogous to a printf for debugging.
• Never gets focus – designed to be unintrusive.
• Toast.makeText(getApplicationContext(),
“This is my message”,
Toast.LENGTH_SHORT).show();
Menus
• Activities support menus
• Activities can:
– Add items to a menu
– Handle clicks on menu items
Menu Types
• Options
– Primary menu shown when user presses the
menu button
• Context
– View-specific menu to be shown when user
touches and hold the view
• Submenu
– A menu activated when user touches a visible
menu item.
Option Menu and SubMenus
Context Menus
Creating Menus
• Define menu resource in XML file
(/res/menu/filename.xml)
• Inflate menu resource using MenuInflater in
appropriate onCreate…Menu() method
• Handling item selection in appropriate on
…ItemsSelected() methods
HelloAndroidWithMenus
Creating Option Menus
public boolean onCreateOptionsMenu(Menu
menu) {
MenuInflater inflater =
getMenuInflater();
inflater.inflate(R.menu.top_menu,menu);
return true;
}
top_menu.xml
<menu … >
<item android=“@+id/help” android:title=“@string/help”
android:icon=“@drawable/ic_menu_help” />
<item android=“@+id/help2” android:title=“@string/help”
android:icon=“@drawable/ic_menu_help” />
<item android=“@+id/help3” android:title=“@string/help”
android:icon=“@drawable/ic_menu_help” >
</item>
</menu>
Selecting Option Menu Items
public boolean onOptionsItemSelected(MenuItem item)
{
switch (item.getItemId()) {
case R.id.help:
// do something
return true;
case R.id.help2:
// do something
return true;
case R.id.help3:
// do something
return true;
}
}
Dialogs
• Independent subwindows used by Activities to
communicate with the user
• Dialog subclasses
– AlertDialog
– ProgressDialog
– DatePickerDialog
– TimePickerDialog
AlertDialog
AlertDialog
private final int ALERTTAG=0, PROGRESSTAG =
1;
…
shutdownButton.setOnClickListener( new
OnClickListener() {
public void onClick(View v) {
showDialog(ALERTTAG);
}
});
onCreateDialog()
protected Dialog onCreateDialog(int id, Bundle args){
…
case ALERTTAG:
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setMessage(“Do you really want to exit?”)
.setCancelable(false)
.setPositiveButton(“Yes”, new
DialogInterface.OnClickListener() {
dialog.cancel();
showDialog(PROGRESSTAG);
})
.setNegativeButton(“No”, new
DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog,
int id)
{ dialog.cancel(); }
});
Next week
• Activities & Intents
Resources
• http://developer.android.com/guide/topics/appwidg
ets/index.html
• http://developer.android.com/guide/topics/ui/contr
ols
• http://developer.android.com/guide/topics/ui/declar
ing-layout.html
• http://developer.android.com/guide/topics/ui/uievents.html