ZOFTINO.COM android and web dev tutorials

Action Bar or App Bar Implementation

App or action bar is used to display app identity, user location within the app, important actions, up navigation button and other navigational capabilities.

App name or app icon needs to be displayed on the app screens to let users know which app is being used. Displaying user location in current work flow and showing screen name help user understand where he is in the current work flow within the app. Making important actions accessible to users and giving ability to easily navigate within the app improves user experience. App bar is the right place to keep these actions and information.

android app bar example

Android provides frame work to create app or action bar. Default themes display ActionBar as app bar which can be used to display app icon, up navigation and important actions. However, only latest version of android supports all the features of actions bar.

So, to provide consistent app bar behavior across devices running different versions of android, it is better to use ToolBar provided by support library.

App bar using ActionBar

To enable ActionBar, you need to create activity by extending AppCompatActivity class and use one of the ActionBar themes.

Some of the actionbar themes provided by android are

  • Base_Theme_AppCompat_Light_DarkActionBar
  • ThemeOverlay_AppCompat_ActionBar
  • Theme_AppCompat_Light_DarkActionBar
  • Widget_AppCompat_ActionBar

App bar using ToolBar

As mentioned before, all features of actionbar are not supported by previous versions of android. So to provide good user experience, use toolbar as app bar.

To use toolbar as app bar, you need to define toolbar in layout and set it as app bar for activity by calling setSupportActionBar method. You need to create activity for which you want app bar by extending AppCompatActivity as AppCompatActivity is the base class for providing app bars.

Also you need to make sure that theme is set to one of the no action bar theme like Theme_AppCompat_Light_NoActionBar, ThemeOverlay_AppCompat_NoActionBar etc. Setting theme to one of no action bar themes prevents ActionBar from displaying as we want to use ToolBar as app bar to provide best user experience.

Action buttons on app bar

To add actions to app bar, you need to create xml file in res/menu/ directory. Root of this xml is menu and each item element within menu is displayed as action on app bar. Menu item’s showAsAction attribute specifies location where actions are placed. Menu items can be displayed on app bar or in overflow menu.

Once menu items are defined in xml, you need to override onCreateOptionsMenu method and inflate menu xml to create menu objects.

When actions on app bar are clicked, onOptionsItemSelected() call back method is called passing MenuItem. MenuItem helps in indentifying the action which is clicked by using action id which can be retrieved from MenuItem.

App bar with actions and overflow menu example

Below code shows how to use ToolBar as app bar and how to add actions to app bar.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.zoftino.appbar">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

MainActivity

package com.zoftino.appbar;

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

public class MainActivity extends AppCompatActivity {

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

        Toolbar myToolbar = (Toolbar) findViewById(R.id.z_toolbar);
        setSupportActionBar(myToolbar);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.z_menu, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        TextView textView = (TextView) findViewById(R.id.action_text);

        switch (item.getItemId()) {
            case R.id.action_up:
                textView.setText("Up action clicked");
                return true;

            case R.id.action_down:
                textView.setText("Down action clicked");
                return true;

            case R.id.action_settings:
                textView.setText("Settings clicked");
                return true;

            default:
                return super.onOptionsItemSelected(item);

        }
    }

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zoftino.appbar.MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello App Bar"
        android:id="@+id/app_head"></TextView>
    <android.support.v7.widget.Toolbar
        android:id="@+id/z_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp" ></android.support.v7.widget.Toolbar>

    <TextView
        android:text=""
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/z_toolbar"
        android:layout_toRightOf="@+id/app_head"
        android:layout_toEndOf="@+id/app_head"
        android:layout_marginLeft="12dp"
        android:layout_marginStart="12dp"
        android:layout_marginTop="234dp"
        android:id="@+id/action_text"></ TextView>

</RelativeLayout>

z_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_up"
        android:icon="@drawable/thumb_up"
        android:title="@string/thumbs_up"
        app:showAsAction="always"></item>

    <item android:id="@+id/action_down"
        android:icon="@drawable/thumb_down"
        android:title="@string/thumbs_down"
        app:showAsAction="ifRoom"></item>
    <item android:id="@+id/action_settings"
        android:icon="@drawable/settings"
        android:title="@string/settings"
        app:showAsAction="never"></item>
</menu>

styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>