How to create Android Toolbar

This tutorial is going to explain about how to get rid off old fashioned action bar by replacing it with toolbar.

Time needed:
5-6 minutes

Requirements:
1) Android studio(try to keep latest version)

Theory:
Before API level 21, every developer has used action bar. But in API level 21, google  has come up with toolbar. Toolbar is a generalization of action bars. It means that you can use a toolbar as an action bar. But  action bar can only be placed at the top in the layout hierarchy. Whereas with toolbar, you have an option to place it at any arbitrary level of nesting within a view hierarchy.
To get more information related to toolbar, refer this link .

Implementation:
1) Create a new project.

2) Now under res->values->color.xml file, add colors that we want to give to toolbar and the status bar.
Note: if you do not find color.xml file, then create one.

<color name="primaryColor">#FF1D15</color>
    <color name="primaryDarkColor">#BF0603</color>

Finally, color.xml file will look like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primaryColor">#FF1D15</color>
    <color name="primaryDarkColor">#BF0603</color>
</resources>

3) As we are implementing toolbar, we need to remove the action bar. Go to res-->values-->styles.xml and change parent theme to "Theme.AppCompat.Light.NoActionBar". Also set colorPrimary and colorPrimaryDark item's. And finally, it should look like this:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryDarkColor</item>
    </style>

</resources>

4) As we need a toolbar layout in our activity_main.xml file, and we can add it directly into it's layout. But toolbar is going to implement again and again in your activities. So, in order to get rid off typing same code again, we are going to create a separate layout for toolbar.
Create tool_bar.xml under layout folder.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    android:id="@+id/tool_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/primaryColor"
    xmlns:android="http://schemas.android.com/apk/res/android">
</android.support.v7.widget.Toolbar>

5) Include the toolbar (mention in layout tool_bar.xml file ) to activity_main.xml file.Finally, activity_main.xml will look like this.

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <include
        layout="@layout/tool_bar">
    </include>

</LinearLayout>  

6) In MainActivity.java, in onCreate method add the following code

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

Here, we are fetching reference of toolbar layout and setting it as an action bar of our activity. Also import toolbar widget class

import android.support.v7.widget.Toolbar;

That's it...

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.