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

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

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

4. Option Menu and SubMenus

5. Context Menus

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

7. HelloAndroidWithMenus

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

9. top_menu.xml (/res/menu)
<menu … > <item /> <item <item > </item> </menu>

10. 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: }

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

12. AlertDialog

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

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

15. ListView ViewGroup containing a scrollable list of selectable items
List items inserted using an Adapter
One of the most complicated ViewGroups to use (in my experience)
Code for slide examples are in the Examples folder on Blackboard

16. ListView
Receive data via an adapter which also defines how each row is displayed
ArrayAdapter can handle data based on Arrays or java.util.list
SimpleCursorAdapter can handle database related data
Default layouts for row (i.e. android.R.layout.simple_list_item1)
Adapter assigned to list via setAdapter method on the ListView object
ListView calls getView() on the adapter for each data element

17. Simple Example (similar to ListView-0 online)
ListView listView = (ListView) findViewById(R.id.mylist); String[] values = new String[] {“Android”, ”iPhone”, ”WindowsMobile”, ”Blackberry”, ”WebOS”, “Ubuntu”, ”Windows7”, ”Mac OS X”, ”Linux”,”OS/2”}; //Param1 – context //Param2 – row layout //Param3 – ID of the view to which data is written //Param4 – the Array of data ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, values); listView.setAdapter(adapter);

18. main.xml (ListView-0) Simply displays a list
<LinearLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ListView android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout>
Simply displays a list

19. ListView-1 New Features: Specifying a layout for each line.
onClick listener for the items of a list
Adding/removing items to the list.

20. ListView-1 line.xml <TextView xmlns:android=
… listView = (ListView) findViewById(R.id.mylist); // Param1 - context // Param2 – xml layout file for the row myAdapter = new ArrayAdapter<String>(this, R.layout.line); listView.setAdapter(myAdapter);
line.xml
<TextView xmlns:android=
"
res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:padding="5dp"
/>

21. ListView-1 Use Toast to print out the item being touched
… listView = (ListView) findViewById(R.id.mylist); // Param1 - context // Param2 – xml layout file for the row myAdapter = new ArrayAdapter<String>(this, R.layout.line); listView.setAdapter(myAdapter); listView.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Toast.makeText(getApplicationContext(), ((TextView) view).getText(), Toast.LENGTH_SHORT).show(); } });
Use Toast to print out the item being touched

22. ListView-1 Remove item for when pressed (and held)
listView.setOnItemLongClickListener(new OnItemLongClickListener() { public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) { Toast.makeText(getApplicationContext(), "Removing " + ((TextView) view).getText(), Toast.LENGTH_SHORT).show(); myAdapter.remove(myAdapter.getItem(position)); return true; } });
Remove item for when pressed (and held)

23. ListView-1 Use buttons to add and clear items
Button addButton = (Button)findViewById(R.id.add); addButton.setOnClickListener(new AdapterView.OnClickListener() { public void onClick(View v) { String input = et.getText().toString(); myAdapter.add(input); Toast.makeText(getApplicationContext(), "Adding " + input, Toast.LENGTH_SHORT).show(); et.setText(""); } }); Button clearButton = (Button)findViewById(R.id.clear); clearButton.setOnClickListener(new AdapterView.OnClickListener() { myAdapter.clear();
Use buttons to add and clear items

24. ListView-3 New Features: Using ListActivity (see also ListView-2)
Custom Adapters

25. ListActivity
Extension of Activity class designed to simplify the handling of ListView
If only using a list, don’t need to create XML UI
Default name for the ListView:
 listView =
(ListView)findViewById(android.R.id.list);

26. Custom Adapters
The canned adapters are pretty generic. If you want to do anything more interesting, you need to write your own adapters.
Consider adding an icon for each element of the list. Suppose I only like fruit is the name is at least 8 characters…

27. line.xml
<LinearLayout xmlns:android=" android:layout_width="wrap_content" android:layout_height="wrap_content“ android:padding="5dp" > <ImageView android:layout_width="50px" android:layout_height="50px" android:layout_marginLeft="5px" android:layout_marginRight="20px" android:layout_marginTop="5px" /> <TextView android:layout_height="wrap_content" android:textSize ="30px" /> </LinearLayout>

28. Custom Adapter
private class MyCustomAdapter extends BaseAdapter { private ArrayList<String> mData = new ArrayList<String>(); private LayoutInflater mInflater; public MyCustomAdapter() { mInflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE); } public void addItem(final String item) { mData.add(item); notifyDataSetChanged(); } public void removeItem(final String item) { mData.remove(item); notifyDataSetChanged(); } public int getCount() { return mData.size(); public String getItem(int position) { return mData.get(position); public long getItemId(int position) { return position;
public void clear() {
          mData.clear();
          notifyDataSetChanged();
         }
   public View getView(int position, View convertView, ViewGroup parent) {
 // next slide }

29. Custom Adapter See online for complete adapter…
public View getView(…) { ViewHolder holder = null; if (convertView == null) { convertView = mInflater.inflate(R.layout.line, null); holder = new ViewHolder(); holder.textView = (TextView)convertView.findViewById(R.id.label); holder.imageView = (ImageView)convertView.findViewById(R.id.image); convertView.setTag(holder); } else { holder = (ViewHolder)convertView.getTag(); } String s = mData.get(position); holder.textView.setText(s); if (s.length() < 4) holder.imageView.setImageResource( R.drawable.emo_im_sad); else if (s.length() < 8) R.drawable.emo_im_undecided); else R.drawable.emo_im_happy); return convertView; }
public static class ViewHolder { public TextView textView; public ImageView imageView; }
Holder class in Activity -
Note similarity to line.xml
See online for complete
adapter…

30. Related Views: GridView – 2-d scrollable grid
Spinner – also uses an adapter