How to use the Toolbar widget?

Question

I’ve seen the own documentation of android I’ve done all the steps of other forums and still could not use Toolbar in my screen layout.

How I should proceed step by step regarding the implementation and use in my toobar?

Answer 1

To use the Toolbar, you have two options:

1. If your application needs to support versions prior to 21 then you should use the android.support.v7.widget.Toolbar in their layouts;
2. Otherwise just use the android.widget.Toolbar.

To begin, unfortunately, the Toolbar need to be in all layouts. For theme attribute settings and positioning. Instantiate Toolbar and adding it manually to the layout can be tricky to have to configure its position and add all attributes to style it.

Remembering that in this answer, it is necessary to import the library of appcompat v7 21, or adding the jar if it’s in Eclipse, or importing the dependency if it’s in Android Studio. And like appcompat depends on the support library v4, she needs to be added too.

As I am using Android Studio, I use these two dependencies:

 compile 'com.android.support:appcompat-v7:21.+'
 compile 'com.android.support:support-v4:21.+'

Heed, if you’re using the Toolbar as a substitute for Action Bar, you need to use a theme without the ActionBar. For this use the themes with ending NoActionBar, so much of appcompat as in version 21. One of the themes I use appcompat for that purpose is the Theme.AppCompat.Light.NoActionBar.

An example of layout using Toolbar is:

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

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

    <FrameLayout
        android:id="@+id/am_frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

In that case, I used the include for reasons of reuse (DRY), assuming that the Toolbar will always have the same attributes in all layouts it makes no sense to repeat everywhere.

Its position can vary the will in the layout, and this is one of the advantages of using the Toolbar.

Definition of Toolbar in the include:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="@dimen/ab_height"
    android:layout_width="match_parent"
    android:minHeight="@dimen/ab_height"
    android:background="?attr/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

If you’re using android.widget.Toolbar, the definition would be:

<android.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_height="@dimen/ab_height"
    android:layout_width="match_parent"
    android:minHeight="@dimen/ab_height"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.Material.ActionBar"
    android:popupTheme="@style/ThemeOverlay.Material.Light" />

---

In the Activity, some things need to be done.

If you want to use the Toolbar as a substitute for the ActionBar, just use the method setSupportActionBar (appcompat) or setActionBar (Android 21) after the setContentView. If you’re using the appcompat, it is paramount that your Activity be a subclass of ActionBarActivity.

Example:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    // Dando a responsabilidade de Action Bar para o Toolbar
    Toolbar tlb = findViewById(R.id.toolbar);

    setSupportActionBar(tlb);
    // ou
    //setActionBar(tlb);

    // Apos isso, podera configurar sua Action Bar normalmente
    // Por exemplo:
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);

To use setSupportActionBar or setActionBar, it is necessary to use a theme that does not have Action Bar, or you will have problems. Because you are adding a Action Bar to a Window that already has one. For this use one of the themes with suffix *.NoActionBar (e. g: Theme.AppCompat.NoActionBar, Theme.Material.NoActionBar and etc...)

Regarding the construction of menus, using setSupportActionBar or setActionBar, the others callbacks (onCreateOptionsMenu, onOptionsItemSelected and etc...) continue to be called as well. So no changes need to be made to the code.

If you’re not setting the Toolbar as ActionBar, it is necessary to use the method Toolbar.inflateMenu to add menu items to Toolbar.

---

Some important remarks

1. If you use one of the themes without Action Bar (e. g: Theme.AppCompat.Light.NoActionBar), and not set the Toolbar using the setSupportActionBar or setActionBar, will have problems with NullPointerException in the calls of getSupportActionBar or getActionBar.

2. If you’re using Action Mode with the Toolbar at the top of the screen, Toolbar is not superimposed by the bar of the Action Mode , as in the Action Bar standard. The bar of Action Mode is above the Toolbar. To avoid this problem I recommend that you hide the Toolbar during the Action Mode.

   An example would be:

   @Override
   public boolean onCreateActionMode(ActionMode actionMode, Menu menu) {
       MenuInflater inflater = actionMode.getMenuInflater();
   
       inflater.inflate(R.menu.custom_deck_cab, menu);
   
       Toolbar tlb = findViewById(R.id.toolbar);        
       tlb.setVisibility(View.GONE);
   
       return true;
   }
   
   @Override
   public void onDestroyActionMode(ActionMode actionMode) {
       Toolbar tlb = findViewById(R.id.toolbar);        
       tlb.setVisibility(View.VISIBLE);
   }
   

3. In this new version, there was a depreciation of the methods related to the navigation modes of the Action Bar (e. g: setNavigationMode, setSelectedNavigationItem and setListNavigationCallbacks), logo if you use tabbed or list navigation (NAVIGATION_MODE_LIST or NAVIGATION_MODE_TABS), should migrate to the Toolbar.

   This migration can be done by adding View's at the Toolbar, since he is a ViewGroup. For tabbed navigation, you can add a PagerTabStrip, or similar, in the Toolbar. If you are using list browsing, you can add a Spinner at the Toolbar, and achieve the same effect.

References:

1. http://android-developers.blogspot.com.br/2014/10/appcompat-v21-material-design-for-pre.html
2. https://chris.banes.me/2014/10/17/appcompat-v21/