Add this depency to your build.gradle
compile ‘com.android.support:appcompat-v7:23.1.1’
In this tutorial, we will learn some basics of Material Design Development
1. Adding the Toolbar (ActionBar) to your application.
2. create a layout for ActionBar and include it in your Activity’s Layout
3. change your styles.xml to add a custom toolbar and set parent Theme as Theme.AppCompat.Light.NoActionBar as described below:-
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
</resources>
4. Now Create a layout for ActionBar
bar_layout.xml
<?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:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:id="@+id/toolbar"
/>
5. Include this ActionBar layout in MainActivity’s 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" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
<include
android:id="@+id/toolbar"
layout="@layout/bar_layout"
/>
</RelativeLayout>
6. ActionBar items can be added by adding in menu_main.xml and there click can be handled by onOptionsItemSelected() method of MainActivity.java
7. Finally add ActionBar in MainActivity.java as Follows
MainActivity.java
package com.coderzpassion.recyclesample;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar=(Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
@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;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
2. Customization of Material Design Theme
- Materials design provides several attributes to change the color of theme.Lets take at look at them.
- colorPrimaryDark– This is the darkest primary color mainly applies to Notification Bar Background.
- colorPrimary- This is the Primary color which applies to toolbar(ActionBar) background.
- textColorPrimary- This is color of text which applies to toolbar title.
- windowBackground- This is background color of the application.
- navigationBarColor– This color is background footer of softbuttons.
Let’s Define Colors for Material Theme
1. Open res->values->colors.xml. if u don’nt have colors.xml, create one with colors.xml name.
2. Define Following Colors along with their name as follows.
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#537CED</color>
<color name="colorPrimaryDark">#1410FB</color>
<color name="textColorPrimary">#000000</color>
<color name="windowBackground">#5B5F69</color>
<color name="navigationBarColor">#000000</color>
</resources>
3. Now Create theme in styles.xml from res->values->styles.xml to use these colors.
styles.xml
<resources>
<style name="CustomMaterialTheme" parent="CustomMaterialTheme.Base">
</style>
<style name="CustomMaterialTheme.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>
<item name="android:textColorPrimary">@color/textColorPrimary</item>
<item name="android:windowBackground">@color/windowBackground</item>
</style>
</resources>
4. For Creating designs specifically for Android Lollipop create a folder named values-v21 under res->values-v21. Under values-v21 create styles.xml as follows
styles.xml
<resources>
<style name="CustomMaterialTheme" parent="CustomMaterialTheme.Base">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
<item name="android:windowSharedElementExitTransition">@android:transition/move</item>
</style>
</resources>
5. Now we are done with creating Custom Material Theme. Now set the theme to application in AndroidMainfest as follows.
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.coderzpassion.recyclesample" >
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/CustomMaterialTheme" >
<activity
android:name=".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>