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:

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

To Add Toolbar:

Have v7 appcompat support library
Activity to extend AppCompatActivity
Update theme to be without actionbar
Apply theme to every activity
Define toolbar in activity layout
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>
</style>

<!-- 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

android:theme="@style/AppTheme.NoActionBar"

Update activity layout

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

<android.support.v7.widget.Toolbar
   android:id="@+id/my_toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:background="?attr/colorPrimary"
   android:elevation="4dp"
   android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Elevation 4dp is recommanded by Material Design specification

Update `onCreate()`

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

    Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
    setSupportActionBar(myToolbar);
}

Add Action Buttons

To add action buttons:

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

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="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.example.chuandong.myapplication.MainActivity">

    <!-- in toolbar if there is room -->
    <item
        android:id="@+id/item_a"
        android:icon="@mipmap/ic_launcher"
        android:title="@string/action_settings"
        app:showAsAction="ifRoom"/>

    <!-- in overflow menu -->
    <item
        android:id="@+id/item_b"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />

</menu>

Update `onOptionsItemSelected()` to add Listener

@Override
public boolean onOptionsItemSelected(MenuItem item) {

    switch (item.getItemId()) {
        case R.id.item_a:
            // ToDo
            return true;

        case R.id.item_b:
            // ToDo
            return true;

        default:
            // 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:

Declare a Parent Activity
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 android.support.PARENT_ACTIVITY with value the name of the parent activity.

<application ... >
    ...

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

    <!-- A child of the main activity -->
    <activity
        android:name="com.example.myfirstapp.MyChildActivity"
        android:label="@string/title_activity_child"
        android:parentActivityName="com.example.myfirstapp.MainActivity" >

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

Enable Up button

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

    Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
    setSupportActionBar(myToolbar);

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

    // Enable the Up button
    actionbar.setDisplayHomeAsUpEnabled(true);
}

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.

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

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"
     android:title="@string/action_search"
     android:icon="@drawable/ic_search"
     app:showAsAction="ifRoom|collapseActionView"
     app:actionViewClass="android.support.v7.widget.SearchView" />

Update `onCreateOptionsMenu()`

Update onCreateOptionsMenu() in activity to add event listener

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main_activity_actions, menu);

    MenuItem searchItem = menu.findItem(R.id.action_search);
    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:

Define and override OnActionExpandListener
Add this listener to action view item

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.options, menu);
    // ...

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

        @Override
        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(R.id.myActionItem);

    // 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"
    android:title="@string/share"
    app:showAsAction="ifRoom"
    app:actionProviderClass="android.support.v7.widget.ShareActionProvider"/>

To create a custom action provider, see here.

To configure a ShareActionProvider, see here.

Ref

What is the difference between Action Bar and newly introduced Toolbar?

Android Toolbar

Add Toolbar

Extend AppCompatActivity

Update theme

Update AndroidManifest.xml

Update activity layout

Update onCreate()