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.

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

Create one application in Android Studio

2) Add appcompat as gradle dependency

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

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>

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>

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>

Finally add this toolbar as actionbar in your MainActivity :

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

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.

Updated on 5 Jul 2020

Journey with Code and DesignCodeVsColor on Twitter About
Privacy Policy
T&C
Contact

CodeVsColor

Android Toolbar - Material Design Tutorial -1

Why Should you use Toolbar ?

Notes :