Implementing Material Design Toolbar Using AppCompat Library

With the introduction of Material Design in Android 5.0 Lollipop, the Toolbar was also introduced. The Material Design was simply focused on providing rich user experience with highly customizable views in it and so is Toolbar too.

What is Toolbar?

The Toolbar is a complete replacement for the Android's (Too) Old ActionBar. The Toolbar provides developers with multiple customization options which were not possible with ActionBar. The Toolbar allows Android Developers to add navigation button icon, app logo, multiple toolbars, title, subtitle and custom views too. And this is not it, there is much more to explore in the new Toolbar. So let's start with learning some basics in this tutorial about how we can implement Toolbar in our project.

Download Project

Steps To Implement Toolbar

Step 1. Open Android Studio and create a new blank project by navigating to File => New Project and then fill other details.

Step 2. The first thing to be done is adding the dependencies. So open the build.gradle file and add the android appcompat v7 support library in dependencies.

compile 'com.android.support:appcompat-v7:22.2.0'

Step 3. Now open the styles.xml in res => values directory. After opening this file you can see an already defined style which will look something like below snippet(the parent value can be different in you project).

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
</style>

But, this theme is for ActionBar. So to disable the ActionBar, we will change the parent attribute's value to Theme.AppCompat.Light.NoActionBar so that it looks something like below snippet.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
</style>

Step 4. Now we will finally add the Toolbar to our Activity. So open the activity_main.xml layout file in res => layout directory. After opening it you can add the Toolbar into it by typing the following code.

<android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/toolbar"
        android:background="#3F51B5"/>

You activity_main.xml should look something like this as given below snippet.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".MainActivity">
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/toolbar"
        android:background="#3F51B5"/>

    <TextView
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/toolbar"
        android:layout_margin="16dp"/>

</RelativeLayout>

After, you have added the Toolbar in your layout file, your apps interface would look as in below image.

Why is the Title Text? Right? It's because we have not initialised the Toolbar yet and also then we need to set it as a Toolbar for this activity. It's like linking the Toolbar to it's Activity.

Step 5. Open you MainActivity.java file and add this snippet into your onCreate() method.

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

Now, let's run and see how does it look.

What? Why is the text black? Were you thinking the same? Let me explain. Remember in Step 3 we changed the value of parent attribute in styles.xml file to Theme.AppCompat.Light.NoActionBar. And as this NoActionBar style has the Light style as the parent, the text in the Toolbar is by default set to the dark color for better visibility. So what now?

So to change the text color in the Toolbar, we need to add two more attributes to the Toolbar view in the layout file. These two attributes are added to the below snippet.

<android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/toolbar"
        android:background="#3F51B5"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:theme="@style/ThemeOverlay.AppCompat.Dark"/>

The app:theme attribute will style the Toolbar with Dark theme as given in the value. And in the Dark style, the Toolbar text will be the white color for better visibility. So we will get what we want.

Let's see what we get now after running the project.

Woohoo! Now finally we have got the result we were expecting. So go on friends and implement Toolbar in your future projects.