Android Action Bar

A - Android Action Bar introduction

Android Action Bar provides a consistent navigation across your application that can adapt for different screen configurations.

As you can see, the above figure describe all the components of the Action Bar:

1. App icon
2. Action items
3. Action overflow

The Action Bar has the powerful capabilities like:

• Adapting to screen configurations (landscape & portrait)
• Prioritizing important actions
• Adding widgets to action bar (search, sharing etc.)
• Providing navigation between screens (drop-down & tabbed navigation) and much more...

In this post, I’ll show you how to set up, add and response to user actions in the Action Bar.

Next post is about customizing it!

B - Set up the Android Action Bar

The Action Bar is default supported for Android 3.0 (API level 11). If you want to use Action Bar in Android 2.1 and above, you must include the Android Support Library in your application.

1. Android 3.0 and above only

To add Action Bar to your app activities, open AndroidManifest file and update minSdkVersion attribute to 11:

<uses-sdk 
        android:minSdkVersion="11" 
        android:targetSdkVersion="18" />

Easy as pie!

2. Android 2.1 and above

To get started, please read this post to know how to setup Support Library (in this case, we need the  v7 appcompat library).

After setting up Support Library, do the following steps to add the v7 appcompat library:

• Select File --> Import
• Select Existing Android Code Into Workspace and click Next
• Browse to Android SDK folder and select v7 appcompat library project

• In the libs folder, add all jar files to Build Path:

• Right-click the library project folder and select Build Path > Configure Build Path and check like the following figure

After importing the library project, add the library project to your own project:

• Right-click your project and select Properties
• On the left side, select Android
• In the Library pane, click the Add button
• Select the library project and click OK

Once you had your project integrated with the library, update all the activities to extends ActionBarActivity:

public class MainActivity extends ActionBarActivity {

    ... 

}

In AndroidManifest file, update theme attribute for <application> and <activity> tags using one of them Theme.AppCompat themes:

<application 
    android:allowBackup="true" 
    android:icon="@drawable/ic_launcher" 
    android:label="@string/app_name" 
    android:theme="@style/Theme.AppCompat.Light" > 
    <activity 
        android:name="ice.tea09.demoactionbar.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>

Done setting up the Action Bar!

C - Adding Action Buttons

1. Declare Actions in XML file

Open main.xml file under res/menu directory. This file defines all the action buttons and other items available in the action overflow.

<menu xmlns:android="http://schemas.android.com/apk/res/android" > 

    <!-- Search, should appear as action button --> 
    <item android:id="@+id/action_search" 
          android:icon="@drawable/search" 
          android:title="@string/action_search" 
          android:showAsAction="ifRoom" /> 

     <!-- Settings, should always be in the overflow --> 
    <item 
        android:id="@+id/action_settings" 
        android:orderInCategory="100" 
        android:showAsAction="never" 
        android:title="@string/action_settings"/> 

</menu>

By default, all the action buttons appear in the overflow.

With the android:showAsAction=”ifRoom” attribute, the Search action will appear as an Action Button if there’re any available rooms.

For supporting Android 2.1 and above, the xml file has some minor differences:

<menu xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:ice.tea09.demoactionbar="http://schemas.android.com/apk/res-auto"> 

    <!-- Search, should appear as action button --> 
    <item android:id="@+id/action_search" 
          android:icon="@drawable/ic_action_search" 
          android:title="@string/action_search" 
         ice.tea09.demoactionbar:showAsAction="ifRoom" /> 

     <!-- Settings, should always be in the overflow --> 
    <item 
        android:id="@+id/action_settings" 
        android:orderInCategory="100" 
        android:title="@string/action_settings"/> 

</menu>

Note: ice.tea09.demoactionbar is your app package.

2. Add Actions to the Action Bar

In MainActivity, update the  onCreateOptionsMenu() method to call the desired xml file:

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

3. Handle user interactions to Action Buttons

To handle when user press any Action Buttons, we need to implement  onOptionsItemSelected() method:

@Override 
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle presses on the action bar items 
    switch (item.getItemId()) { 
        case R.id.action_search: 
            Toast.makeText(getApplicationContext(), "You hit the Search Action!", Toast.LENGTH_SHORT).show(); 
            return true; 
        case R.id.action_settings: 
            Toast.makeText(getApplicationContext(), "You hit the Settings Action!", Toast.LENGTH_SHORT).show(); 
            return true; 
        default: 
            return super.onOptionsItemSelected(item);
    } 
}

Result when you run the project:

Note: The left figure show result of devices that have MENU button, an the right one show the result of devices that don’t have MENU button. It’s the default setting of Google.

D - Add Up-button for low level activities

To perform an Up navigation, first of all, you have to declare the parent activity in AndroidManifest:

<activity 
     android:name="ice.tea09.demoandroidactionbar.ChildActivity" 
     android:label="@string/title_activity_child" > 

     <meta-data 
            android:name="android.support.PARENT_ACTIVITY" 
            android:value="ice.tea09.demoandroidactionbar.MainActivity" /> 

</activity>

Then enable the app icon as the Up button by calling setDisplayHomeAsUpEnabled():

@Override 
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_child); 

    getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
    // If your minSdkVersion is 11 or higher, instead use: 
    // getActionBar().setDisplayHomeAsUpEnabled(true); 
}

Result when enable Up navigation:

E - Download demo source code

https://drive.google.com/file/d/0Bw3dwdSezn6fdWNhVm9hdlp5MDQ/edit?usp=sharing

So, that’s all about this post. As I mentioned before, the next post about Action Bar will show you how to customize it!