Add ActionBar to Android 2.x (v7 appcompat library)

android-actionbar-resultThe ActionBar APIs is available for Android 3.0 (API level 11) by default. For Android 2.1 (API level 7) and above they are available in the Support Library. Here we show how to use the support library’s to bring action bar to older version of android. Again if your app supports only Android 3.0 or higher, you should use the ActionBar APIs in the framework.

Objectives:

  • How to add actionbar to older version of android such 2.3.x?
  • How to add the needed Support Library?
  • How to add actions items to actionbar?

Environment & Tools:

  • Android Developer Tools (ADT) (or Eclipse + ADT plugin)
  • AVD Nexus S Android 2.3 “emulator” or,
  • Samsung Galaxy SII Android 2.3.3 “physical device”
  • Min SDK 8

Libraries:

( 1 ) Create a New Android Project

  • File >> New >> Android Application
  • Enter App name: android-actionbar-for-2.x.x
  • Pakcage: com.hmkcode.android
  • Keep other defualt selections, go Next  till you reach Finish
  • Add three menu items to res/menu/main.xml

Icons used in this sample can be found in GitHub or Download the Action Bar Icon Pack.

  • res/menu/main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:icon="@drawable/ic_action_search"
        android:title="Search"/>
    <item
        android:id="@+id/action_copy"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:icon="@drawable/ic_content_copy"
        android:title="Copy"/>
    <item
        android:id="@+id/action_share"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:icon="@drawable/ic_social_share"
        android:title="Share"/>
</menu>

When running on android 2.3.3, menu items are displayed in the “old” menu when clicking on menu button.

android-before-actionbar-menu

( 2 ) Download Library Setup

Steps taken from Android Developer website

  1. Start the Android SDK Manager.
  2. Scroll down to Extras folder.
  3. Select the Android Support Library item.
  4. Click the Install packages… button.

sdk-manager-support-libs

The downloaded Support Library files are located in the following subdirectory of your SDK: <sdk>/extras/android/support/ directory.

( 3 ) Import the Library Setup to the Workspace

  • Go to ADT IDE
  • Select File >> Import…  >> Android (folder)  >> Existing Android Code Into Workspace

android-import-support-library

  • Browse to your sdk directory <sdk>/extras/android/support/v7/appcompat/
  • Click Finish

android-import-support-library-appcompat-v7

  • android-suuport-7v-appcompat will be imported to the workspace and displayed in the Package Explorer.

( 4 ) Add Support Library to the Application

  • Go to ADT
  • Right-click on the application “android-actionbar-for-2.x.x” >> properties...
  • Select Android from the left menu
  • Under Library section Click Add… button
  • Select android-support-v7-appcompat
  • Click OK

android-add-library-appcompat-v7

( 5 ) Extend ActionBarActivity “Not Activity”

Our activity class should now extends android.support.v7.app.ActionBarActivity

  • src/com/hmkcode/android/MainActivity.java
package com.hmkcode.android;

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

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

}

( 6 ) Add Appcompat Theme to AndroidManifest.xml file

Add android:theme=”@style/Theme.AppCompat.Light” to the activity that will show the action bar

  • /AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.hmkcode.android"
    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/AppTheme" >
        <activity
            android:name="com.hmkcode.android.MainActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.AppCompat.Light" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

( 7 ) Use Custom Namespace for showAsAction Attribute

<menu xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:hmkcode="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        hmkcode:showAsAction="always"
        android:icon="@drawable/ic_action_search"
        android:title="Search"/>
    <item
        android:id="@+id/action_copy"
        android:orderInCategory="100"
        hmkcode:showAsAction="always"
        android:icon="@drawable/ic_content_copy"
        android:title="Copy"/>
    <item
        android:id="@+id/action_share"
        android:orderInCategory="100"
        hmkcode:showAsAction="always"
        android:icon="@drawable/ic_social_share"
        android:title="Share"/>
</menu>

Using XML attributes from the support library

Notice that the showAsAction attribute above uses a custom namespace defined in the <menu> tag. This is necessary when using any XML attributes defined by the support library, because these attributes do not exist in the Android framework on older devices. So you must use your own namespace as a prefix for all attributes defined by the support library.

Run it

Source Code @ GitHub

One thought on “Add ActionBar to Android 2.x (v7 appcompat library)

  1. Pnkkito

    Hey . great tutorial. i have a cuestion. How can i have the action bar like you did it and the button default style when click in the menu button ?.

Comments are closed.