Android Custom Toolbar

Table of contents:

Motivation
Examples
- Get a colored back button
- Two icons and centered title

Motivation

In default behaviour the Toolbar just provides a back button, an icon, a left aligned title and an optional menu.

Code below shows the default toolbar tag.

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

For some applications this is not sufficient. The Toolbar itself is highly customizable.

Examples

Get a colored back button

To get a colored back button you can use the function below. Working from API level 16 and above.

public void setBackButtonColor(int color_back_button)
{
    AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);

    // color the back button
    final Drawable upArrow = ContextCompat.getDrawable(this, 
        R.drawable.abc_ic_ab_back_material);
    upArrow.setColorFilter(color_back_button, PorterDuff.Mode.SRC_ATOP);
    getSupportActionBar().setHomeAsUpIndicator(upArrow);
}

Your build.gradle has to include:

defaultConfig {
    vectorDrawables.useSupportLibrary = true
}

...

dependencies {
    compile 'com.android.support:appcompat-v7:25.0.0'
    compile 'com.android.support:design:25.0.0'
}

Two sample calls are below. The color can be passed from a predefined color or one defined in color.xml.

setBackButtonColor(Color.YELLOW);
setBackButtonColor(ContextCompat.getColor(this, R.color.color_xyz));

Two icons and centered title

The Toolbar tag can include any RelativeLayout or LinearLayout to arrange a bunch of TextViews and ImageViews for your needs.

Please not the additional attributes in android.support.v7.widget.Toolbar. They are necessary to eliminate unwanted margins.

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/mainDefault"
        app:popupTheme="@style/AppTheme.PopupOverlay"
        android:contentInsetLeft="0dp"
        android:contentInsetStart="0dp"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        android:contentInsetRight="0dp"
        android:contentInsetEnd="0dp"
        app:contentInsetRight="0dp"
        app:contentInsetEnd="0dp">

        <!-- YOUR CUSTOM LAYOUT IS PLACED HERE: BEGIN -->

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_alignParentBottom="true"
            android:gravity="center" >

            <ImageView
                android:id="@+id/imgFootPrint"
                android:layout_width="60dp"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:padding="5dp"
                android:scaleType="fitCenter"
                android:clickable="true"
                android:src="@drawable/icon_foot_print"/>

            <ImageView

                android:id="@+id/imgInfo"
                android:layout_width="60dp"
                android:layout_height="match_parent"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:padding="5dp"
                android:scaleType="fitCenter"
                android:src="@drawable/icon_info"/>

            <TextView
                android:id="@+id/txtTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="Your Title"
                android:textColor="#FFFFFF"
                android:textSize="24sp" />

        </RelativeLayout>

        <!-- YOUR CUSTOM LAYOUT IS PLACED HERE: END -->

    </android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>

Referencing Views over IDs to setup listeners in your onCreate() is straightforward.