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

 

Leave a Reply

Your email address will not be published. Required fields are marked *

 

 

 

Theme by HermesThemes

Copyright © 2018 CoderzHeaven. All Rights Reserved

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.