Theateraddition

MenuMigrating to ActionBarSherlock

Today I want to discuss the possibility to migrate an existing Android app to use ActionBarSherlock. Depending on the complexity of the App this can be pretty easy. In the course of a redesign of my Android app PokerClock i decided to add ActionBarSherlock functionality to it. There are some points which will lead you through this little chapter of Android development:

  1. Why should I use ActionBar?
  2. What do I need?
  3. How to apply the ActionBar to my App?
  4. Tips, Tricks and Pitfalls
  5. Why ActionBarSherlock?
  6. Results

Read on to discover the process of migration from an old fashioned app to a ActionBar powered modern app.

Why should I use ActionBar?

The ActionBar pattern is a very useful pattern which enhances usability of Android a lot! At first it makes all apps following this pattern less complicated to handle because the usability patterns repeat thus making it easyer to learn the usability of new apps. Secondly ActionBar is the way to go when using Android devices running Honeycomb or later Android versions. Last but not least I think the usability of this pattern is really good. It puts the controls where they are easily visible and reachable.

Depending on your app the pattern may additionally yield some more bonus-features like an intuitive way to navigate the Tasks and Activities in your app.

What do I need?

At first you need the ActionBarSherlock library project. It can be downloaded from the ActionBarSherlock website which also describes how to use the Library.

 

Download ActionBarSherlock

 

This is pretty much all you need to perform the steps involved for migration. Just download the project, extract it somewhere and you're good to go.

How to apply the ActionBar to my App?

First step is getting the ActionBarSherlock to work in Eclipse. With older versions of ADT this can be really tricky! But with a decent version (which has library support) it's usually no Problem. Just create an "Android Project from Existing Code" and select the main folder from the previously extracted project files as "Root Directory". Eclipse should now find the existing Projects and list them in the Dialog. Just select the "library" project from this dialog and hit the "Next >" button if you want to specify another name for the LibraryProject. Otherwhise hit the "Finish" button to complete the setup.

Next you should add the Library project to your app's project. This can be done by right-clicking your app's project and selecting "Properties". Then adding the Library under the "Android" section. Be sure to also make your "Project Build Target" at least API 14. You may set your minimum Target SDK to a lower version. I believe the least minimum SDK level is level 7 (2.1). Check out the screenshots below to see how to add the library to your Project:

04-project-library.png04-project-library.png 04-project-library.png CloseDownload 03-project-library.png03-project-library.png 03-project-library.png CloseDownload 02-project-version.png02-project-version.png 02-project-version.png CloseDownload

From here the most ugly part is done. If your app doesn't use an own theme and also didn't use the native ActionBar before youre almost done!

The next Step is to set up the Theme your Application should use. The Theme must be one of Theme.SherlockTheme.Sherlock.Light, or Theme.Sherlock.Light.DarkActionBar. Another way is to use your own Theme and set one of the mentioned themes as parent. In the last case this is all you need to make the ActionBar work. For the first case you should set one of the mentioned themes in your AndroidManifest file's "Theme" attribute. This is sufficient to force the theme on all Activities that don't use a specific theme.

Tips, Tricks and Pitfalls

To get more out of the ActionBar pattern with minimal effort you can easily add Buttons to the Bar by modifying your menu xml files. You might check the attribute android:showAsAction which makes option icons appear as own actions in the ActionBar.

To extend your app with navigational functions or other stuff you should visit the ActionBarSherlock website which features descriptions of the API you have to use. For today's context this would be too much to explain here. ActionBarSherlock allows you to use all features of the native ActionBar and you don't need to abandon any planned features which are supported by the native ActionBar. You may read the usage page of the ActionBarSherlock website:

ActionBarSherlock usage

If you want to theme your ActionBar it's pretty easy to create an own Theme and overwrite some of the ActionBar properties to change the whole appearance. Check out the Theming page from ActionBarSherlock website:

Theming ActionBarSherlock

Why ActionBarSherlock?

Surely you could port your app to api-level 14 or later to implement the native ActionBar. The bad thing about it is that you would loose your backwards-compatibility unless you maintain at least two projects for your app.

Here are the reasons for ActionBarSherlock in a nutshell:

  • Easy integration
  • Easy portability of existing apps
  • Backwards-compatibility back to API level 7 (Android 2.1)
  • Easy custom theming
  • Usage of all native ActionBar features

This makes ActionBarSherlock a very powerfull library which not only makes it easy to port your app to ActionBar but also makes it possible to enjoy the ActionBar pattern on older Android versions without deprivations.

Results

Please note that the PokerClock app is a small app which does not feature many Activities or Tasks. Still it shows that the ActionBar pattern improves visual and usability quality a lot. Pictures speak louder than words thus check out the comparision-shots shown below:

Clock screenClock screen Clock screen CloseDownload Clock screenClock screen Clock screen CloseDownload

List of roundsList of rounds List of rounds CloseDownload List of roundsList of rounds List of rounds CloseDownload

Please keep in mind, that I introduced the ActionBar pattern in this project due to a planned redesign of the app. The redesign added a lot to the look and feel of the app. But the ActionBar pattern removed the need of the menu-button and allowed to restructure the options to make them accessible fast and easy. Additionally it gave the app a nice optical finish.