Workshop 1. Create an Option Menu, and convert it into Action Bar (Page 1 8) Create an simple Option Menu Convert Option Menu into Action Bar Create Event Listener for Menu and Action Bar Add System Icon to Action Bar Add Custom Icon to Action Bar 2. Compare the simple list using different approach (Page 9 14) simple_list_item_1 simple_list_item_single_choice simple_list_item_checked simple_list_item_multiple_choice 3. Create the complicate list using advanced list technique (Page 15 20) Create List using ListActivity Switch on Text Filter Attach a Context Menu X4-XT-CDP-0251-A @ Peter Lo 2015
1. Action Bar 1.1 Menu and Submenu 1. Create the Android application using the following attributes. Application Name: MyActionBar Project Name: Package Name: MyActionBar com.example.myactionbar 2. Select the file "menu.xml" in the "res/menu" folder, then right click and select Open With Android Common XML Editor (or double click it to open). 3. In order to create new menu item, press the [Add] button. Then select Create a new element at the top level, in Menu and select Item in the dialog, press [OK] button to confirm. X4-XT-CDP-0251-A @ Peter Lo 2015 1
4. Set the Title to Menu Item 1 and save the menu. Repeat the steps to create Menu Item 2. 5. To create sub menu, press the [Add] button. Select Create a new element in the select element, item 2 (Item), and select Sub-Menu in the dialog. Press [OK] button to confirm. 6. To create sub menu item, press [Add] button again. Select Create a new element in the select element, item 2 (Item), and select Item in the dialog. Press [OK] button to confirm. X4-XT-CDP-0251-A @ Peter Lo 2015 2
7. Set the Title to Sub Item 3 and save the menu. Repeat the steps to create Sub Item 4 and Sub Item 5. 8. The XML code for the menu look like: <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:context="com.example.myactionbar.mainactivity" > <item android:id="@+id/action_settings" android:orderincategory="100" android:showasaction="never" android:title="@string/action_settings"/> <item android:id="@+id/item1" android:title="menu Item 1"/> <item android:id="@+id/item2" android:title="menu Item 2"> <menu> <item android:id="@+id/item3" android:title="sub Item 3"/> <item android:id="@+id/item4" android:title="sub Item 4"/> <item android:id="@+id/item5" android:title="sub Item 5"/> </menu> </item> </menu> 9. Save and execute the app, press the action bar and select Menu Item 2 to display the sub menu. X4-XT-CDP-0251-A @ Peter Lo 2015 3
1.2 Attach Menu into Action Bar 1. Select Menu Item 2, and then change the attribute of Show as action to always. 2. The XML for the menu become: <item android:id="@+id/item2" android:title="menu Item 2" android:showasaction="always"> <menu> <item android:id="@+id/item3" android:title="sub Item 3"/> <item android:id="@+id/item4" android:title="sub Item 4"/> <item android:id="@+id/item5" android:title="sub Item 5"/> </menu> </item> 3. Save and execute the app, can you find the different? X4-XT-CDP-0251-A @ Peter Lo 2015 4
1.3 Add System Icon to Action Bar 1. Set the icon for Sub Item 3 to @android:drawable/ic_menu_call. 2. The XML for the menu become: <item android:id="@+id/item2" android:title="menu Item 2" android:showasaction="always"> <menu> <item android:id="@+id/item3" android:title="sub Item 3" android:icon="@android:drawable/ic_menu_call"/> <item android:id="@+id/item4" android:title="sub Item 4"/> <item android:id="@+id/item5" android:title="sub Item 5"/> </menu> </item> 3. Save and execute the apps, press the Menu Item 2 to check the icon. X4-XT-CDP-0251-A @ Peter Lo 2015 5
1.4 Add Custom Icon to Action Bar 1. Drag the picture ic_menu_polyu.png into drawable-hdpi folder, select Copy Files in the File Operation dialog. 4. Set the icon for Sub Item 4 to @drawable/ic_menu_polyu. 5. The XML for the menu become: <item android:id="@+id/item2" android:title="menu Item 2" android:showasaction="always"> <menu> <item android:id="@+id/item3" android:title="sub Item 3" android:icon="@android:drawable/ic_menu_call"/> <item android:id="@+id/item4" android:title="sub Item 4" android:icon="@drawable/ic_menu_polyu"/> <item android:id="@+id/item5" android:title="sub Item 5"/> </menu> </item> 6. Save and execute the apps, can you see the icon in the menu? X4-XT-CDP-0251-A @ Peter Lo 2015 6
1.5 Handling Menu Event 1. Modify the source code for the file "MainActivity.java" as follow to handle menu event. package com.example.myactionbar; import android.app.activity; import android.os.bundle; import android.view.menu; import android.view.menuitem; import android.widget.toast; public class MainActivity extends Activity { @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); @Override public boolean oncreateoptionsmenu(menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getmenuinflater().inflate(r.menu.main, 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; // Handle click event Toast.makeText(this, item.tostring() + " selected", Toast.LENGTH_LONG).show(); return super.onoptionsitemselected(item); X4-XT-CDP-0251-A @ Peter Lo 2015 7
2. Save and execute the apps, press Menu button to call up the menu items. X4-XT-CDP-0251-A @ Peter Lo 2015 8
2. Simple List 2.1 Simple List using simple_list_item_1 1. Create the Android application with the following attributes. Application Name: MySimpleList Project Name: Package Name: MySimpleList com.example.mysimplelist 2. Remove the default text view Hello World 3. Right click the layout, and select Change Layout. 4. Change the layout to List View. X4-XT-CDP-0251-A @ Peter Lo 2015 9
5. The layout will be changed to: 6. Modify the source code for the file "MainActivity.java" as follow. package com.example.mysimplelist; import android.os.bundle; import android.app.activity; import android.view.menu; import android.view.view; import android.widget.adapterview; import android.widget.adapterview.onitemclicklistener; import android.widget.arrayadapter; import android.widget.listview; import android.widget.textview; import android.widget.toast; public class MainActivity extends Activity { private ListView ListView1; private String ListItems[] = { "Item 1", "Item 2", "Item 3", "Item 4"; ArrayAdapter<String> adapter; @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); // Define the visual style and set data for the list view X4-XT-CDP-0251-A @ Peter Lo 2015 10
ListView1 = (ListView)findViewById(R.id.ListView1); // Define a new Adapter adapter = new ArrayAdapter<String> (this,android.r.layout.simple_list_item_1, ListItems); // Assign adapter to ListView ListView1.setAdapter(adapter); // Register a callback to be invoked when an item in the list view clicked ListView1.setOnItemClickListener(new OnItemClickListener() { public void onitemclick(adapterview<?> parent, View view, int position, long id) { // Display a toast that show the content of the clicked list item Toast.makeText( getapplicationcontext(), ((TextView) view).gettext(), Toast.LENGTH_SHORT).show(); ); @Override public boolean oncreateoptionsmenu(menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getmenuinflater().inflate(r.menu.main, menu); return true; 7. Save and execute the app, then select the list item to observe the result. X4-XT-CDP-0251-A @ Peter Lo 2015 11
2.2 Simple List using simple_list_item_single_choice 1. Open the previous project and modify the source code for "MainActivity.java" as follow: protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); // Define the visual style and set data for the list view ListView1 = (ListView)findViewById(R.id.ListView1); // Define a new Adapter adapter = new ArrayAdapter<String> (this,android.r.layout.simple_list_item_single_choice, ListItems); // Define the selection mode Single choice ListView1.setChoiceMode(ListView.CHOICE_MODE_SINGLE); // Assign adapter to ListView ListView1.setAdapter(adapter); // Register a callback to be invoked when an item in the list view clicked ListView1.setOnItemClickListener(new OnItemClickListener() { public void onitemclick(adapterview<?> parent, View view, int position, long id) { // Display a toast that show the content of the clicked list item Toast.makeText( getapplicationcontext(), ((TextView) view).gettext(), Toast.LENGTH_SHORT).show(); ); 2. Save and execute the app, then select the list item to observe the result. X4-XT-CDP-0251-A @ Peter Lo 2015 12
2.3 Simple List using simple_list_item_checked 1. Open the previous project and modify the source code for "MainActivity.java" as follow: protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); // Define the visual style and set data for the list view ListView1 = (ListView)findViewById(R.id.ListView1); // Define a new Adapter adapter = new ArrayAdapter<String> (this,android.r.layout.simple_list_item_checked, ListItems); // Define the selection mode Multiple choice ListView1.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE); // Assign adapter to ListView ListView1.setAdapter(adapter); // Register a callback to be invoked when an item in the list view clicked ListView1.setOnItemClickListener(new OnItemClickListener() { public void onitemclick(adapterview<?> parent, View view, int position, long id) { // Display a toast that show the content of the clicked list item Toast.makeText( getapplicationcontext(), ((TextView) view).gettext(), Toast.LENGTH_SHORT).show(); ); 2. Save and execute the app, then select the list item to observe the result. X4-XT-CDP-0251-A @ Peter Lo 2015 13
2.4 Simple List using simple_list_item_multiple_choice 1. Open the previous project and modify the source code for "MainActivity.java" as follow. protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); // Define the visual style and set data for the list view ListView1 = (ListView)findViewById(R.id.ListView1); // Define a new Adapter adapter = new ArrayAdapter<String> (this,android.r.layout.simple_list_item_multiple_choice, ListItems); // Define the selection mode Multiple choice ListView1.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE); // Assign adapter to ListView ListView1.setAdapter(adapter); // Register a callback to be invoked when an item in the list view clicked ListView1.setOnItemClickListener(new OnItemClickListener() { public void onitemclick(adapterview<?> parent, View view, int position, long id) { // Display a toast that show the content of the clicked list item Toast.makeText( getapplicationcontext(), ((TextView) view).gettext(), Toast.LENGTH_SHORT).show(); ); 2. Save and execute the app, then select the list item to observe the result. X4-XT-CDP-0251-A @ Peter Lo 2015 14
3. Advanced List Technique 3.1 Create List using ListActivity 1. Create the Android application with the following attributes. Application Name: MyListActivity Project Name: Package Name: MyListActivity com.example.mylistactivity 2. Modify the source code for "MainActivity.java" as follow. package com.example.mylistactivity; import android.os.bundle; import android.app.activity; import android.view.menu; import android.app.listactivity; import android.view.view; import android.widget.arrayadapter; import android.widget.listview; import android.widget.textview; import android.widget.toast; public class MainActivity extends ListActivity { private String ListItems[] = { "Item 1", "Item 2", "Item 3", "Item 4"; private ArrayAdapter<String> adapter; @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // setcontentview(r.layout.activity_main); // Define a new Adapter adapter = new ArrayAdapter<String> (this, android.r.layout.simple_list_item_1, ListItems); // Assign adapter to ListView setlistadapter(adapter); X4-XT-CDP-0251-A @ Peter Lo 2015 15
// Handle Item click event protected void onlistitemclick(listview list, View view, int position, long id){ Toast.makeText( getapplicationcontext(), ((TextView) view).gettext(), Toast.LENGTH_SHORT).show(); @Override public boolean oncreateoptionsmenu(menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getmenuinflater().inflate(r.menu.main, menu); return true; 3. Save and execute the app, then select the list item to observe the result. 3.2 Switch on Text Filter 1. Open the previous project and modify the source code for "MainActivity.java" as follow. protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // setcontentview(r.layout.activity_main); // Define a new Adapter adapter = new ArrayAdapter<String> (this, android.r.layout.simple_list_item_1, ListItems); // Assign adapter to ListView setlistadapter(adapter); X4-XT-CDP-0251-A @ Peter Lo 2015 16
// Enables or disables the type filter window getlistview().settextfilterenabled(true); 2. Save and execute the app, then press 1 to observe the result. 3.3 Attach a Context Menu 1. Open the preview project and select the "res/menu" folder. Then right click and select New Android XML File. 2. Set the File as contextmenu and press [Finish] button. X4-XT-CDP-0251-A @ Peter Lo 2015 17
3. In order to create new context menu item, press the [Add] button. Then select Item in the dialog, press [OK] button to confirm. 4. Set the Title to Context Menu 1 and save the menu. Repeat the steps to create Context Menu 2. 5. The XML code for the content menu will look like: <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/item1" android:title="context Menu 1"></item> <item android:id="@+id/item2" android:title="context Menu 2"></item> </menu> 6. Modify the source code for "MainActivity.java" as follow. package com.example.mylistactivity; import android.os.bundle; import android.app.activity; import android.view.menu; import android.app.listactivity; import android.view.view; import android.widget.arrayadapter; import android.widget.listview; X4-XT-CDP-0251-A @ Peter Lo 2015 18
import android.widget.textview; import android.widget.toast; import android.view.menuitem; import android.view.contextmenu; import android.view.contextmenu.contextmenuinfo; public class MainActivity extends ListActivity { private String ListItems[] = { "Item 1", "Item 2", "Item 3", "Item 4"; private ArrayAdapter<String> adapter; @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // setcontentview(r.layout.activity_main); // Define a new Adapter adapter = new ArrayAdapter<String> (this, android.r.layout.simple_list_item_1, ListItems); // Assign adapter to ListView setlistadapter(adapter); // Enables or disables the type filter window getlistview().settextfilterenabled(true); // Handle Item click event protected void onlistitemclick(listview list, View view, int position, long id){ Toast.makeText( getapplicationcontext(), ((TextView) view).gettext(), Toast.LENGTH_SHORT).show(); // Register the content menu for the List item registerforcontextmenu(view); @Override public void oncreatecontextmenu(contextmenu contextmenu, View view, ContextMenuInfo menuinfo) { // Inflate the context menu X4-XT-CDP-0251-A @ Peter Lo 2015 19
super.oncreatecontextmenu(contextmenu, view, menuinfo); getmenuinflater().inflate(r.menu.contextmenu, contextmenu); public boolean oncontextitemselected (MenuItem item) { switch(item.getitemid()) { case R.id.item1: Toast.makeText(this, "Context Item 1 selected", Toast.LENGTH_LONG).show(); return true; case R.id.item2: Toast.makeText(this, "Context Item 2 selected", Toast.LENGTH_LONG).show(); return true; default: return super.oncontextitemselected(item); @Override public boolean oncreateoptionsmenu(menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getmenuinflater().inflate(r.menu.main, menu); return true; 7. Save and execute the app, then long click the list item to call up the context menu. X4-XT-CDP-0251-A @ Peter Lo 2015 20