Action bar menus and SplitActionBar using ActionBarCompat library in Android

July 25, 2013
By

In the article titled “Adding Action items and Overflow menu items to Action Bar in Android“, we have seen how to add action items and split action bar items to action bar in Android.

Since action bar is introduced in Android 3.0 ( API Level 11 ) , we can not run that application in Android versions prior to Honeycomb.

In order to overcome this limitation, we can make use ActionBarCompat library available with Android support library revision 18. Using ActionBarCompat library we can implement action bars back upto Android API Level 7.

In this article, we will develop an Android application that contain action items and split action bar.

This application is developed in Eclipse 4.2.0 with ADT plugin 22.0.4.


1. Create new Android application

Application Name : ActionBarCompatMenu

Project Name : ActionBarCompatMenu

Package Name : in.wptrafficanalyzer.actionbarcompatmenu

Minimum Required SDK : API 8 : Android 2.2 ( Froyo )

Target SDK : API 17 : Android 4.2 ( Jelly Bean )


2. Setup ActionBarCompat library in Eclipse

Please refer the article titled “Android – Setting up ActionBarCompat support library in Eclipse


3. Add reference to ActionBarCompat support library

Link ActionBarCompat library to this project

Figure 1 : Link ActionBarCompat library to this project


4. Add menu icons to this project

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. Update the file res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">ActionBarCompatMenu</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</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. Update the menu file res/menu/main.xml

Note : Please see the namespace prefix “myapp” in the given below code

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:myapp="http://schemas.android.com/apk/res-auto" >

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

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

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

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

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

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

</menu>

7. Update the file res/layout/activity_main.xml


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/hello_world" />

</RelativeLayout>


8. Update the class MainActivity in the file src/in/wptrafficanalyzer/actionbarcompatmenu/MainActivity.java

package in.wptrafficanalyzer.actionbarcompatmenu;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity {

    @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) {

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

9. Update the file AndroidManifest.xml


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

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.AppCompat" >
        <activity
            android:name="in.wptrafficanalyzer.actionbarcompatmenu.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>


10. Screenshot of the application in execution

Showing Menus in ActionBar using ActionBarCompat library

Figure 2 : Showing Menus in ActionBar using ActionBarCompat library


11. Showing split action bar in Pre Android API Level 11 versions

If there is not enough room for action menus to align in action bar, then we can move the action menus to the bottom of the screen.

This is achieved by specifing uiOptions attribute for the activity in AndroidManifest.xml.

Please see the highlighted text, that splits the actionbar in the given below code.

The attribute “uiOptions” specified in the line 19 is understood only by API Level 14 or higher.

The meta-data element specified in the lines 24 and 25 is used for older versions.


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

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.AppCompat" >
        <activity
            android:name="in.wptrafficanalyzer.actionbarcompatmenu.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>
            <meta-data android:name="android.support.UI_OPTIONS"
                android:value="splitActionBarWhenNarrow" />
            </activity>
        </application>
</manifest>

12. Screenshot of the application with Split Action Bar

Showing Split Action Bar using ActionBarCompat support library

Figure 3 : Showing Split Action Bar using ActionBarCompat support library


13. Download Full Source Code


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: , , , ,

5 Responses to Action bar menus and SplitActionBar using ActionBarCompat library in Android

  1. el on August 2, 2013 at 6:58 am

    Thank you very much for this article!
    Been searching for days on showing menu items on action bar and not on overflow menu alone.

  2. everson on August 25, 2013 at 2:55 am

    Hi Mathew
    how put drawer menu and bottom menu in the same time ?
    I tried put your example with NavigationDrawerAppCompat(from support4 samples) and I called them inside onCreateOptionsMenu(Menu menu), but didn’t work…

  3. chandu on March 1, 2014 at 1:21 pm

    Hi

    for this same

    i want to implement actionbar with sliding menu using navigation

    can u please help me

  4. jas on March 31, 2014 at 12:02 pm

    How can i use custom icons and layout in action bar compat

  5. raj on March 13, 2015 at 11:42 am

    when i applied this code on my application the menu bar show on top not in bottom how to resolve it ..???

Leave a Reply to everson 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