Development and design

Integrate the action bar with ActionBarSherlock

By on Feb 17, 2013 in Android, Tutorial |

In my opinion, one of the major problem with android is the compatibility between the different version. We want to develop exclusively for Android 4.0+, but because there is a large proportions of 2.3+ on the market we can’t. Because of that we sometimes disregard the new functionnalities to only focus on doing unique and compatible version for all versions.

In this post, I will talk about the Action Bar, compatible for 3.0+ versions of Android. According to the android developers website, “the action bar is a window feature that identifies the application and user location, and provides user actions and navigation modes”. In clear, your application will incorpore much easy to use navigation tools for your user.

My Notebook whithout the Action Bar.

My Notebook whithout the Action Bar.

  • Here it’s the first version of My Notebook. The application doesn’t include an action bar: the search function is done by the search icon included with an image view on the upper side, and the add function with the menu.
My Notebook with the action bar.

My Notebook with the action bar.

  • Now in the new version, thanks to the action bar, only one menu is defined with the search and add function. It’s up to the ActionBarSherlock class to manage to show theme according to the avaible space.

 

What’s ActionBarSherlock?

ActionBarSherlock is a custom ActionBar, or an extension of the support library as defined, destined to facilitate the use of the action bar accross all versions of Android (2.0+ and more). This library will automatically use the native action bar when appropriate or will automatically wrap a custom implementation around your layouts. This allows you to easily develop an application with an action bar for every version of Android. As we’ll see, this library is easy to use, and is compatible for all major versions of Android. The original problem is now solved, with one library¬† the application will look the same on all Android version.

 

Implementing the ActionBarSherlock

I will now explain how to set up the ActionBarSherlock.

 

Download the jar and add it to Eclipse

Download the .zip at the official website http://actionbarsherlock.com/ and unzip it’s contents. There is three folders inside it: library, sample and website. Website contains the code of the project website, sample contains sample projects to demonstrate how to use it, and library contains our source code.

Once unzipped, go to Eclipse, use the import project wizard select Android and “Existing Android Code into Workspace”. Find your downloaded folder, and go select the library folder and be sure of checking the copy project into the workspace checkbox. Finish this process, and rename the new created project named library into another name (right click on it -> rename).

The final step before using ActionBarSherlock in your project is to set up your project to use it. Right click on your project go to the Android tab and click the add button. Select the newly imported project and set the tharget name to an Android 4.0+ version before closing the window. Ensure you have a green valid icon next to the library name by reopening again the window. If you have a red cross, ensure you have checked the previously cited checkbox.

Adding library screen.

Adding library screen.

Configuring your project

1. Update your manifest file

Add the Sherlock theme to your application manifest:

<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/Theme.Sherlock.Light" >
<!-- ... -->
</application>

 

2. Update your activities

The first thing you have to do is to replace the classes that your activities inherit. Activity becomes SherlockActivity, FragmentActivity becomes SherlockFragmentActivity and so on…

public class MainActivity extends Activity{
public class MainActivity extends SherlockActivity{

Then, you have to override the onCreateOptionsMenu() for this to work:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getSupportMenuInflater();
inflater.inflate(R.menu.main_item, menu);
return true;
}

If you already had a menu, check your imports to replace the android menu by the Sherlock menu, and replace getMenuInflater() by getSupportMenuInflater() :

import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuInflater;
import com.actionbarsherlock.view.MenuItem;

If you were using the context menu for listView, you have to keep using the android menu, for this you have to update your two methods :

@Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) {
super.onCreateContextMenu(menu, v, menuInfo);
android.view.MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main_liste_mot, menu);
}

@Override
public boolean onContextItemSelected(android.view.MenuItem item) {
/* ... */
}

 

3. ActionBar and items with XML

For adding items to your ActionBar, just use the defined XML file for the Activity in the onCreateOptionsMenu() earlier and add the following code :

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/menu_add"
android:icon="@drawable/ic_action_add"
android:showAsAction="ifRoom|withText"
android:title="@string/add"/>

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

<item
android:id="@+id/menu_settings"
android:icon="@android:drawable/ic_menu_preferences"
android:showAsAction="never"
android:title="@string/menu_settings"/>
</menu>

This will set up the menu items. The element android:showAsAction is used to show or hide the elements on the ActionBar.

Finally, you have to override onOptionsItemSelected() method to handle your items selection.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle item selection
switch (item.getItemId()) {
case R.id.menu_add:
//Place your menu action code here
return true;
case R.id.menu_search:
return true;
default:
return super.onOptionsItemSelected(item);
}
}

And now you have your ActionBar ready to use!