Appcelerator Blog

The Leading Resource for All Things Mobile

Using Android’s ActionBar

9 Flares 9 Flares ×

One of the main differences between iOS and Android devices is that Android devices have two very important hardware buttons: Back and Menu. The existence of these buttons provide a very different App navigation paradigm. For one, as opposed to iOS, your screens do not need to have a “software back button”. The Android user will automatically use the hardware button because that’s what it is for. Second, iOS Apps have a Navigation Bar where you can add actions to be executed in the context of the current Window. You can do the same thing on Android, but for that, Android has an actual menu button as part of the hardware, and again, the user will use it to find more options.

Enter the ActionBar

If you want your Android app to look, feel and behave modern, you must use the ActionBar. Everyone’s using it, including some big players (see below). Your Android users already know how to use it, so if your app uses it, it will be a natural adoption. In addition to using native controls, you’re also letting the operating system take care of scaling issues across form factors and resolutions.

For the benefit of those who have had little exposure to Android, the following screens will help you understand how the ActionBar behaves in situation with and without a hardware menu button.

Your Titanium app can also leverage this native control! The ActionBar attaches itself to the Android activity, which is your window. However, it is not available until the Window is actually loaded, so all setup needs to take place in the Window “Open” event.

I have built a small app, an ActionBar KitchenSink of sorts, where I demonstrate how to use it. The project contains a CommonJS class called ‘actionbarhelper.js’ that makes it super easy to use. This sample app is using Alloy, but the helper class receives a pointer to you window, so it’ll work with Titanium Classic as well. Here’s a a snippet of setting the ActionBar title and an action for the ActionBar’s Up button.

var ABH,actionBarHelper;

function doopen(e){
    // we set the library only when the activity is available
    ABH=require('actionbarhelper').actionBarHelper;
    actionBarHelper=new ABH($.index);
    actionBarHelper.reloadMenu();
    actionBarHelper.setTitle('This is the title');
    actionBarHelper.setUpAction(function(){
        alert('You clicked');
    })
}

Some additional notes

  1. As explained in this post, the ActionBar works only on Android 3.0 and up, which is API LEVEL 11. Titanium defaults to API LEVEL 8 so you’ll need to make some changes to the tiapp.xml file in order to compile your app with the necessary Google API features.
  2. You’ll need to launch all your windows as Heavyweight windows, that is with navBarHidden=false. This way your Android windows will launch as a new activity. Don’t be scared of using Heavyweight windows. Lightweight windows are going away soon so better get used to them.
  3. Lastly, and this is if you’re new to Android development with Titanium, make sure you add “exitOnClose=true” to your app’s main Window, otherwise when you press back on your main window you’ll be taken to the splash screen instead of closing your app.

That’s it for now. Make sure you submit your awesome Android apps to your App Showcase.

9 Flares Twitter 0 Facebook 0 Google+ 3 LinkedIn 6 Email -- 9 Flares ×

6 Comments

  1. Foo

    In 3.1.2 the Action Bar does not seem to show unless fullscreen=”true” is set in the tag.

  2. Paco Artal
    • Greg DiPaolo

      Hey @Paco give it a try now.

      • Paco Artal

        Thank you!

Comments are closed.

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
9 Flares Twitter 0 Facebook 0 Google+ 3 LinkedIn 6 Email -- 9 Flares ×