Android Toolbar Example

The Android toolbar is the new Action Bar. It’s not bound to any activity, meaning it can be placed anywhere in the layout, is highly customizeable and can be used as an “Action Bar”. You can add navigation button, branded logos, title and subtitle and even custom views.

This android toolbar example will explain how to implement the toolbar, change the theme colors, set title and place the toolbar on the top or bottom end of the view.

You can combine this tutorial with our Android Floating Action Button Example to learn how to implement the floating action button from material design.

Let’s start by adding the dependencies.

Dependencies

Add the latest support libraries to your app build.gradle file and build your project.

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

 

Toolbar Colors

File: colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary" type="color">#009688</color>
</resources>

This will be the main background color for our toolbar.

File: styles.xml

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

Specify in your style file that you don’t want to use the native Action bar by choosing “Theme.AppCompat.Light.NoActionBar”.

 

Toolbar Layout

Create a new layout file and call it “toolbar.xml”.

File: toolbar.xml

<?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:minHeight="?attr/actionBarSize"
    android:background="@color/primary"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

Make sure to include the schema “xmlns:app=”http://schemas.android.com/apk/res-auto” so you can use the app attributes. PopupTheme is used for styling the overflow popup when you click on settings. I used the Dark.ActionBar theme, because I wanted the white font. You can also create your custom themes in styles.xml and use them here.

 

Android Toolbar Top

This layout example will put the toolbar to the top of the view. If you want the toolbar on the bottom use the next activity_main layout.

Use the include keyword to add the toolbar to any view you want.

File: activity_main.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context="com.ahotbrew.toolbar.MainActivity">

    <include layout="@layout/toolbar"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
         android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin" >
        <TextView
            android:text="@string/hello_brew"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </RelativeLayout>
</LinearLayout>

 

Android Toolbar Bottom

This layout shows you how place the toolbar at the bottom of the view.

File: activity_main.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context="com.ahotbrew.toolbar.MainActivity">

    <include
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp">

        <TextView
            android:text="@string/hello_brew"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </RelativeLayout>
</RelativeLayout>

 

MainActivity

The last file we need to update is the MainActivity itself.

File: MainActivity.java

package com.ahotbrew.toolbar;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity
{

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item)
    {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings)
        {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Make sure you extend the AppCompatActivity. The main code is in the OnCreate method. We retrieve the toolbar from the view and set it up as the “Action Bar”.

 

Android Toolbar Title

There are two ways I know of changing the toolbar title.

When we set up a toolbar as an “Action Bar”, we can specify the title name in the activity label attribute of the AndroidManifest.xml.

File: AndroidManifest.xml

<activity android:name=".MainActivity" android:label="@string/title_activity_main" >
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

If you need a more dynamic approach then you can simply change the title in the java files.

File: MainActivity.java

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

toolbar.setTitle("Ahotbrew.com - New Title");

setSupportActionBar(toolbar);

Sit back, take a sip from your hot brew and run your project.