Action bar menus and SplitActionBar using ActionBarCompat library in Android

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

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

Figure 3 : Showing Split Action Bar using ActionBarCompat support library

13. Download Full Source Code

Action bar menus and SplitActionBar using ActionBarCompat library in Android 589.85 KB

Download Full Source Code

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

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