1. Option Menu · Android Apps Development for Mobile and Tablet Device (Level I) Lesson 4 4T025-1-A @ Peter Lo 2014 2 4. Set the “ Title ” to “ Menu Item 1 ” and save the

Android Apps Development for Mobile and Tablet Device (Level I) Lesson 4

4T025-1-A @ Peter Lo 2014 1

1. Option Menu

1.1 Option Menu 1. Create the Android application using the following attributes.

․ Application Name: MyOptionMenu

․ Project Name: MyOptionMenu

․ Package Name: com.example.myoptionmenu

2. Select the file "menu.xml" in the "res/menu" folder, then right click and select Open With ��

Android Common XML Editor.

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.


4T025-1-A @ Peter Lo 2014 2

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.


4T025-1-A @ Peter Lo 2014 3

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

<item

android:id="@+id/action_settings"

android:orderInCategory="100"

android:showAsAction="never"

android:title="@string/action_settings"/>

<item android:id="@+id/item1"></item>

<item android:id="@+id/item2">

<menu>

<item android:id="@+id/item3"/>



</menu>

</item>

</menu>

9. Save and execute the app, press the menu button to display the menu. On the other hand, you can

also use the menu bar to display the menu.


4T025-1-A @ Peter Lo 2014 4

1.2 Convert Option Menu into Action Bar 1. Select “Menu Item 2”, and then change the attribute of “Show as action” to “always”.

2. Save and execute the app, can you find the different?

1.3 Handling Menu Event 1. Modify the source code for the file "MainActivity.java" as follow to handle menu event.

package com.example.myoptionmenu;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.MenuItem;

import android.widget.Toast;

public class MainActivity extends Activity {


4T025-1-A @ Peter Lo 2014 5

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

}

public boolean onOptionsItemSelected(MenuItem item) {

switch(item.getItemId()) {

case R.id.item1:

Toast.makeText(this, "Menu Item 1 selected",

Toast.LENGTH_LONG).show();

return true;

case R.id.item2:

Toast.makeText(this, "Menu Item 2 selected",


return true;

case R.id.item3:

Toast.makeText(this, "Sub Menu Item 3 selected",


return true;

case R.id.item4:



return true;

case R.id.item5:



return true;


4T025-1-A @ Peter Lo 2014 6

default:

return super.onOptionsItemSelected(item);

}

}

}

10. Save and execute the apps, press Menu button to call up the menu items.

1.4 Add System Icon to Action Bar 1. Set the icon for “Menu Item 2”, “ Sub Item 3”, “ Sub Item 4” and “Sub Item 5” to

“@android:drawable/ic_menu_call”.


4T025-1-A @ Peter Lo 2014 7

2. The XML for the corresponding line look like: android:icon="@android:drawable/ic_menu_call">

3. Save and execute the apps, can you see the icon in the menu?

1.5 Add Custom Icon to Action Bar 1. Select the folder “res”, then right click and select New �� Folder to create a new folder.

2. Set the folder name as “drawable” and press [Finish] to create.


4T025-1-A @ Peter Lo 2014 8

3. Drag the picture “ic_menu_polyu.png” into “drawable” folder, select “Copy Files” in the

“File Operation” dialog.

4. Set the icon for “Menu Item 2” to “@drawable/ic_menu_polyu”.

5. The XML for the corresponding line look like: android:icon="@drawable/ic_menu_polyu">


4T025-1-A @ Peter Lo 2014 9

6. Save and execute the apps, can you see the icon in the menu?


4T025-1-A @ Peter Lo 2014 10

2. Customize Action Bar

2.1 Hide the Action Bar 1. Create the Android application using the following attributes, remember to set the API level

greater than 11.

․ Application Name: MyActionBar

․ Project Name: MyActionBar

․ Package Name: com.example.myactionbar

2. Modify the source code for the file "MainActivity.java" as follow. package com.example.myactionbar;




import android.app.ActionBar;


@Override




// Define the Action Bar

ActionBar actionBar = getActionBar();

// Hide the Action Bar

actionBar.hide();

}

@Override




return true;

}

}


4T025-1-A @ Peter Lo 2014 11

3. Save and execute the apps, can you find the Action Bar?

2.2 Customize Title and Subtitle 1. Modify the source code for the file "MainActivity.java" as follow.

package com.example.myactionbar;






@Override







// actionBar.hide();

// Define the Subtitle

actionBar.setSubtitle("Subtitle");

// Define the Title

actionBar.setTitle("Title");

// Show the Action Bar on layout


4T025-1-A @ Peter Lo 2014 12

actionBar.show();

}

@Override




return true;

}

}

2. Save and execute the apps, can you see the title and subtitle in Action Bar?

2.3 Add the Progress Bar 1. Open the previous project, select the "res/menu" folder, then right click and select New ��

Android XML File.


4T025-1-A @ Peter Lo 2014 13

2. Set the File as “refreshmenu” and press [Finish] button.

3. In order to create new menu item, press the [Add] button. Then select “Item” for “ Create a new

element at the top level, in Menu”, press [OK] button to confirm.

4. Set the Title as "Load", Icon as "@android:drawable/ic_menu_save", and Show as action as

"always".


4T025-1-A @ Peter Lo 2014 14

5. The XML code for the 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:showAsAction="always"

android:title="Load"

android:icon="@android:drawable/ic_menu_save"/>

</menu>

6. Select the "res/layout" folder, then right click and select New �� Android XML File.

7. Select “ProgressBar” and set the File as “progress”, then press [Finish] button.


4T025-1-A @ Peter Lo 2014 15

8. The XML code for the layout will look like: <?xml version="1.0" encoding="utf-8"?>

<ProgressBar xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent" >

</ProgressBar>

9. Modify the source code for the file "MainActivity.java" as follow. package com.example.myactionbar;






import android.os.AsyncTask;


private MenuItem menuItem;

@Override







// actionBar.hide();

// Define the Subtitle

actionBar.setSubtitle("Subtitle");

// Define the Title

actionBar.setTitle("Title");

// Customize the Display Option

actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_HOME


4T025-1-A @ Peter Lo 2014 16

| ActionBar.DISPLAY_SHOW_TITLE | ActionBar.DISPLAY_SHOW_CUSTOM);

// Show the Action Bar on layout

actionBar.show();

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.item1:

menuItem = item;

menuItem.setActionView(R.layout.progress);

menuItem.expandActionView();

LoadingTask task = new LoadingTask();

task.execute("Loading");

return true;

default:

return super.onOptionsItemSelected(item);

}

}

private class LoadingTask extends AsyncTask<String, Void, String> {

@Override

protected String doInBackground(String... params) {

// Simulate something long running

try {

Thread.sleep(2000);

} catch (InterruptedException e) {

e.printStackTrace();

}

return null;

}

@Override

protected void onPostExecute(String result) {

menuItem.collapseActionView();

menuItem.setActionView(null);

}


4T025-1-A @ Peter Lo 2014 17

};

@Override



getMenuInflater().inflate(R.menu.refreshmenu, menu);

// getMenuInflater().inflate(R.menu.main, menu);

return true;

}

}

10. Save and execute the app, what will happened if you press the save button?


4T025-1-A @ Peter Lo 2014 18

3. Contextual Menu

3.1 Context Menu 1. Create the Android application with the following attributes.

․ Application Name: MyContextMenu

․ Project Name: MyContextMenu

․ Package Name: com.example.mycontextmenu

2. Drag and drug the AnalogClock to the layout.

3. Select the "res/menu" folder, then right click and select New �� Android XML File.


4T025-1-A @ Peter Lo 2014 19

4. Set the File as “contextmenu” and press [Finish] button.

5. In order to create new context menu item, press the [Add] button. Then select “Item” in the

dialog, press [OK] button to confirm.

6. Set the “Title” to “Context Menu 1” and save the menu. Repeat the steps to create “Context

Menu 2”.


4T025-1-A @ Peter Lo 2014 20

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

8. Modify the source code for the file "MainActivity.java" as follow. package com.example.mycontextmenu;




import android.view.ContextMenu;

import android.view.ContextMenu.ContextMenuInfo;


import android.view.View;

import android.widget.AnalogClock;



@Override




// Register the content menu for the Image

AnalogClock analogClock1 = (AnalogClock) findViewById(R.id.analogClock1);

this.registerForContextMenu(analogClock1);

}

@Override

public void onCreateContextMenu(ContextMenu contextMenu, View view,

ContextMenuInfo menuInfo) {

// Inflate the context menu

super.onCreateContextMenu(contextMenu, view, menuInfo);

getMenuInflater().inflate(R.menu.contextmenu, contextMenu);

}


4T025-1-A @ Peter Lo 2014 21

public boolean onContextItemSelected (MenuItem item) {

switch(item.getItemId()) {

case R.id.item1:

Toast.makeText(this, "Context Item 1 selected",


return true;

case R.id.item2:

Toast.makeText(this, "Context Item 2 selected",


return true;

default:

return super.onContextItemSelected(item);

}

}

@Override




return true;

}

}

9. Execute the apps, long press the image to call up the content menu.


4T025-1-A @ Peter Lo 2014 22

4. Dialog

4.1 Alert Dialog 1. Create the Android application with the following attributes.

․ Application Name: MyAlertDialog

․ Project Name: MyAlertDialog

․ Package Name: com.example.myalertdialog

2. Modify source file "MainActivity.java" as follow: package com.example.myalertdialog;




import android.app.AlertDialog;

import android.content.DialogInterface;



@Override




// Creating alert Dialog

AlertDialog.Builder alertDialog = new

AlertDialog.Builder(MainActivity.this);

// Setting Dialog Title

alertDialog.setTitle("Android Course");

// Setting Dialog Message

alertDialog.setMessage("Are you ready to take the test?");

// Setting Icon to Dialog

alertDialog.setIcon(android.R.drawable.ic_dialog_info);

// Setting Positive "OK" Button


4T025-1-A @ Peter Lo 2014 23

alertDialog.setPositiveButton("OK",

new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int which) {

Toast.makeText(getApplicationContext(),

"[OK] button clicked", Toast.LENGTH_SHORT).show();

}

});

// Setting Negative "Cancel" Button

alertDialog.setNegativeButton("Cancel",




"[Cancel] button clicked", Toast.LENGTH_SHORT).show();

dialog.cancel();

}

});

// Setting Neural "Later" Button

alertDialog.setNeutralButton("Later",




"[Later] button clicked", Toast.LENGTH_SHORT).show();

}

});

// Showing Alert Dialog

alertDialog.show();

}

@Override




return true;

}

}


4T025-1-A @ Peter Lo 2014 24

3. Save and execute the app, press each button to check the response.

Documents

1. Option Menu · Android Apps Development for Mobile and Tablet Device (Level I) Lesson 4 4T025-1-A @ Peter Lo 2014 2 4. Set the “ Title ” to “ Menu Item 1 ” and save the