Adding menus to action bar in pre Honeycomb versions using Sherlock library

July 29, 2012
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 overflow menu 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 Action bar Sherlock library which facilitates to create action bar in pre Honeycomb versions ( 2.x versions ) .

The application in this article is developed in Eclipse ( 3.7.2 ) with ADT plugin ( 20.0.2 ),  Android SDK ( R20.0.1 ) and Action bar Sherlock library ( 4.1.0 )


1. Setup Action bar Sherlock library in Eclipse IDE

To setup Action bar Sherlock library in Eclipse IDE, refer the article “Setting up Sherlock library for action bar in pre Honeycomb Android Applications“.


2. Create new Android Application project namely “ActionBarSherlockMenu”

Create new Android Application Project

Figure 1 : Create new Android Application Project


3. Design application launcher

Design Application Launcher

Figure 2 : Design Application Launcher


4. Create a Blank Activity

Create a blank Activity

Figure 3 : Create a blank Activity


5. Enter MainActivity Details

Enter Main Activity Details

Figure 4 : Enter Main Activity Details


6. Delete default Support library

By default, ADT plugin adds a support library ( lib/android-support-v4.jar ) to the project. This is not needed for our application since this is being added by Sherlock library. So in order to avoid the conflict, delete the default support library via Eclipse’s project explorer.


7. Add Sherlock library to this project

Open the properties window of this project ( by right clicking the application at project explorer ) , and select Android tab to add the Sherlock library to this project.

Add Sherlock actionbar library

Figure 5 : Add Sherlock actionbar library


8. 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


9. Update res/values/strings.xml


<resources>

    <string name="app_name">ActionBarSherlockMenu</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">MainActivity</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>


10. Update the menu file res/menu/activity_main.xml


<menu xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/Theme.Sherlock"
    >
    <item
        android:id="@+id/phone"
        android:title="@string/phone"
        android:icon="@drawable/phone"
        android:showAsAction="ifRoom|withText"
        style="@style/Theme.Sherlock"
    />

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

    <item
        android:id="@+id/gamepad"
        android:title="@string/gamepad"
        android:icon="@drawable/gamepad"
        android:showAsAction="ifRoom|withText"
        style="@style/Theme.Sherlock"

    />

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


11. Update the file src/in/wptrafficanalyzer/actionbarsherlockmenu/MainActivity.java


package in.wptrafficanalyzer.actionbarsherlockmenu;

import android.os.Bundle;
import android.widget.Toast;

import com.actionbarsherlock.app.SherlockActivity;
import com.actionbarsherlock.view.MenuItem;

public class MainActivity extends SherlockActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(com.actionbarsherlock.view.Menu menu) {
        getSupportMenuInflater().inflate(R.menu.activity_main, 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;
    }
}


12. Update AndroidManifest.xml


<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="in.wptrafficanalyzer.actionbarsherlockmenu"
    android:versionCode="1"
    android:versionName="1.0" >

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

        <application
            android:icon="@drawable/ic_launcher"
            android:label="@string/app_name"
            android:theme="@style/AppTheme" >

            <activity
                android:name=".MainActivity"
                android:label="@string/title_activity_main"
                android:theme="@style/Theme.Sherlock.ForceOverflow"
                android:uiOptions="splitActionBarWhenNarrow"
            >
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
    </application>
</manifest>

13. Application in Execution

Action items and Overflow menu items

Figure 6 : Action items and Overflow menu items

MainActivity with Split action bar

Figure 7 : MainActivity Screen with Split action bar


14. Download


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

8 Responses to Adding menus to action bar in pre Honeycomb versions using Sherlock library

  1. Randy on September 11, 2012 at 8:03 pm

    hi there, i’ve followed your tutorial, but i can’t get the same result as your screenshot. ( in my device, the three dots is missing)

    how to solve that? thanks

    eclipse 3.7, jdk 1.7, android 4.1, emulator 4.1

    • Harshal Chaudhari on October 10, 2012 at 1:34 pm

      same issue here.. the three dots menu missing.

  2. Panji on October 14, 2012 at 9:42 am

    I got error
    error: Error: No resource found that matches the given name (at ‘theme’ with value ‘@style/
    Theme.Sherlock.ForceOverflow’).

    :(

  3. mp23 on October 31, 2012 at 3:43 am

    change this line

    >> android:theme=”@style/Theme.Sherlock.ForceOverflow”

    to this

    >> android:theme=”@style/Theme.Sherlock”

    ForceOverflow is dicontinued beacuse it was causing some problems

    • george on October 31, 2012 at 6:55 pm

      Thanks for reporting this.

      The theme “Theme.Sherlock.ForceOverflow” is removed in Action Bar Sherlock library 4.2.0.

      Please see the link given below for the reference .

      https://github.com/JakeWharton/ActionBarSherlock/blob/master/CHANGELOG.md#readme

    • Dev on November 20, 2012 at 10:22 pm

      but if i replace android:theme=”@style/Theme.Sherlock.ForceOverflow” line by android:theme=”@style/Theme.Sherlock”, how would i get the output in “Action items and Overflow menu items” (Fig 6) screen?? plz help

  4. chkalog on November 9, 2012 at 9:02 pm

    I followed your instructions, although the 3 items appear on the bottom of my app.Unless i turn my mobile and they fit on the top..
    How do i remove the default item?

  5. Tebogo on March 27, 2013 at 3:00 am

    I get the following error in MainActivity

    — activity_main cannot be resolved or is not a field
    — menu cannot be resolved or is not a field

    and in activity_main
    — error: Error: No resource found that matches the given name (at ‘style’ with value ‘@style/Theme.Sherlock’).

Leave a Reply

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

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner