Android Toolbar


Quick note about learning Training : Adding the App Bar

Android introduces a new Toolbar widget. It is a generalization of the Action Bar pattern that gives us much more control and flexibility. ActionBar now is considered a special kind of Toolbar.

Using a Toolbar as an replacement to ActionBar:

  1. Greater control to customize its appearance.
  2. Fully support to lower android os devices via AppCompact support lib.
  3. Continue to use the ActionBar features such as menus, selections, etc.
  4. Use a standalone Toolbar, put it where ever we want in app.

Add Toolbar

To Add Toolbar:

  1. Have v7 appcompat support library
  2. Activity to extend AppCompatActivity
  3. Update theme to be without actionbar
  4. Apply theme to every activity
  5. Define toolbar in activity layout
  6. Update onCreate() to have this toolbar

Extend AppCompatActivity

public class MyActivity extends AppCompatActivity {
    // ...

Update theme

Update theme to NoActionBar to prevent the app from using the native ActionBar class to provide toolbar.

In res/values/styles.xml:

<!-- Theme for activity -->
<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>

<!-- Theme for toolbar -->
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<!-- Theme for toolbar popup menu -->
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

Update AndroidManifest.xml

Make sure all <activity> has the AppTheme.NoActionBar theme


Update activity layout

  • android:theme sets theme for the whole toolbar.
  • app:popupTheme sets theme for the toolbar overflow menu.

Elevation 4dp is recommanded by Material Design specification

Update onCreate()

protected void onCreate(Bundle savedInstanceState) {

    Toolbar myToolbar = (Toolbar) findViewById(;

Add Action Buttons

To add action buttons:

  1. Update menu layout xml in res/menu/ to have this button
  2. Update onOptionsItemSelected() to add listener

Update menu layout xml

Button will appear directly in toolbar or in overflow menu according to:

  • app:showAsAction="ifRoom" - button will be displayed on toolbar if there is enough room in the toolbar; if not, it will be in overflow menu.
  • app:showAsAction="never" - Only in the overflow menu.
<menu xmlns:android=""

    <!-- in toolbar if there is room -->

    <!-- in overflow menu -->
        app:showAsAction="never" />


Update onOptionsItemSelected() to add Listener

public boolean onOptionsItemSelected(MenuItem item) {

    switch (item.getItemId()) {
            // ToDo
            return true;

            // ToDo
            return true;

            // ToDo
            return super.onOptionsItemSelected(item);


Adding an Up Action

Up button in toolbar is for all activities (except the main one) to navigate to the parent activity.

Two steps:

  1. Declare a Parent Activity
  2. Enable the Up button for an activity

Declare a Parent Activity

In AndroidManifest.xml:

  • For higher than Android 4.1 (API level 16), using android:parentActivityName.
  • For older version, using <meta-data> name-value pair, where name is with value the name of the parent activity.
<application ... >

    <!-- The main/home activity (it has no parent activity) -->
        android:name="com.example.myfirstapp.MainActivity" ...>

    <!-- A child of the main activity -->
        android:parentActivityName="com.example.myfirstapp.MainActivity" >

        <!-- Parent activity meta-data to support 4.0 and lower -->
            android:value="com.example.myfirstapp.MainActivity" />

Enable Up button

protected void onCreate(Bundle savedInstanceState) {

    Toolbar myToolbar = (Toolbar) findViewById(;

    // Get a support ActionBar corresponding to this toolbar
    ActionBar actionbar = getSupportActionBar();

    // Enable the Up button

Action Views

It is an action providing rich functionality. For example, a search action view allows the user to type their search text in toolbar, without having to change activities or fragments.

  1. Add <item> in toolbar menu resource
  2. Update onCreateOptionsMenu() to add event listener

Update toolbar menu resource

To add an action view, create an <item> element in the toolbar’s menu resource. Then add one of the following two attributes to the element:

  • actionViewClass - The class of a widget that implements the action.
  • actionLayout - A layout resource describing the action’s components.

Set showAsAction to either ifRoom|collapseActionView or never|collapseActionView.

The collapseActionView indicates how to display the widget when the user is not interacting with it: If the widget is on toolbar, the app should display the widget as an icon. If the widget is in the overflow menu, the app should display the widget as a menu item. When the user interacts with the action view, it expands to fill toolbar.

<item android:id="@+id/action_search"
     app:actionViewClass="" />

Update onCreateOptionsMenu()

Update onCreateOptionsMenu() in activity to add event listener

public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(, menu);

    MenuItem searchItem = menu.findItem(;
    SearchView searchView =
            (SearchView) MenuItemCompat.getActionView(searchItem);

    // Configure the search info and add any event listeners...

    return super.onCreateOptionsMenu(menu);

Listener to action view collapse/expanded

If we want to do something when action view collapses/expands:

  1. Define and override OnActionExpandListener
  2. Add this listener to action view item
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(, menu);
    // ...

    // Define the listener
    OnActionExpandListener expandListener = new OnActionExpandListener() {
        public boolean onMenuItemActionCollapse(MenuItem item) {
            // Do something when action item collapses
            return true;  // Return true to collapse action view

        public boolean onMenuItemActionExpand(MenuItem item) {
            // Do something when expanded
            return true;  // Return true to expand action view

    // Get the MenuItem for the action item
    MenuItem actionMenuItem = menu.findItem(;

    // Assign the listener to that action item
    MenuItemCompat.setOnActionExpandListener(actionMenuItem, expandListener);

    // Any other things you have to do when creating the options menu…

    return true;

Action Providers

It is an action with its own customized layout. When user clicks it, the action provider controls the action’s behavior in any way we want. For example, the action provider might respond to a click by displaying a menu.

<item android:id="@+id/action_share"

To create a custom action provider, see here.

To configure a ShareActionProvider, see here.


Post Directory