1. CS499 – Mobile Application Development
Fall 2013
Programming the Android Platform
User Interface

2. User Interfaces in Android
Activities typically display a user interface
Android provides many classes for this purpose.
Views & Layouts
Event Handling
Menus
Dialogs

3. User Interfaces in Android
Part I: Creating the interface
Widgets
Layouts & Views
Part 2: Wiring the interface
Basic wiring
Listening for events

4. Widgets Many predefined interactive UI components (aka widgets)
Buttons
radio
toggle
Text field (editable or not)
Check box
Rating bar …

5. Widgets

6. Widgets

7. Widgets
MapView
WebView

8. Widgets Spinner provides a scrollable list of elements
User can select one item at a time
Items added to spinner with a ListAdapter

9. Simple UI: text box & button
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content“ android:layout_height="wrap_content" android:text="I am a TextView" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content“ /> </LinearLayout>

10. TextView
<TextView
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”
/>

11. EditText
<EditText
android:layout_width="wrap_content“
android:layout_height="wrap_content"
android:hint=“Enter a number"
android:digits=“true”
/>

12. Button
<Button
android:layout_width="wrap_content“
android:layout_height="wrap_content"
android:text=“Cancel"
/>

13. RadioButton
<RadioGroup xmlns:android="     android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:orientation=“horizontal">     <RadioButton         android:layout_width="wrap_content"         android:layout_height="wrap_content"             <RadioButton         android:layout_width="wrap_content"         android:layout_height="wrap_content"        
    <RadioButton         android:layout_width="wrap_content"         android:layout_height="wrap_content"         </RadioGroup>

14. User Interfaces in Android
Part I: Creating the interface
Widgets
Layouts & Views
Part 2: Wiring the interface
Basic wiring
Listening for events

15. 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 …

16. ViewGroup & View
 Illustration of a view hierarchy, which defines a UI layout.
Specified in XML

17. 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…

18. 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. 

19. 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.

20. <LinearLayout xmlns:android="http://schemas. android
<LinearLayout xmlns: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

21. <RelativeLayout xmlns:android="http://schemas. android
<RelativeLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:text="Type here:"/> <EditText <Button android:layout_alignParentRight="true" android:layout_marginLeft="10dip" android:text="OK" /> <Button android:text="Cancel" /> </RelativeLayout>
RelativeLayout

22. <TableLayout xmlns:android="http://schemas. android
<TableLayout xmlns: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> <TextView android:layout_column="1“ android:text="Save...“ android:padding="3dip" /> <TextView android:text="Ctrl-S“ android:gravity="right“ android:padding="3dip" /> <TextView android:layout_column="1“ … /> <TextView android:text="Ctrl-Shift-S“ … /> <View android:layout_height="2dip“ android:background="#FF909090" /> <TextView android:text="X“ android:padding="3dip" /> <TextView android:text="Import...“ android:padding="3dip" /> …
TableLayout

23. … <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" /> <TextView android:layout_column="1“ android:text="Quit“ android:padding="3dip" /> </TableLayout>
TableLayout

24. 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

25. 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

26. User Interfaces in Android
Part I: Creating the interface
Widgets
Layouts & Views
Part 2: Wiring the interface
Basic wiring
Listening for events

27. Basic Wiring
EditText userText = (EditText)findViewById(R.id.intext); String myData = userText.getText().toString(); TextView myText = (TextView)findViewById(R.id.outtext); myText.setText(myData);

28. 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_spinner_item); spnConversions.setAdapter(aa);

29. User Interfaces in Android
Part I: Creating the interface
Widgets
Layouts & Views
Part 2: Wiring the interface
Basic wiring
Listening for events

30. 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

31. 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 --

32. Setting in the layout… in the XML for Button:
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()”

33. 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);

34. 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 */

35. 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);

36. 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="     android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:orientation=“horizontal“>     <RadioButton         android:layout_width="wrap_content"         android:layout_height="wrap_content"        
android:onClick=“onRadioButtonClicked />     <RadioButton         android:layout_width="wrap_content"         android:layout_height="wrap_content"        
android:onClick=“onRadioButtonClicked />
    <RadioButton         android:layout_width="wrap_content"         android:layout_height="wrap_content"        
android:onClick=“onRadioButtonClicked /> </RadioGroup>

37. 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);

38. 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

39. 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();

40. Menus Activities support menus Activities can: Add items to a menu
Handle clicks on menu items

41. Menu Types Options Context Submenu
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.

42. Option Menu and SubMenus

43. Context Menus

44. 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

45. HelloAndroidWithMenus

46. Creating Option Menus
public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.top_menu,menu); return true; }

47. top_menu.xml
<menu … > <item /> <item <item > </item> </menu>

48. Selecting Option Menu Items
public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.help: // do something return true; case R.id.help2: case R.id.help3: }

49. Dialogs
Independent subwindows used by Activities to communicate with the user
Dialog subclasses
AlertDialog
ProgressDialog
DatePickerDialog
TimePickerDialog

50. AlertDialog

51. AlertDialog
private final int ALERTTAG=0, PROGRESSTAG = 1; … shutdownButton.setOnClickListener( new OnClickListener() { public void onClick(View v) { showDialog(ALERTTAG); } });

52. 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 public void onClick(DialogInterface dialog, int id) { dialog.cancel(); } });

53. Next week
Activities & Intents

54. Resources