Android Toolbar Material Design

Android lollipop 5.0 introduced Material Design which was Released in June 25 2015. In Material Design lot of new things were introduced like Material Theme, new widgets, custom shadows, vector drawables and custom animations. If you haven’t working on Material Design yet, this tutorial will give you a good start.

How to add Toolbar (Action Bar) Material Design with step by step.

Notice-

ActionBars are replaced by Toolbar, we are going to make a Toolbar so go to your style.xml and change the theme to "Theme.AppCompat.Light.NoActionBar, This helps us get rid of the ActionBar so we can make a App bar.

if you don't have to add a compiled dependency of Appcombat v7 21 then please make sure you add the line below in your gradel build dependencies.

dependencies {

compile 'com.android.support:appcompat-v7:23.0.1'

}

How to Use Step by Step:-

1.Material Design color customization.

Now lets talk about basic color scheme of Material Design, right now we are just dealing we App bar so we would talk about colorPrimary, colorPrimaryDark and textColorPrimary.

colorPrimary use for color of actionbar(Toolbar)
colorPrimaryDark use for status bar
testColorPrimary use for text on app name on actionbar(Toolbar)
windowBackground use for background of layout
navigationBarColor ues for bottom of snavigation

Color palette For Android material Design
http://goo.gl/Vb0QcQ

create color.xml

first open res->values then open or create color.xml and add this color attributes.

Ex.

<color name="colorPrimary">#00BCD4</color>
<color name="colorPrimaryDark">#00838F</color>
<color name="textColorPrimary">#FFFFFF</color>
<color name="windowBackground">#FFFFFF</color>
<color name="navigationBarColor">#000000</color>

By the use if screen shot describe blow

2.Create Theme for Material Design.

first open res->values then open styles.xml and add this style attributes.

Ex.
<style name="TestMaterialTheme" parent="MyMaterialTheme.Base">
</style>
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>

3.After creating theme then it add on AndroidManifest xml file.

AndroidManifest.xml

Ex.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="info.androidhive.materialdesign" >

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/TestMaterialTheme" >
<activity
android:name=".activity.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

4.Create toolbar layout.

create toolbar xml seperate file for all screen layout.

res->layout->toolbar.xml

Ex.


<?xml version="1.0" encoding="utf-8"?>


<android.support.v7.widget.Toolbar 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

5.Add Toolbar in Your layout.

add toolbar on your layout whenever you want by the user of include tage.

Ex.

<LinearLayout
android:id="@+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="@+id/toolbar"layout="@layout/toolbar" />
</LinearLayout>

6. add Toolbar on java class.

Ex.

public class MainActivity extends AppCompatActivity {
private Toolbar mToolbar;

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

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

}
}

7.After all look like this :-

Output