Starting with Material Design in Android – Volume 1

1. To create apps with material design:

• Review the material design specification.
• Apply the material theme to your app.
• Create your layouts following material design guidelines.
• Specify the elevation of your views to cast shadows.
• Use system widgets for lists and cards.
• Customize the animations in your app.

2. Apply the Material Theme

To apply the material theme in your app, specify a style that inherits from android:Theme.Material:

<!-- res/values/styles.xml -->
<resources>
  <!-- your theme inherits from the material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- theme customizations -->
  </style>
</resources>

Now we will start with a simple application which shows how to apply Elevation to Views and Activity Transitions.

Below is a sample layout.

<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:background="@android:color/white"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.coderzheaven.meterialdesigndemo.MainActivity" >

    <TextView
        android:id="@+id/my_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_margin="20dp"
        android:background="@android:color/darker_gray"
        android:elevation="25dp"
        android:textSize="30sp"
        android:text="Hello" />

    <Button
        android:id="@+id/my_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/my_textview"
        android:background="?android:attr/android:colorControlHighlight"
        android:elevation="20dp"
        android:text="Click" />

</RelativeLayout>

Now we will add this layout to the Activity and apply some transitions.

package com.coderzheaven.meterialdesigndemo;

import android.app.Activity;
import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.transition.Explode;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {

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

		Button btn = (Button) findViewById(R.id.my_btn);
		btn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				onButtonClicked();
			}
		});
	}

	@SuppressWarnings("unchecked")
	public void onButtonClicked() {
		getWindow().setExitTransition(new Explode());
		Intent intent = new Intent(this, MainActivity.class);
		startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
	}
}