Material Design

 

 

Material Design:
This is a design with some supporting views and their properties introduced in Android 5.0 – Lollipop.

As part of Material design, we work with

1) ToolBar
2) FloatingActionButton
3) SnackBar
4) TextInputLayout
5) Recycler View
6) CardView
|
|
|
|
|

Steps to implement Material Design:

To work with Material design,

1) Set up the theme and set it to Application in Manifest. To setup this one, we have different parts of the app with its property names.

Diagram

colorPrimaryDark – This is darkest primary color of the app mainly applies to notification bar background.

colorPrimary – This is the primary color of the app. This color will be applied as toolbar background.

textColorPrimary – This is the primary color of text. This applies to toolbar title.

windowBackground – This is the default background color of the app.

navigationBarColor – This color defines the background color of footer navigation bar.

Create a theme in styles.xml as mentioned below
<style name=”AppTheme” parent=”Theme.AppCompat.Light.DarkActionBar”>
<item name=”colorPrimary”>@color/colorPrimary</item>
<item name=”colorPrimaryDark”>@color/colorPrimaryDark</item>
<item name=”colorAccent”>@color/colorAccent</item>
<item name=”windowNoTitle”>true</item>
<item name=”windowActionBar”>false</item>
</style>

Set the theme in <application> in Androidmanifest.xml as mentioned below

<application
………
………
………
android:theme=”@style/AppTheme”/>

 

2) Take CoordnatorLayout as parent layout in XML to support Material Design efficiently
3) Take AppBarLayout as the direct child to CoordnatorLayout
4) Take ToolBar as direct child to AppBarLayout and set some properties like background, theme…
5) Close AppBarLayout and take one ViewGroup bottom to AppBarLayout to set the screen content. Set marginTop of this ViewGroup as height of Actionbar

<?xml version=”1.0″ encoding=”utf-8″?>
<android.support.design.widget.CoordinatorLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:app=”http://schemas.android.com/apk/res-auto”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:id=”@+id/coordinatorLayout”
android:layout_height=”match_parent”
tools:context=”nareshit.com.materialdesign9am.MainActivity”>

<android.support.design.widget.AppBarLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”>

<android.support.v7.widget.Toolbar
android:id=”@+id/toolbar”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:popupTheme=”@style/ThemeOverlay.AppCompat.Light”
android:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar” />
</android.support.design.widget.AppBarLayout>

<LinearLayout
android:id=”@+id/linearLayout”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_marginTop=”?actionBarSize”
android:orientation=”vertical”>

// ALl the contents of the screen go here

</LinearLayout>

</android.support.design.widget.CoordinatorLayout>

 

Toolbar:
Toolbar is the replacement for default actionbar. This is used to set as Actionbar to support backward version compatibility. In the above xml, we have created a toolbar. To set it as actionbar,

In Activity,

1)Identify Toolbar
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
2) Set as support actionbar
setSupportActionBar(toolbar);

Now, the toolbar gets all the properties of Actionbar.

Note: While using Toolbar as Actionbar, ensure that the default actionbar is disabled in theme applied for particular activity or application.

 

FloatingActionButton:
This is a rounded button with one icon inside. It has different sizes like normal, mini. We set the size of fab by using fabType. This is a normal button. We have used this in the above xml.

In Activity,

1)Identify FloatingActionButton
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.floatingActionButton);
2)Set onClickListener
fab.setOnClickListener(new View.OnClickListener(){
public void onClick(View v){
// Code to perform on fab click
}
});

 

Snackbar:
This is like a Toast message with some action. Action is represented using a button in Snackbar. It requires object of parent layout of XML to show.

Ex: Identify parent layout first

CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);

Create Snackbar

final Snackbar snackbar = Snackbar.make(coordinatorLayout, “Some text”, Snackbar.LENGTH_LONG);
snackbar.setAction(“DISMISS”, new View.OnClickListener() {
@Override
public void onClick(View v) {
snackbar.dismiss();
}
});
snackbar.show();

 

TextInputLayout:
Sometimes, we design EditTexts with only hints. Whenever user starts typing, the hint disappears. It can cause some confusion. To avoid this, we have a view called TextInputLayout in Material design. Every edittext is enclosed with TextInputLayout here.

Ex:

<android.support.design.widget.TextInputLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”>

<EditText
android:id=”@+id/textName”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:hint=”Enter Name” />
</android.support.design.widget.TextInputLayout>