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()); }} |