Android Toolbar – Material Design Tutorial -1

Android Toolbar was introduced with Android Lollipop (API 21) .Toolbar can be used as a replacement for for android ActionBar. Toolbar was designed for Lollipop devices, but we can use it on Pre-Lollipop devices using google’s AppCompat library. android.support.v7.widget.Toolbar class is used to implement ToolBar in this library.

Why Should you use Toolbar ?
– Implemented following Material Design
– You can have multiple Toolbars ( We can say toolbar is an ActionBar with more control on it. We can use toolbar as like other “view” s. We can create one toolbar at bottom or one more as floating Toolbar ( like google maps). Also we can use two different menu on two different toolbars )

– You can add more custom views into your toolbar , Also since it is actually a “View”  object, we can do any other things that can be done to a normal “view” object. Like we can show/hide it anytime we want or we can change its color dynamically ( this is we are going to discuss in this example) etc.

toolbar

1) Create one application in Android Studio

2) Add appcompat as gradle dependency

dependencies {
compile 'com.android.support:appcompat-v7:23.1.1'
}

3) Create color.xml file inside ‘values’ folder

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#FF5722</color>
    <color name="colorPrimaryDark">#E64A19</color>
</resources>

4) Disable ActionBar in the Application Theme (inside values/styles.xml) :

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    </style>
</resources>

5) Create one file toolbar.xml inside “layout” folder

<?xml version="1.0" encoding="utf-8"?>    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"     
android:layout_width="match_parent"     
android:layout_height="wrap_content"     
android:background="@color/colorPrimary"     
android:elevation="4dp"     
/>

6) Change your activity_main.xml layout :

<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="match_parent"
    tools:context=".MainActivity">
    <include
        android:id="@+id/tool_bar"
        layout="@layout/tool_bar"
        ></include>
</RelativeLayout>

7) Finally add this toolbar as actionbar in your MainActivity :

 private Toolbar toolbar;   
 toolbar = (Toolbar) findViewById(R.id.tool_bar);
 setSupportActionBar(toolbar);

8) Update your MainActivity.java file as below :

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Toolbar toolbar;
    private Button button;
    private Window window;
    private int i = 1;

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

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

        button = (Button) findViewById(R.id.button);
        window = this.getWindow();

        if (android.os.Build.VERSION.SDK_INT > 18) {
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }

        if (android.os.Build.VERSION.SDK_INT > 20) {
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        }

        button.setOnClickListener(this);

    }

    @Override
    public void onClick(View view) {
        switch (i) {
            case 0:
                toolbar.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
                if (android.os.Build.VERSION.SDK_INT > 20) {
                    window.setStatusBarColor(getApplicationContext().getResources().getColor(R.color.colorPrimaryDark));
                }
                break;
            case 1:
                toolbar.setBackgroundColor(getResources().getColor(R.color.redNormal));
                if (android.os.Build.VERSION.SDK_INT > 20) {
                    window.setStatusBarColor(getApplicationContext().getResources().getColor(R.color.redDark));
                }
                break;
            case 2:
                toolbar.setBackgroundColor(getResources().getColor(R.color.tealNormal));
                if (android.os.Build.VERSION.SDK_INT > 20) {
                    window.setStatusBarColor(getApplicationContext().getResources().getColor(R.color.tealDark));
                }
                break;
        }
        i++;
        i = i % 3;
    }
}

it will change your toolbar color on each click.

Notes :
If you want to change toolbar text colors to light , use this theme inside toolbar layout :
android:theme="@style/ThemeOverlay.AppCompat.Dark"
-Similarly if you want your popup theme as light , use this :
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

This Project is shared on github. You can clone it from here.

2 Replies to “Android Toolbar – Material Design Tutorial -1”

  1. Hi Nadan, you are doing a great job… your tutorials are extremely nice and clean. I am just a beginner in Android, so could I request you to write more tutorials for beginner level but please forget to make project based tutorials? So they will be interesting.

    1. Thanks Bablu .. I am writing more tutorials on Android , will publish soon… 🙂

Leave a Reply