Android Toolbar Material design Example

Android Actionbar is now officially deprecated, from Lollipop onward use Toolbar as standard in designing the apps & Google has provided the support to previous versions of using V7 appcompat library.

The advantages of Toolbar are flexible, easy to add & highly customizable. below example is implemented using appcompat lib

Android Lollipop Toolbar

1) Create a layout using ‘android.support.v7.widget.Toolbar‘, make this as child of Relative layout as shown below.

layout/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="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/sample_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#ff5fb71a"/>

    <TextView
        android:text="Use this space to update text"
        android:layout_below="@+id/sample_toolbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

2) Set style as No Actionbar for AppCompat theme like below.
values/Styles.xml

<resources>

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

</resources>

3) Add V7 app compat dependency lib in gradle file,

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

}

4) Since actionbaractivity is deprecated, inherit activity using AppCompatActivity & set the view, get the Tool bar object & set it as support actionbar. For lollipop menu look refer below code

Android Tool bar menu

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.sample_toolbar);
        setSupportActionBar(toolbar);

        getSupportActionBar().setTitle("New Tool bar"); //set the custom title

    }

    @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;
    }

5) Customizing the toolbar by alerting width, height, add textview, images etc as per your wish. For example.

Customized Android Toolbar

<android.support.v7.widget.Toolbar
        android:id="@+id/sample_toolbar"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#ff5fb71a">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height = "wrap_content"
            android:orientation="vertical">

        <TextView
            android:text="example@gmail.com"
            android:layout_width="wrap_content"
            android:textSize = "25sp"
            android:textColor = "#ffffff"
            android:layout_height="wrap_content" />

        <TextView
            android:text="Username"
            android:textSize = "15sp"
            android:textColor = "#ffffff"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        </LinearLayout>

        </android.support.v7.widget.Toolbar>