How To Make Material Design Actionbar/Toolbar In 7 Simple Steps.

Step 1.

Open Android Studio and create a new project and select a blank activity.

Step 2.

Add Appcombat v7 Support library to your project or not if already.

Step 3.

Make new resources file "colors.xml", clear  it and add these to it.
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <color name="ColorPrimary">#FF5722</color>
  4.     <color name="ColorPrimaryDark">#E64A19</color>
  5. </resources>

Step 4.

Open "style.xml", clear it and add these to it.
  1. <resources>
  2.     <item name="colorPrimary">@color/ColorPrimary</item>
  3.         <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
  4.     <!-- Base application theme. -->
  5.     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  6.         <item name="colorPrimary">@color/ColorPrimary</item>
  7.         <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
  8.         <!-- Customize your theme here. -->
  9.     </style>
  10. </resources>

Step 5.

Make a new layout "toolbar.xml", clear it and add these to it.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content"
  5.     android:elevation="4dp"
  6.     android:background="#ff404040">
  7. </android.support.v7.widget.Toolbar>

Step 6.

On your "activity_main.xml" clear all and add these.
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     tools:context=".MainActivity">

  6.     <include
  7.         android:id="@+id/toolbar"
  8.         layout="@layout/toolbar"/>

  9.     <RelativeLayout
  10.         android:layout_width="fill_parent"
  11.         android:layout_height="fill_parent"
  12.         android:layout_alignParentLeft="true"
  13.         android:layout_alignParentStart="true"
  14.         android:layout_below="@+id/toolbar"
  15.         android:layout_alignParentRight="true"
  16.         android:layout_alignParentEnd="true"
  17.         android:layout_alignParentBottom="true"
  18.         android:paddingLeft="@dimen/activity_horizontal_margin"
  19.         android:paddingTop="@dimen/activity_vertical_margin"
  20.         android:paddingRight="@dimen/activity_horizontal_margin"
  21.         android:paddingBottom="@dimen/activity_vertical_margin">

  22.         <TextView
  23.             android:layout_width="wrap_content"
  24.             android:layout_height="wrap_content"
  25.             android:text="@string/hello_world" />

  26.     </RelativeLayout>

  27. </RelativeLayout>
Note : Don't Use Padding In Layout That Holds Toolbar.

Step 7.

Open "MainActivity.java" and add these in onCreate.
  1. Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
  2. setSupportActionBar(toolbar);
NOTE : If Needed Import android.support.v7.widget.Toolbar Class.

Finally.

Run your application.


Comments

Popular posts from this blog

How To Make Android Toolbar Elevation Working On Pre-Lollipop Devices