This document provides instructions for setting up a Material Design theme in an Android application. It describes how to use AppCompat for backward compatibility, define color palettes, customize the app bar and toolbar, add a second activity with navigation options, and enable the home button to navigate between activities according to Material Design conventions.

1. Android Material Design
01 Material Theme
+Anuchit Chalothorn
anuchit@redlinesoft.net

2. Start with blank activity
● Create new Android project use API 20
● Start with blank activity
● Use appcompat to backward compatible to old
version
● Customized basic theme

3. Use appcompat-v7
Add dependencies to gradle
compile 'com.android.support:appcompat-v7:21.0.3'

4. Use ActionBarActivity
Use ActionBarActivity for your main activity
public class MainActivity extends ActionBarActivity {
...
}

5. Use Theme AppCompat
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
</style>
Change style.xml to use them appcompat

6. Use Theme AppCompat
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
</style>
Change style-v21.xml to use AppTheme.Base

7. Android 4.x Android 5.x

8. Color Palette
Use material design
color palette spec
choose color palette
which match to your
activity.

9. Color Palette

10. Customized AppBar
Define color.xml resources
and use in style

11. Color palette
<!-- Indigo 500 -->
<color name="colorPrimary">#3F51B5</color>
<!-- Indigo 700 -->
<color name="colorPrimaryDark">#303F9F</color>
<!-- Indigo 50 -->
<color name="accentColor">#E8EAF6</color>
define colors.xml

12. Customized color
<style name="AppTheme.Base" parent=" Theme.AppCompat.Light.DarkActionBar">
<item name=" colorPrimary">@color/colorPrimary</item>
<item name=" colorPrimaryDark">@color/colorPrimaryDark</item>
<item name=" colorAccent">@color/colorAccent</item>
</style>
Add customized color to style.xml

13. Customized color
<style name="AppTheme" parent="AppTheme.Base">
<item name=" android:colorPrimary">@color/colorPrimary</item>
<item name=" android:colorPrimaryDark">@color/colorPrimaryDark</item>
<item name=" android:colorAccent">@color/colorAccent</item>
</style>
Add customized color to style-v21.xml

14. Android 4.x Android 5.x

15. Setup AppBar
● Use Theme.AppCompat.Light.NoActionBar
● Define app_bar.xml for ToolBar
● Use <include> in your layout.xml to add ToolBar
● Instantiate the ToolBar using findViewById inside activity
● Call setSupportActionBar and pass your ToolBar object
inside
● Customize app:theme and app:popupTheme

16. Mobile Structure

17. Tablet Structure

18. Full width default height AppBar

19. Full width extended height AppBar

20. Column-width toolbars at multiple levels of hierarchy

21. Flexible toolbar and card toolbar

22. Floating toolbar

23. AppBar

24. Metric & Keylines

25. Metric & Keylines

26. Metric & Keylines

27. Metric & Keylines

28. Menu

29. Hide ActionBar
<style name="AppTheme.Base" parent=" Theme.AppCompat.Light.NoActionBar">
<item name=" colorPrimary">@color/colorPrimary</item>
<item name=" colorPrimaryDark">@color/colorPrimaryDark</item>
</style>
Hide ActionBar using theme with NoActionBar

31. AppBar layout
<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:background="@color/colorPrimary>
</android.support.v7.widget.Toolbar>
Create new app_bar.xml for AppBar layout

32. Use Toolbar instate of ActionBar
<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">
Remove all default padding in main activity

33. Use Toolbar instate of ActionBar
<include
android:id="@+id/app_bar"
layout="@layout/app_bar"/>
<TextView
android:layout_below="@+id/app_bar"
android:text="@string/hello_world"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Include app_bar layout

34. Use Toolbar instate of ActionBar
private Toolbar toolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(toolbar);
}
Instantiate new AppBar using toolbar

35. Customize theme for AppBar
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:theme="@style/Theme.AppCompat"
app:popupTheme="@style/Theme.AppCompat.Light">
</android.support.v7.widget.Toolbar>
Add customize theme for app_bar.xml

38. Second Activity
● Add second activity
● Add menu in AppBar intent to second activity
● Enable home button to return to main activity

39. Include AppBar layout
<include
android:id="@+id/app_bar"
layout="@layout/app_bar"/>
<TextView
android:layout_below="@+id/app_bar"
android:text="@string/hello_world"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Include app_bar layout to sub activity

40. Menu in AppBar
Add menu in AppBar
<item android:id="@+id/action_subactivity"
android:title="@string/action_subactivity"
android:icon="@drawable/ic_subactivity"
android:orderInCategory="100"
app:showAsAction="always"/>

41. Add action to activity menu
if (id==R.id.action_subactivity) {
startActivity(new Intent(this,SubActivity.class));
}
Add action to onOptionsItemSelected()

42. Include AppBar layout
instantiate toolbar in sub activity
private Toolbar toolbar;
protected void onCreate(Bundle savedInstanceState) {
...
toolbar = (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(toolbar);
...
}

44. Enable Home button
private Toolbar toolbar;
protected void onCreate(Bundle savedInstanceState) {
...
toolbar = (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(toolbar);
// display home button
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
Enable home button

46. Enable Home Button
if (id=R.id.home) {
NavUtils.navigateUpFromSameTask(this);
}
Add action to home button onOptionsItemSelected()

47. Enable Home Button
<activity
android:name="net.redlinesoft.materialdesign.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>
Change name in main activity to full package name

48. Enable Home Button
<activity
android:name="net.redlinesoft.materialdesign.SubActivity"
android:label="@string/title_activity_sub">
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value="net.redlinesoft.materialdesign.MainActivity" />
</activity>
Set meta-data to identify parent activity

50. Reference
● Material Design spec
● Color palette
● Metric & Keylines

51. Licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Thank You