Toolbar | Android

Introduction

The toolbar was introduced from Android Lollipop, before Toolbar we were using ActionBar. The position of ActionBar was fix at the top of the screen. But in case of Toolbar, it is more flexible; you can place Toolbar anywhere in the Activity.  The toolbar is useful for displaying App Icon, Title, Navigation Menu, etc. Below image shows an example toolbar

In its most basic form, the action bar displays the title for the activity on one side and an overflow menu on the other. Even in this simple form, the app bar provides useful information to the users, and helps to give Android apps a consistent look and feel.

Toolbar vs ActionBar

The Toolbar is a generalization of the ActionBar system. The key differences that distinguish the Toolbar from the ActionBar include:

• Toolbar is a View included in a layout like any other View
• As a regular View, the toolbar is easier to position, animate and control
• Multiple distinct Toolbar elements can be defined within a single activity

Toolbar uses

Toolbar supports a more focused feature set than ActionBar. A toolbar may contain a combination of the following optional elements:

• A navigation button. This may be an Up arrow, navigation menu toggle, close, collapse, done or another glyph of the app’s choosing.
• A branded logo image. This may extend to the height of the bar and can be arbitrarily wide.
• A title and subtitle. The title should be a signpost for the Toolbar’s current position in the navigation hierarchy and the content contained there.
• One or more custom views. The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout.
• An ActionMenuView. The menu of actions will pin to the end of the Toolbar offering a few frequent, important or typical actions along with an optional overflow menu for additional actions.

Add a Toolbar

Steps to set up a Toolbar as your activity’s app bar:

1. Ensure the AndroidX support library (or other library based on Android version like v7 appcompat) is added to your application build.gradle (Module:app) file

   dependencies {
     ...
     implementation 'androidx.appcompat:appcompat:1.0.0'
   }

2. Disable the theme-provided ActionBar.

   <resources>
     <!-- Base application theme. -->
     <!-- res/values/styles.xml -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
     </style>
   </resources>

3. Add a Toolbar to your Activity layout file. One of the biggest advantages of using the Toolbar widget is that you can place the view anywhere within your layout. add android:fitsSystemWindows="true" to the parent layout of the Toolbar to ensure that the height of the activity is calculated correctly.

   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:fitsSystemWindows="true"
       tools:context=".MainActivity">
    
       <android.support.v7.widget.Toolbar
           android:id="@+id/toolbar"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_alignParentStart="true"
           android:background="@color/colorPrimary" /> 
           
       <!-- Other layout        -->
    
   </RelativeLayout>

4. In the activity’s onCreate() method, call the activity’s setSupportActionBar() method, and pass the activity’s toolbar. This method sets the toolbar as the app bar for the activity.

   @Override
   protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_my);
     Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
     setSupportActionBar(myToolbar);
   }

To use the ActionBar utility methods, call the activity’s getSupportActionBar() method. This method returns a reference to an appcompat ActionBar object. Once you have that reference, you can call any of the ActionBar methods to adjust the app bar. For example, to hide the app bar, call ActionBar.hide().

Styling the Toolbar

The Toolbar can be customized in many ways leveraging various style properties including android:theme, app:titleTextAppearance, app:popupTheme.

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

<style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  <!-- android:textColorPrimary is the color of the title text in the Toolbar  -->
  <item name="android:textColorPrimary">@android:color/holo_blue_light</item>

  <!-- actionMenuTextColor is the color of the text of action (menu) items  -->
  <item name="actionMenuTextColor">@android:color/holo_green_light</item>

  <!-- Tints the input fields like checkboxes and text fields -->
  <item name="colorAccent">@color/cursorAccent</item>

  <!-- Applies to views in their normal state. -->
  <item name="colorControlNormal">@color/controlNormal</item>

  <!-- Applies to views in their activated state (i.e checked or switches) -->
  <item name="colorControlActivated">@color/controlActivated</item>

  <!-- Applied to framework control highlights (i.e ripples or list selectors) -->
  <item name="colorControlHighlight">@color/controlActivated</item>
  
</style>

A Toolbar is just a decorated ViewGroup and as a result, the title contained within can be completely customized by embedding a view within the Toolbar. This means that you can style the TextView like any other, and set custom tittle.

<!-- Toolbar layout -->
<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:minHeight="?attr/actionBarSize"  
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:titleTextColor="@android:color/white"
    android:background="?attr/colorPrimary">

     <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Toolbar Title"
        android:textColor="@android:color/white"
        style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
        android:layout_gravity="center"/>

</androidx.appcompat.widget.Toolbar>


/*Inside the activity's onCreate() */

// Sets the Toolbar to act as the ActionBar for this Activity window.
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);
// Remove default title text
getSupportActionBar().setDisplayShowTitleEnabled(false);

// Get access to the custom title view
TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);