Adding Action items and Overflow menu items to Action Bar in Android

July 19, 2012
By

In this article we will create an application which will add action items and overflow menu items to action bar. This application is developed in Eclipse 3.7.2 and tested in Android api level 14. If you want to add actions items, overflow menu items  and action bar in pre Honeycomb (API level < 11 )  versions also, see the article “Adding menus to action bar in pre Honeycomb versions using Sherlock library” .


1. Create a new Android project namely “ActionBarMenu”

Create new Android Project

Figure 1 : Create new Android Project


2. Select Android build target

Select Android build Target

Figure 2 : Select Android build Target


3. Enter application details

Select Android build Target

Figure 3 : Select Android build Target


4. Download Images

From the given below links, download the files drawable-mdpi.zip, drawable-hdpi.zip and drawable-xhdpi.zip and extract to the folders drawable-mdpi, drawable-hdpi and drawable-xhdpi respectively


5. res/values/strings.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="hello">MainActivity</string>
    <string name="app_name">ActionBarMenu</string>

    <string name="phone">Phone</string>
    <string name="computer">Computer</string>
    <string name="gamepad">Gamepad</string>

    <string name="camera">Camera</string>
    <string name="video">Video</string>

    <string name="email">EMail</string>

</resources>


6. res/menu/items.xml


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/phone"
        android:title="@string/phone"
        android:icon="@drawable/phone"
        android:showAsAction="ifRoom|withText"
    />

    <item
        android:id="@+id/computer"
        android:title="@string/computer"
        android:icon="@drawable/computer"
        android:showAsAction="ifRoom|withText"
    />

    <item
        android:id="@+id/gamepad"
        android:title="@string/gamepad"
        android:icon="@drawable/gamepad"
        android:showAsAction="ifRoom|withText"
    />

    <item
        android:id="@+id/camera"
        android:title="@string/camera"
        android:icon="@drawable/camera"
        android:showAsAction="ifRoom|withText"
    />

    <item
        android:id="@+id/video"
        android:title="@string/video"
        android:icon="@drawable/video"
        android:showAsAction="ifRoom|withText"
    />

    <item
        android:id="@+id/email"
        android:title="@string/email"
        android:icon="@drawable/email"
        android:showAsAction="ifRoom|withText"
    />
</menu>


7. src/in/wptrafficanalyzer/actionbarmenu/MainActivity.java


package in.wptrafficanalyzer.actionbarmenu;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.items, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        super.onOptionsItemSelected(item);

        switch(item.getItemId()){
            case R.id.phone:
                Toast.makeText(getBaseContext(), "You selected Phone", Toast.LENGTH_SHORT).show();
                break;

            case R.id.computer:
                Toast.makeText(getBaseContext(), "You selected Computer", Toast.LENGTH_SHORT).show();
                break;

            case R.id.gamepad:
                Toast.makeText(getBaseContext(), "You selected Gamepad", Toast.LENGTH_SHORT).show();
                break;

            case R.id.camera:
                Toast.makeText(getBaseContext(), "You selected Camera", Toast.LENGTH_SHORT).show();
                break;

            case R.id.video:
                Toast.makeText(getBaseContext(), "You selected Video", Toast.LENGTH_SHORT).show();
                break;

            case R.id.email:
                Toast.makeText(getBaseContext(), "You selected EMail", Toast.LENGTH_SHORT).show();
                break;

        }
        return true;

    }
}


8. AndroidManifest.xml


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="in.wptrafficanalyzer.actionbarmenu"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="14" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:uiOptions="splitActionBarWhenNarrow"
        >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>


9. Application in Execution

Action bar with action items and overflow menu in Portrait mode

Figure 4 : Action bar with action items and overflow menu in Portrait mode

Action bar with action items and overflow menu in Landscape mode

Figure 5 : Action bar with action items and overflow menu in Landscape mode

Action items and Overflow menu in Split Action Bar

Figure 6 : Action items and Overflow menu in Split Action Bar

In order to split action bar, add the attribute android:uiOptions=”splitActionBarWhenNarrow” in application element or activity element of AndroidManifest.xml.


10. Download


11. Reference

http://developer.android.com/guide/index.html


How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



Tags: , , , , ,

12 Responses to Adding Action items and Overflow menu items to Action Bar in Android

  1. mohit on October 31, 2012 at 12:39 pm

    Hi,
    Tried ur code but not able to see the overflow menu.

    Any idea?

    • george on October 31, 2012 at 4:24 pm

      Hi,
      Ensure that the hardware property “Hardware Back/Home Keys” of your Android virtual device is set to “no”

  2. Kinjal Shah on November 8, 2012 at 2:00 pm

    Hi,

    I tried ur code but can’t get overflow menu in the screen..and i also add the “Hardware Back/Home Keys” to no of Android Virtual device..still can’t get..so plz suggest me..

  3. rahul on November 11, 2012 at 2:21 pm

    code works fine thanks……..

  4. pratap on December 14, 2012 at 7:35 pm

    Hi,

    Thanks for the tutorial and code.
    It is working good.

    I have implemented the Action items for Two static Fragments which are in Single Activity . At this time , the action menu items of First Fragment are working But , the Action menu items of second Fragment not working.

    Please help me on this issue. I searched in stackoverflow.com . but so far no solution found

    This is thecode. Iam working.

    dl.dropbox.com/u/83669745/ABSwithActions.rar

  5. Rohit Mishra on March 6, 2013 at 12:54 pm

    nice explanation for leaner…………..

  6. Amit Suri on March 19, 2013 at 12:16 pm

    Hi Expert,

    I am using this tutorial in my app, and much useful for me, but i am facing a small problem not getting Overflow Menu Item icon, i also asked at Stackoverflow but did not get anything useful

    But i believe that you can resolve my problem, please check this link: stackoverflow.com/questions/15492791/how-do-i-show-overflow-menu-items-to-action-bar-in-android

    and i also request you to make a tutorial for SlidingMenuItems to call activities…..

    Thanks in Advance

  7. Nandu on March 19, 2013 at 1:38 pm

    I have implemented above code in my app, such a great work done by you…

    A small question: How do i show icon with text in Overflow Menu Items: like here we are showing two Menu Items Video and EMail,i also want to show image with text, and you have already given images for that as well..

  8. Nasir Khan on April 8, 2014 at 1:15 pm

    Nice it works

  9. Girish Kumar on March 19, 2015 at 4:41 pm

    Hi,
    I have implemented a custom ActionProvider for a menu item.
    The problem I am facing is that whenever that menu item goes in overflow it shows a different layout than the one when it is not in overflow.

    Thanks

  10. msafa on September 2, 2015 at 3:10 am

    I casted an eye your site. This is awesome!
    you are a really professional and benevolent.
    Ty all shared documents.
    I will follow you.
    Gl.

  11. Dennis Slater on October 17, 2015 at 9:00 pm

    Thanks for the helpful tutorial. Worked fine.

Leave a Reply to Kinjal Shah Cancel reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner