Android Material Design Tutorial/Example
Android Material Design was Introduced in Android Lollipop version. With Material Design Material theme, new widgets, new buttons like floating button and new animations are introduced.
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
- Adding the Toolbar (ActionBar) to your application.
2. create 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 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); } }
Output
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
- Open res->values->colors.xml. if u don’nt have colors.xml, create one with colors.xml name.
- 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>
Output