This post provides a compressed tl;dr of the Android Material Design guide with Android Devices in Mind.
Raising Things
We need to raise view elements, which is essentially giving a shadow and emphasis to elements. Make use of the elevation attribute. As a short guide:
- app bar: 2dp
- floating button: 6dp
- card: 2dp
- anything raised: 2dp
- anything pressed: Add 6dp
<TextView
android:id="@+id/my_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/next"
android:background="@color/white"
android:elevation="5dp" />
Animations
We now need to reveal things and change screens in cool ways, check:
Colour
You can only use certain colours. List of colours you can use in Material Design. Which I think it a great idea, no more chopping and changing to match the clients requirements. Keeping it uniform, keeps it simple.
Know how to set the colour palette for you app.
How to Change the colour palette for Android Material Design
1. Set colours in res/values/colors.xml
<color name="primary">#2E7D32</color>
<color name="primary_dark">#1B5E20</color>
<color name="accent">#76FF03</color>
<color name="background">#37474F</color>
2. Set the style of the theme. This only works in versions higher than 20 so put it in a folder: res/values-v21/styles.xml:
<!-- your app branding color for the app bar -->
<item name="android:colorPrimary">@color/primary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="android:colorPrimaryDark">@color/primary_dark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="android:colorAccent">@color/accent</item>
<!-- text colour -->
<item name="android:textColor">@android:color/black</item>
<!-- Navigation Bar -->
<item name="android:navigationBarColor">@color/primary</item>
The end product will look something like this: