Android Action Bar Tutorial

 

The action bar helps access the most important and relevant to current context actions much quicker and easier. Buttons that appear in the action bar are called action buttons, and in case some of them can't fit in the action bar, they are hidden in the action overflow. 

     Action bar also gives a dedicated space in your application to identify users location in the app, which can be very useful if your application has a complex hierarchy. 

Now there are three things that we need to do to make our action bar work:

Create menu and add items to it

         By default you will already have a menu file created for you,so go to the the res\menu directory and paste the following code into your main.xml file (in case you want to create a new menu just right click on menu directory and select New->Android XML File):

main.xml file:

	<menu xmlns:android="http://schemas.android.com/apk/res/android" >
	<item android:id="@+id/about_facebook"
	android:icon="@drawable/facebook"
	android:title="@string/facebook"
	android:showAsAction="ifRoom"/>
	<item android:id="@+id/about_reddit"
	android:icon="@drawable/reddit"
	android:title="@string/reddit"
	android:showAsAction="ifRoom" />
	<item android:id="@+id/about_twitter"
	android:icon="@drawable/twitter"
	android:title="@string/twitter"
	android:showAsAction="ifRoom" />
	<item android:id="@+id/about_youtube"
	android:icon="@drawable/youtube"
	android:title="@string/youtube"
	android:showAsAction="ifRoom" />
	</menu>

view raw main.xml hosted with ❤ by GitHub

         As you can see the menu we've created has four items, each one of them has an icon (I am using social network icons that I've downloaded from here http://sixrevisions.com/freebies/icons/free-set-of-social-media-icons-large-icons-social/) and a title. 
           The value of android:showAsAction is set to "ifRoom", which means that the item will be shown in the action bar if there is room left for it. Alternatively the value can be set to never or always.

Inflate a menu resource 

 Now we need to inflate the menu resource that we've just created by adding the following method to the activity class:

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

view raw MainActivity.java hosted with ❤ by GitHub

Handle clicks on action items

In the example application the value of  TextView and an ImageView of a main layout will be changed when one of the action button is clicked, so first we need to modify application layout file like this:
activity_main.xml file:

	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:paddingBottom="@dimen/activity_vertical_margin"
	android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin"
	tools:context=".MainActivity" >
	<TextView
	android:id="@+id/our_text"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerInParent="true"/>
	<TextView
	android:id="@+id/founded_by"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/founder"
	android:layout_above="@id/our_text"
	android:layout_centerHorizontal="true"/>
	<ImageView
	android:layout_centerHorizontal="true"
	android:id="@+id/our_image"
	android:layout_width="64dp"
	android:layout_height="64dp"
	android:layout_above="@id/founded_by"/>
	</RelativeLayout>

view raw activity_main.xml hosted with ❤ by GitHub

The last step is to handle clicks on action items. When the user presses an action button, system calls onOptionItemSelected() method, which we now will add to the activity file:

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
	// Handle presses on the action bar items
	switch (item.getItemId()) {
	case R.id.about_facebook:
	image.setImageResource(R.drawable.facebook);
	text.setText("Mark Zuckerberg");
	return true;
	case R.id.about_reddit:
	image.setImageResource(R.drawable.reddit);
	text.setText("Alexis Ohanian and Steve Huffman");
	return true;
	case R.id.about_twitter:
	image.setImageResource(R.drawable.twitter);
	text.setText("Evan Williams, Noah Glass, Jack Dorsey and Biz Stone");
	return true;
	case R.id.about_youtube:
	text.setText("Chad Hurley, Steve Chen and Jawed Karim");
	image.setImageResource(R.drawable.youtube);
	return true;
	default:
	return super.onOptionsItemSelected(item);
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

Each action has its on unique ID provided by the item tag's id attribute (in the menu.xml file). This way by calling getItemId() we can identify every action.

Full Activity Code

	package com.example.actionbartutorial;
	import android.app.Activity;
	import android.os.Bundle;
	import android.view.Menu;
	import android.view.MenuItem;
	import android.widget.ImageView;
	import android.widget.TextView;
	public class MainActivity extends Activity {
	public ImageView image;
	public TextView text;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	image = (ImageView) findViewById(R.id.our_image);
	text = (TextView) findViewById(R.id.our_text);
	}
	@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;
	}
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
	// Handle presses on the action bar items
	switch (item.getItemId()) {
	case R.id.about_facebook:
	image.setImageResource(R.drawable.facebook);
	text.setText("Mark Zuckerberg");
	return true;
	case R.id.about_reddit:
	image.setImageResource(R.drawable.reddit);
	text.setText("Alexis Ohanian and Steve Huffman");
	return true;
	case R.id.about_twitter:
	image.setImageResource(R.drawable.twitter);
	text.setText("Evan Williams, Noah Glass, Jack Dorsey and Biz Stone");
	return true;
	case R.id.about_youtube:
	text.setText("Chad Hurley, Steve Chen and Jawed Karim");
	image.setImageResource(R.drawable.youtube);
	return true;
	default:
	return super.onOptionsItemSelected(item);
	}
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

Demo

Android Action Bar Example

Source Code

References:

http://developer.android.com/guide/topics/ui/actionbar.html