Should we replace Action Bar by ToolBar?

SilentKnight picture SilentKnight · Apr 23, 2015 · Viewed 26.6k times · Source

I have been using ToolBar since it was added into Support v7 library. And I think I used it well. But there is a point I can't understand. Why would Google create such a widget? I mean we can do anything ToolBar can do by using ActionBar. Why do we have to use ToolBar? What are advantages of ToolBar over ActionBar if any? Is it necessary to replace ActionBar by ToolBar?

Any tips are appreciated. And thanks in advance.

PS: I found ToolBar is a decandant of ViewGroup. So, how could we use ToolBar like a Layout? Could somebody post some codes of that?

Answer

Shane Ekanayake picture Shane Ekanayake · Apr 23, 2015

Yes, you should replace ActionBar with new toolbar.

Reasons

  1. It looks modern and it follows new material design.

  2. Unlike Action bar, toolbar is not part of window decor. You define it and place it just like any other widget... therefore, you have freedom to place it anywhere in the parent layout.

  3. You have freedom to put any widget inside toolbar.

  4. You can define multiple toolbars.

EDIT

What i meant is you can place other widgets (views) inside toolbar.

Create a separate layout file for the toolbar (good for reusability). In my case file name is main_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:App="http://schemas.android.com/apk/res-auto"
    xmlns:segmentedgroup="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    App:theme="@style/ToolbarColoredBackArrow"
    android:layout_height="56dp"
    android:background="@color/primary_color" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="@dimen/drawer_fntsize"
        android:text="Title"
        android:id="@+id/lbl_title"
        android:textColor="@color/title_text_color"
        android:layout_gravity="center" />

 </android.support.v7.widget.Toolbar>

Then include this toolbar in your main layout like this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        android:id="@+id/toolbar"
        layout="@layout/main_toolbar" />

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar" />

</RelativeLayout>

As you can see in this example i placed TextView inside the toolbar