Android Toolbar Example

In the new Android 5.0 version named Lollipop  includes new UI widgets and theming abilities to create material design style apps in this post we will see on the new widget introduced in this version of android called as toolbar which is the replacement of action bar

Since it is introduced in api level 21 , it is available from target api 21 or above , but still google provides fully supported toolbar features to lower version for that you need to add support library AppCompact .

What is toolbar

Android 5.0 introduces a new Toolbar widget. This is a generalization of the ActionBar pattern but gives you much more control and flexibility in using it. Toolbar is a view in your hierarchy just like any other, making it easier to interleave with the rest of your views, animate, react to scroll events.

A Toolbar can be used in two ways

1. Use a Toolbar as an action bar when you want to use the existing ActionBar facilities (such as menu inflation and selection, ActionBarDrawerToggle etc.) but want to have more control over it’s appearance.
2. Use a standalone Toolbar when you want to use the pattern in your app in situations the Action Bar would not support e.g. showing multiple toolbars on the screen, spanning only part of the width etc.

1. Color

declare the color constant inside the res/values/colors.xml

file : res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
     <color name="LightBlue">#2196F3</color>
</resources>

2. Layout


Add toolbar to your activity layout

file : activity_main.xml

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    />

3. Style

Adding the below style inside the res/values/style.xml , res/values-v11/style.xml , res/values-v14/style.xml .

To use Toolbar as an Action Bar, first disable the decor-provided Action Bar. The easiest way is to have your theme extend from Theme.AppCompat.NoActionBar .

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <!-- Background Color for Toolbar -->
        <item name="colorPrimary">@color/LightBlue</item>
    </style>
  
</resources>

4. Manifest

Now Inside manifest file set the above defined style to either application tag or activity tag.

<application
        android:theme="@style/AppTheme"
        ------------------------------
        ------------------------------>
</application>

Or

<activity
        android:theme="@style/AppTheme"
        ------------------------------
        ----------------------------->
</activity>

5. MainActivity


Now inside your Activity or Fragment set the Toolbar to act as your Action Bar by passing the instance of toolbar as a parameter  to setSupportActionBar() method .

file : MainActivity.java

package com.tutorialsbuzz.toolbardemo;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;

public class MainActivity extends ActionBarActivity {

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

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

    }
}

You can set navigation icon , app icon, title and sub title to your toolbar below code is very self explanatory for setting them .

//Setting appIcon
toolbar.setLogo(R.drawable.ic_launcher);
//Setting navigationIcon
toolbar.setNavigationIcon(R.drawable.ic_action_previous_item);
//Setting Subtitle
toolbar.setSubtitle("subtitle");