Last Updated: February 25, 2016
·
1.365K
· pageonline

[android] Material Design - Material Toolbar/ActionBar

First step to design an app using Material Design is to create ActionBar. Other components re-design automaticaly after adding AppCompat library to your project.

If you want to support all devices and not only those with Android Lollipop, solution for you is different. You need to use Toolbar instead of ActionBar.

First thing you have to do is remove ActionBar of your Activity. There are more ways to do that. I use styling.

/*   values/styles.xml   */

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="windowActionBar">false</item>
    </style>
</resources>

Now you have to set AppTheme as Application or Activity theme in your manifest file.

This is XML file of your Toolbar you want to include to your.

/*   layout/toolbar_[activity-name].xml   */

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/[activity-name]_toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/main"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    />

Now you have to include it to your Activity.

/*   java/[app]/[activity-name]Activity.java*/
...

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_[activity-name]);

        Toolbar toolbar = (Toolbar)findViewById(R.id.[activity-name]_toolbar);
        setSupportActionBar(toolbar);
    }

...

And now you are done. Next step is how to use Toolbar in settings screen in PreferenceActivity.