• 0

Category : Uncategorized

Android Menu Example

Posted by: Thodoris Bais in Menu July 29th, 2014

Today we ‘re gonna see how to create a Menu with icon items, which on click, fire a respective to them message. What differentiates this article from other similars, is that we ‘re using the latest Android APIs, where Menus are manipulated differently.

Having created an Android project, using the latest platform, gives us by default a menu layout, as we can see:

Figure 1. Default menu layout of an Android application

Figure 1. Default menu layout of an Android application
Want to create a kick-ass Android App?
Subscribe to our newsletter and download the Android UI Design mini-book right now!
With this book, you will delve into the fundamentals of Android UI design. You will understand user input, views and layouts, as well as adapters and fragments. Furthermore, you will learn how to add multimedia to an app and also leverage themes and styles!

Email address:
1. Introduction

For those who are more curious about what this contains, have a look at the menu.xml:

main.xml
01
<menu xmlns:android=”http://schemas.android.com/apk/res/android”
02
xmlns:app=”http://schemas.android.com/apk/res-auto”
03
xmlns:tools=”http://schemas.android.com/tools”
04
tools:context=”com.javacodegeeks.android.menu.MainActivity” >
05

06
<item
07
android:id=”@+id/action_settings”
08
android:orderInCategory=”100″
09
android:title=”@string/action_settings”
10
app:showAsAction=”never”/>
11

12
</menu>

Let’s pretend that we don’t really know anything about menus, so when running the app on our emulator, if we press the hardware “Menu” button, we should get something like this:
Figure 2. Initial state of an Android menu

Figure 2. Initial state of an Android menu

That is, a menu tag defines a menu, while an item tag defines different menu ite elements (i.e “Help”, “About”, etc.).

Creating a custom menu in Android is very easy, so, don’t be afraid of the default code that we are provided from Eclipse. Regarding an item, we actually need to define 3 properties:

An id, which is useful to handle the action that we want our menu option to implement, when clicked. This can be done through a Java class.
An icon, which has to lie under the drawable (we also have to take care about dimensions, as it is a serious objective in Android; for more details, you can refer here).
A title, which is the displayed text in our menu item; this is about the title attribute we already know: it can be manipulated with both the “hardcoded” way (as we ‘ll show in this example) and through the stored strings of our app.

Following the fore-mentioned guidelines, we have everything we need, in order to create a menu whom’s items have icons attached on them. Well, not exactly, please take a look here. That is, the above guidelines support our development if only our application targets Android 2.3 or lower.

But here, we deal with the latest Android API (that’s why we ‘re getting by default the marked lines in main.xml; please consider the following article, too) and what does this mean, is that the dashed line in the right of our ActionBar represents the latest functionality of a menu; so, on click, its reaction is same as by pressing the hardware “Menu” button.

So, before jumping to the full example, here is the list of tools that we ‘ll use:

For the need of this example, we will use the following tools in a Windows 64-bit platform:

JDK 1.7
Eclipse 4.4 Luna
Android SDK 4.4

Tip
You may skip project creation and jump directly to the beginning of the example below.
2. Creating a New Android Application Project

Open Eclipse IDE and go to File → New → Project → Android Application Project.

Fill in the name of the application, the project and the package in the appropriate fields and then click Next.
Figure 2. Create a new Android application

Figure 2. Create a new Android application

In the next window, the “Create Activity” option should be checked. The new created activity will be the main activity of your project. Then press Next button.
Figure 3. Configure the project

Figure 3. Configure the project

In “Configure Launcher Icon” window you should choose the icon you want to have in your app. We will use the default icon of android, so click Next button.
Figure 4. Configure the launcher icon

Figure 4. Configure the launcher icon

Select the “Blank Activity” option and press Next.
Figure 5. Create the activity and select its type

Figure 5. Create the activity and select its type

You then have to specify a name for the new Activity and a name for the layout description of your app. The .xml files for the layout will automatically be created in the res/layout folder. Finally, press Finish.
Figure 6. Create a new blank activity

Figure 6. Create a new blank activity

Here is the very final structure of the project, just in case you ‘ll miss something, while developing:
Figure 7. The final structure of the project

Figure 7. The final structure of the project
3. Creating the layout of our Menu

As we deal with menus in this example, I ‘ll just leave the default TextView provided/generated by the IDE, as is.

Let’s do it by opening res/menu/main.xml and navigating to the respective xml tab and paste the following.

main.xml
01
<menu xmlns:android=”http://schemas.android.com/apk/res/android”
02
xmlns:app=”http://schemas.android.com/apk/res-auto”
03
xmlns:tools=”http://schemas.android.com/tools”
04
tools:context=”com.javacodegeeks.android.menu.MainActivity”
05
xmlns:custom=”http://schemas.android.com/apk/res-auto”>
06

07
<item android:id=”@+id/about”
08
android:icon=”@drawable/about_icon”
09
android:title=”About”
10
app:showAsAction=”always”/>
11

12
<item android:id=”@+id/help”
13
android:icon=”@drawable/help_icon”
14
android:title=”Help”
15
app:showAsAction=”always”/>
16

17
</menu>

That is, we want both of our menu items to be displayed as icons in the action bar, so we have to configure our menu, by considering the highlighted lines.

At this point, a possible question could be relative to the source of our test icons and the quick adjustment of them in our project. To get things easier, I’m always using this site, when I have to find an icon/image for an application that I’m developing; every resource there is completely free and you have the right to use it wherever you want.

We also have to provide ids to our menu items, in order to make them accesible through a Java class; i.e. we want to show a Toast, each time the user interacts with one of them.
4. Coding the Main Activity

Let’s first navigate to src/com.javacodegeeks.android.menuapp/MainActivity.java. Next, complete the class like this:

MainActivity.java
01
package com.javacodegeeks.android.menuapp;
02

03
import android.os.Bundle;
04
import android.support.v7.app.ActionBarActivity;
05
import android.view.Menu;
06
import android.view.MenuItem;
07
import android.widget.Toast;
08

09
public class MainActivity extends ActionBarActivity {
10

11
@Override
12
protected void onCreate(Bundle savedInstanceState) {
13
super.onCreate(savedInstanceState);
14
setContentView(R.layout.activity_main);
15
}
16

17
@Override
18
public boolean onCreateOptionsMenu(Menu menu) {
19
// Inflate the menu; this adds items to the action bar if it is present.
20
getMenuInflater().inflate(R.menu.main, menu);
21

22
return true;
23
}
24

25
@Override
26
public boolean onOptionsItemSelected(MenuItem item) {
27
// Handle action bar item clicks here. The action bar will
28
// automatically handle clicks on the Home/Up button, so long
29
// as you specify a parent activity in AndroidManifest.xml.
30
int id = item.getItemId();
31
switch (id) {
32
case R.id.about:
33
Toast.makeText(getApplicationContext(), “About menu item pressed”, Toast.LENGTH_SHORT).show();
34
break;
35
case R.id.help:
36
Toast.makeText(getApplicationContext(), “Help menu item pressed”, Toast.LENGTH_SHORT).show();
37
break;
38
}
39
return super.onOptionsItemSelected(item);
40
}
41
}

Here, an ActionBar element exists, so, line’s 20 execution will add the menu.xml items to our action bar.

Having set our initial view of our app, we then have to set a listener, in order to make our app interactive in each menu’s item tap – a simple message, relative to the item clicked. This can be done by overriding the existing onOptionsItemSelected method (you can find more details about the realtionship of it with a Menu, in the “Handling click events” section of the official documentation).
5. Running the application
Figure 8. Initial state of the app

Figure 8. Initial state of the app

Let’s first tap the blue button and then the red one!
Figure 9. Tapping the blue icon

Figure 9. Tapping the blue icon
Figure 10. Tapping the red icon

Figure 10. Tapping the red icon


Leave a Reply