Menu

How to Implement Action Bar in Android

In Android application, action bar is used for navigation purpose. It includes actions, drop down menu navigation, search , share actions, etc. In addition, action bar is also used for tab navigation and fragment switching. The action bar provides users a familiar and predictable way to perform actions and navigate your app. For old version of Android, you need to install support library from the Android SDK manager.

Here, in this tutorial we are going to implement simple action bar with icons, actions, drop down menu and search actions.  Some other features like tab navigation, slide menu like in Google app and styles will be covered in next tutorials.

Before beginning the project, it’ll be better to understand about the action bar. The action bar provides several key functions:

  • Provides a dedicated space for giving your app an identity and indicating the user’s location in the app.
  • Makes important actions prominent and accessible in a predictable way (such as Search).
  • Supports consistent navigation and view switching within apps (with tabs or drop-down lists).

and these definitions too.

  • App Icon – App branding logo or icon will be displayed here.
  • View Control – A dedicated space to display app title. Also provides 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.

Now lets start to create the project.

Creating A New Project

1. Either you use Eclipse ADT or Android Studio, go to Files ⇒ New ⇒ Android Application Project . To use Action Bar you must choose the Minimum SDK version to API 11.

pukar_tech_android_action_bar_1

Adding Action Bar Items/Icons

2. The action bar items or icons are defined in xml file. If you don’t have icons then you can download it from Android.com. Download Android Action Bar icon set here and select your icons and copy them to your app’s drawable folders. This includes multiple sized icons like hdpi, ldpi, mdpi, xhdpi and xxhdpi. Copy these all types for your chosen icons to their respective folders (res⇒ Layout ).

3. Create a new xml file under res⇒ menu and named it as action_bar_actions.xml and copy the code below in it.


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Search -->
<item android:id="@+id/action_search"
android:icon="@drawable/ic_action_search"
android:title="@string/action_search"
android:showAsAction="ifRoom"/>

<!-- Share -->
<item android:id="@+id/action_share"
android:icon="@drawable/ic_action_share"
android:title="@string/action_share"
android:showAsAction="ifRoom" />

<!-- Camera -->
<item android:id="@+id/action_camera"
android:icon="@drawable/ic_action_camera"
android:title="@string/action_camera"
android:showAsAction="ifRoom" />

<!-- Refresh -->
<item android:id="@+id/action_refresh"
android:icon="@drawable/ic_action_refresh"
android:title="@string/action_refresh"
android:showAsAction="never" />

<!-- Map -->
<item android:id="@+id/action_map"
android:icon="@drawable/ic_action_map"
android:title="@string/action_map"
android:showAsAction="never" />

<!-- Setting -->
<item android:id="@+id/action_settings"
android:icon="@drawable/ic_action_settings"
android:title="@string/action_settings"
android:showAsAction="never"/>

</menu>

In this xml file, you need to know some attributes like

android:id – id of that action/icon

android:icon – icon image for that action

android:title – display name of that action

android:showAsAction – In this, you have seen ifRoom and never. ifRoom defines that display icon in Action Bar if space is available and never defines that never displays item in Action bar.

Also add the string definitions in res⇒ Values⇒ Strings.xml  


<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="app_name">ActionBarApp</string>
<string name="hello_world">Hello world!</string>


<string name="action_search">Search</string>
<string name="action_share">Share</string>
<string name="action_camera">Camera</string>
<string name="action_refresh">Refresh</string>
<string name="action_map">Map</string>
<string name="action_settings">Settings</string>

</resources>

4. Its time to add these items in our action bar. So  open the main activity file MainActivity.java and find onCreateOptionsMenu. We need to define the menu layout for our action bar so modify the code as below.


public class MainActivity extends Activity {

@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.action_bar_action, menu);
return true;
}

}

Now you can run the app in emulator or device and there you can see the action bar with action items. Remember, if you run the app in emulator you’ll not see all the items and there’ll be no overflow icon too. For all action items, you need to click Menu button on emulator’s right side. But you can see actual action bar view if you run the application in android device.

pukar_tech_android_actionbar_2

Adding Click Events on Action Bar items

5. Now we are going to add the click events to those action bar items. You may feel, clicking those icons in action bar nothing happens. So we need to work on that. Add the following code in your MainActivity.java file.


@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Take appropriate action for each action item click
switch (item.getItemId()) {
case R.id.action_search:
// search action
return true;
case R.id.action_share:
// location found
ShareOption();
return true;
case R.id.action_camera:
// refresh
return true;
case R.id.action_refresh:
// help action
return true;
case R.id.action_map:
// check for updates action
return true;
case R.id.action_settings:
// check for updates action
return true;
default:
return super.onOptionsItemSelected(item);
}
}

private void ShareOption() {
Intent i = new Intent(MainActivity.this, ShareOption.class);
startActivity(i);
}

6. Lets create another activity ShareOption.java in our main package . This activity will be called when user clicked the Share action on action bar.


package np.com.pukarm.actionbarapp;

import android.app.ActionBar;
import android.app.Activity;
import android.os.Bundle;

public class ShareOption extends Activity{

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

// get action bar
ActionBar actionBar = getActionBar();

// Enabling Up / Back navigation
actionBar.setDisplayHomeAsUpEnabled(true);
}

}

7. Create a layout file for ShareOption.java Activity called shareoption_layout.xml in res⇒ Layout folder. Copy the code below in this xml file.


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Share Option Activity"
android:textSize="20sp" />

</RelativeLayout>

8. To know all the activity by app, we need to define the acitivity in our AndroidManifest.xml file. Add the following code for ShareOption activity in AndroidManifest.xml inside the application tag.


<activity
android:name="np.com.pukarm.actionbarapp.ShareOption"
android:label="@string/action_share"
android:parentActivityName="np.com.pukarm.actionbarapp.MainActivity" >
</activity>

Here android:parentActivityName is used for Back Navigation. For this features you need at least API 16 otherwise it may not support. Now try running the app. You can now click the Share icon and you will navigate to Share option activity. You can also back navigate to the main activity.

pukar_tech_android_action_bar_3

For further , we can implement search widget, drop down menu, slide menu and tab navigation which will be covered in my next tutorial. You can customize the action bar in your own styles and colors. There are more interesting methods in these action bar so follow my next tutorials.

No Responses

Leave a Reply

Your email address will not be published. Required fields are marked *