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"?>
     <color name="LightBlue">#2196F3</color>

2. Layout

Add toolbar to your activity layout

file : activity_main.xml

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="">

    <!-- 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>

4. Manifest

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




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 :
package com.tutorialsbuzz.toolbardemo;

import android.os.Bundle;

public class MainActivity extends ActionBarActivity {

    protected void onCreate(Bundle savedInstanceState) {

        Toolbar toolbar = (Toolbar) findViewById(;


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
//Setting navigationIcon
//Setting Subtitle


Viswalinga Surya S said...

Can we change the title and subtitle color with this?

Ася Тоскова said...

In your style you can add:
android:textColorPrimary = your_color_for_title
android:textColorSecondary = your_color_for_subtitle


Post a Comment