Learn the Android action bar by implementing six easy examples. If you are making a new Android app, you should see the action bar as one of the most important design elements that you can implement in your app. It’s important to maintain a consistent navigation across the application. Here in this tutorial, we will see some functionality of the action bar.

What is an Action Bar?

The action bar mainly consists of the following four functional areas:

  1. App Icon –  The logo of the application.
  2. View Control – It’s the space to display the application title. It also provides the option to switch between views by adding a spinner or tabbed navigation.
  3. Action Buttons – Some important actions of the app can be added here. For example, the refresh, help, and/or search buttons.
  4. Action Overflow – All unimportant actions will be shown as a menu which is known as the Action Overflow.

The Android Action Bar Example

The following things will be covered in this tutorial:

  1. Changing the Application Icon.
  2. Changing the Color of the Action Bar.
  3. Adding the Action Buttons.
  4. A back navigation from the Action Bar.
  5. Adding a Spinner Drop-down Navigation.
  6. Hiding and showing the Action Bar in an Activity.

Here in this tutorial, we will make six simple examples. If we combine all of them into one, it will be too complex to understand. So let’s learn them one by one as mentioned above.

How to Change the icon of an application using the Action Bar.

There will be many times where we have to change an application icon in a particular activity. Then we have to put icons in drawable folders respectively. For example, when I change the icon named ic_icon.png.

First, import the following package.

Then just copy/paste the code below into the activity file.

You can see the change in the image below.

change color of actionbar

How to change the color of an Action Bar.

There will be many times when we have to change the color of the action bar for the particular activity and we want to use a hex color code for that activity. Then it’s just two simple lines of code and you can see the magic. Here, we use “#0000ff”.

You can see the difference in the image below. Notice the color of the Android action bar?

android actionbar color

How to add buttons to the Action Bar.

For this, let’s see the image that we are going to create in this example. You can get some idea from the image below that we want to put options in the action bar. Something similar to WhatsApp or some other application. Before you start to code, you should add all the necessary icons to your Android application project. You can Download an icon pack from that link and have all the necessary icons.

buttons to actionbar

Please note that you should use the Holo Light with Dark Action Bar theme. We are using the menu to create action buttons in the action bar. So create a new project with the Dark Action Bar theme and add a menu folder in resources. Create one XML file for the menu. Here in our example, I have named that XML file as activity_main_actions.xml.


The attributes and meanings of each are as follows:

ifRoom Displays the icon if there is space available on the screen
Never Never places this icon on the action bar
Always Forces the display of the icon always irrespective of space available. This way is not recommended.
withText Displays a text label along with the icon. Normally the text value defined by android:title will be displayed
collapseActionView Defines the action layout associated with it. This action view is defined using android:actionLayout OR android:actionViewClass

Now lets make a menu in the main Activity file.

Listing 1. Add options(buttons) to the action bar – MainActivity.java

Explanation of the above code

We have created a menu using the code above. We have inflated the layout using a XML file which we have created for our menu.

To find out which icon is clicked, we have one method named onOptionsItemSelected which we have used. In the source code, we have created one method named getOverflowMenu() which tells the device to show the overflow icon when the action bar doesn’t have space.

The rest of the examples will be updated shortly. Thank You for reading.