Android ActionBar Example Tutorial

Today we will look into Android ActionBar. Action Bar is one of the important part of any application, whether it’s a web application or a mobile app. Today we will learn how to implement an action bar in android apps using ActionBar component.

Table of Contents

• 1 Android ActionBar
  • 1.1 Android ActionBar Setting Up
  • 1.2 Android ActionBar Menu
  • 1.3 Inflating the Menu Into the Android ActionBar
  • 1.4 Responding to Android Action Bar Events
  • 1.5 Project Structure
  • 1.6 Android ActionBar Example Code
  • 1.7 Android Action Bar Backporting

Android ActionBar

Android ActionBar is a menu bar that runs across the top of the activity screen in android. Android ActionBar can contain menu items that become visible when the user clicks the “menu” button.

In general an ActionBar consists of the following four components:

• App Icon: App branding logo or icon will be displayed here
• View Control: A dedicated space to display the Application title. Also provides an option to switch between views by adding spinner or tabbed navigation
• Action Buttons: Some important actions of the app can be added here
• Action Overflow: All unimportant action will be shown as a menu

Android ActionBar Setting Up

All activities that use the theme Theme.Holo or a theme derived from Theme. Holo will automatically contain an ActionBar.

Android ActionBar Menu

The simplest way to get toolbar icons and action overflow items into the action bar is by creating a menu XML resource file found in the res/menu folder. We can add menu items in the raw XML file present in the folder as follows:

menu_main.xml

<menu xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools" tools:context=".MainActivity">
    
    <item
        android:id="@+id/add" android:icon="@android:drawable/ic_menu_add" app:showAsAction="always"   android:title="@string/add"/>
    <item
        android:id="@+id/reset" android:icon="@android:drawable/ic_menu_revert" app:showAsAction="always|withText" android:title="@string/reset"/>
    <item
        android:id="@+id/about" android:icon="@android:drawable/ic_dialog_info" app:showAsAction="never" android:title="@string/about">
    </item>
    <item
        android:id="@+id/exit"  app:showAsAction="never" android:title="@string/exit">
    </item>
</menu>

There are four things that are needed to be configured for every menu item.

1. android:id: attribute specifies the id of the menu item. This works like ids anywhere else in the Android app. An android:id value starting with a @+id/ will create a constant in the R.menu constant collection
2. android:title: attribute value contains the title of the menu item
3. android:icon: attribute references an icon in the drawable directories
4. android: shows action: This attribute indicates how the given item should be portrayed in the action bar.
   We can choose from any of the flags mentioned below:
   • always keep it in the ActionBar at all times
   • room to keep it only if space is available
   • never this means that the menu item will not be placed in the ActionBar as an icon. It will only be visible when the menu button is clicked, in the menu that’s popping up
   • |withText: we can append this to either always or ifRoom, to indicate that the toolbar button to be both the icon and the title, not just the icon

Note that always is not guaranteed to be a toolbar button – if you ask for 100 always items, you will not have room for all of them. However, always items get priority for space in the action bar over ifRoom items.

Inflating the Menu Into the Android ActionBar

In order for the menu items defined in the menu XML file to be displayed, you need to inflate the menu file. We do so inside the onCreateOptionsMenu() method of the activity where we wish to add the ActionBar. Here is the code snippet:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

The R.menu.menu_main parameter is the constant referring to the menu XML file. The menu parameter is the menu in which we want to inflate the menu items.

Responding to Android Action Bar Events

To find out when the user taps on one of these things, we’ll need to override onOptionsItemSelected() from the MainActivity as shown below:

@Override
public boolean onOptionsItemSelected(MenuItem item) { switch(item.getItemId()) {
    case R.id.add:
        //add the function to perform here
        return(true);
    case R.id.reset:
        //add the function to perform here
        return(true);
    case R.id.about:
        //add the function to perform here
        return(true);
    case R.id.exit:
        //add the function to perform here
        return(true);
}
    return(super.onOptionsItemSelected(item));
}

Now let’s assign some basic functions to each menu items in our project.

Project Structure

Android ActionBar Example Code

We’ve implemented the four menu items in the MainActivity as shown in the snippet below:

MainActivity.java

package com.journaldev.actionbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) { switch(item.getItemId()) {
        case R.id.add:
            count=(TextView)findViewById(R.id.textView);
            count.setText("Add is clicked");
            return(true);
        case R.id.reset:
            count=(TextView)findViewById(R.id.textView);
            count.setText("Nothing is selected");
            return(true);
        case R.id.about:
            Toast.makeText(this, R.string.about_toast, Toast.LENGTH_LONG).show();
            return(true);
        case R.id.exit:
            finish();
            return(true);

    }
        return(super.onOptionsItemSelected(item));
    }
}

The items are assigned their respective functions. The item selected is determined from its id that was defined in the menu_main.xml file.

Here we just change the TextView contents in the first two items, display a toast in the third and exit the application in the fourth item.

Note that the AppCompatActivity is a replacement for the deprecated version of ActionBarActivity.

The styles.xml file is defined as follows:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>

</resources>

As you can see the parent theme uses a derivative of Theme.AppCompat which holds an ActionBar by default(unless you use Theme.AppCompat.Light.NoActionBar class). Hence there is no need to define it explicitly here.

Android Action Bar Backporting

1. Since ActionBar was introduced after Android Honeycomb 3.0, to implement ActionBar when minSdkVersion is 11 or less we need to import the app-compat-v7 jar into our gradle as we have done here to enable backward compatibility
2. Another way is to import and extend the MainActivity with ActionBarSherlock independent of the action bar backport, since this class was introduced after Android 3.0

The below image shows the output produced by our project, you can see that the ActionBar includes the predefined icons. The textview updates the content since the add icon was clicked. The textview reverts the content to the original since reset was clicked. When about is clicked, toast notification appears as shown below.