Introduction

Android’s new operating system named Android Lollipop, is highly focused on rich user experience and what they called it as material design. In this example we will take a look at the new Actionbar replacement called Toolbar.

What is Toolbar?

Toolbar is a complete replacement to Android ActionBar. It provides greater control to customize its appearance unlike old ActionBar. Using Toolbar, application developer can now, show multiple toolbars on the screen, spanning only part of the width, etc.

Android Toolbar Example

Screenshot showing simple toolbar in android tablet and phone.

It is introduced in Android Lollipop, API level 21 release, and hence it is available to use, out of box for the application that are targeted to 21 and above. However, as always Google provides fully supported Toolbar features to lower android os devices via AppCompact support library. In AppCompat, Toolbar is implemented in the android.support.v7.widget.Toolbar class.

A Toolbar can be used in two ways.

  1. Use a Toolbar as an replacement to ActionBar. In this you can still continued to use the ActionBar features such as menus, selections, etc.
  2. Use a standalone Toolbar, where ever you want to place in your application.

Using Toolbar as ActionBar

Following are simple steps you need to follow for implementing Toolbar as ActionBar replacement.

First of all, you need to disable ActionBar. To do this, you need to extend your application theme from Theme.AppCompat.NoActionBar or if you are already using Theme.AppCompact theme, then just add below lines of code snippet

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat">
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>

Secondly, add the App Compact V7 support support library. In this example, I am using Android Studio as the development IDE. You can add the V7 support library dependency to your application build.gradle file.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile "com.android.support:appcompat-v7:21.0.+"
}

Now you need to add Toolbar to your Activity layout. Find the code snippet below for simple Toolbar Layout.

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

Apply the theme to Activity. Here in this step you need to apply the theme which we have created in step-1 to your activity. This can be done, by using android:theme attribute in your application AndroidManifest.xml.

<activity
            android:name="com.javatechig.sample.MyActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme" >
</activity>

Now you are almost ready. You just need to instantiate the Toolbar and add it to your activity by using setSupportActionBar(Toolbar) method.

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

public class MyActivity extends ActionBarActivity{

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

        // Set a toolbar to replace the action bar.
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
	}
}

Nilanchala

A blogger, a bit of tech freak and a software developer. He is a thought leader in the fusion of design and mobile technologies. He is the author of Xamarin Mobile Application Development for Android Book (goo.gl/qUZ0XV3), DZone MVB and founder of stacktips.com.

Join The Discussion

Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.
  • Towhid Islam

    Please ans …
    Why the action is been duplicated?? and on the below action bar image button doesn’t show the toast too..

    • Gagandeep Singh

      Because you haven’t disabled your action bar …
      the same thing is being done by toolbar itself on the same screen

  • Lavekush Agrawal

    Can we set custom layout in Toolbar ?

    • Yes absolutely. A toolbar is a view group like FrameLayout. You can put any custom layout in it.

  • Vihaan Verma

    Where is the source code

  • SANdeep Tengale

    But ActionBarActivity is deprecated, is it fine to use it??

    • You can use AppCompatActivity

      • Saqib Rehman

        public class MainActivity extends AppCompatActivity()
        but in “toolBar” we use setSupportActionBar ……
        this show Conflict and show error
        “setSupportActionBar cannot be apply on appCompatActivity”……

  • vishnu

    Hey : add custom view to this kind of ActionBar in using toolbar