ZOFTINO.COM android and web dev tutorials

Android ToolBar Tutorial

Android ToolBar can be used as action bar and it can contain navigation button, brand logo, title, subtitle, custom views, and action menu.

The difference between action bar and tool bar is that ToolBar element can be controlled and part of application layout while action bar is controlled by android framework. You can read action bar tutorial for more information on action bar.

In this post, you can learn how to use ToolBar and tool bar material styles, customize tool bar material styles, and implement tool bar animation and tool bar custom layout.

Support Library ToolBar

ToolBar is added in API level 21. To make sure that your application which uses ToolBar doesn’t crash on previous versions of android, in other words for backward compatibility, you need to use ToolBar from support library.

Adding ToolBar to Layout

Below example constraint layout contains ToolBar.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="dialog.zoftino.com.toolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/tooBarColor"
        android:minHeight="?attr/actionBarSize"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="ToolBar Tutorial"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />
</android.support.constraint.ConstraintLayout>

Using ToolBar as ActionBar

To use ToolBar as action bar, first you need to set application theme to no action bar theme, for example to Theme.AppCompat.Light.NoActionBar or Theme.AppCompat.NoActionBar. Then in the activity, call setActionBar or setSupportActionBar (if you use ToolBar from support library) method passing tool bar object to it.

Next, you can set navigation button, brand logo, title, and subtitle. You can read action bar tutorial to know how to add and handle ToolBar menu.

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

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

    myToolbar.setNavigationIcon(R.drawable.ic_drawer);
    myToolbar.setLogo(R.drawable.brandz);
    myToolbar.setSubtitle("ToolBar");
}

Note that if you want to use tool bar in fragments, you need to first get activity, then cast activity to app compact activity and then call setSupportActionBar method in the fragment.

((AppCompatActivity)getActivity()).setSupportActionBar(toolbar); 
android toolbar

Android ToolBar Material Styles & Custom Material Styles

Android provides Widget.Material.Toolbar material theme and corresponding app compact themes Widget.AppCompat.Toolbar for tool bar. You can customize the material style to change color, size of ToolBar and text appearance of titles by setting properties such as background, titleTextAppearance, subtitleTextAppearance.

After customizing tool bar style, you can add it to application them by setting toolbarStyle property of your custom application theme as shown below.

 <style name="MyAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="toolbarStyle">@style/MyToolBarStyle</item>
</style>
<style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="android:background">#80deea</item>
    <item name="titleTextAppearance">@style/MyTitleTextAppearance</item>
    <item name="subtitleTextAppearance">@style/MySubTitleTextAppearance</item>
</style>
<style name="MyTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">35dp</item>
    <item name="android:textColor">#ff3d00</item>
</style>
<style name="MySubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
    <item name="android:textSize">30dp</item>
    <item name="android:textColor">#1976d2</item>
</style>
 

Output of above tool bar custom style.

android Toolbar custom style

Android Custom ToolBar Layout

You can customize android ToolBar by defining custom layout for ToolBar. With custom tool bar layout, you can still set logo and navigation in your activity. Below layout xml shows custom ToolBar layout.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="dialog.zoftino.com.toolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="8dp">
            <TextView
                android:id="@+id/title_m"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="16dp"
                android:text="Tennis"
                android:textAppearance="@android:style/TextAppearance.Material.Title"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"/>
            <TextView
                android:id="@+id/women_s"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:text="W Singles"
                android:textAppearance="@android:style/TextAppearance.Material.Medium"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/title_m" />
            <TextView
                android:id="@+id/wm_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:textAppearance="@android:style/TextAppearance.Material.Title"
                android:text="Serena"
                app:layout_constraintLeft_toRightOf="@+id/women_s"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/title_m" />
            <TextView
                android:id="@+id/men_s"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:text="M Single"
                android:textAppearance="@android:style/TextAppearance.Material.Medium"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/women_s" />
            <TextView
                android:id="@+id/m_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:text="Federer"
                android:textAppearance="@android:style/TextAppearance.Material.Title"
                app:layout_constraintLeft_toRightOf="@+id/men_s"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/women_s" />
        </android.support.constraint.ConstraintLayout>
    </android.support.v7.widget.Toolbar>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="ToolBar Tutorial"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />
</android.support.constraint.ConstraintLayout>

Toolbar custom layout output with logo which is configured in the activity.

android toolbar custom layout

Android ToolBar Animation

ToolBar can be animated. Please read collapsing toolbar layout tutorial to learn how to animate tool bar.