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

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

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

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_spinner_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… 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()”

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

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” <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: case R.id.help3: }

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

Next week Activities & Intents

Resources http://developer.android.com/guide/topics/appwidgets/index.html http://developer.android.com/guide/topics/ui/controls http://developer.android.com/guide/topics/ui/declaring-layout.html http://developer.android.com/guide/topics/ui/ui-events.html