Visitors Now:
Total Visits:
Total Stories:
Profile image
By Rosina De Palma
Contributor profile | More stories
Story Views

Now:
Last Hour:
Last 24 Hours:
Total:

Implementing Material Design Components in Android

Tuesday, October 4, 2016 23:48
% of readers think this story is Fact. Add your two cents.

(Before It's News)

Material design has been introduced in Android 5.0. One can create good design in the app using material design. It is implemented using design library introduced by Google from Android. 5.0 ( Lollipop). You can follow the guidelines and the properties of the material design in the official Android developer Guide.

This post is going to cover few of the components of material design. Let’s start with the components of material design in Android.

Add in build.gradle:

<pre  style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;background-image:URL(http://2.bp.blogspot.com/_z5ltvMQPaa8/SjJXr_U2YBI/AAAAAAAAAAM/46OqEP32CJ8/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;"> dependencies {  
   compile fileTree(include: ['*.jar'], dir: 'libs')  
   testCompile 'junit:junit:4.12'  
   compile 'com.android.support:appcompat-v7:X.X.X'  
   compile 'com.android.support:design:24.X.X'  
   compile 'com.android.support:support-v13:X.X.X'  
 }  
</code></pre>

1.    Buttons


Buttons are of 3 types in Android i.e Flat, Raise and Floating button which are as mentioned below :

  • Flat

    Flat buttons doesn’t have background. Button has only text. You can apply ripple effect on pressing the button. It’s mostly used in toolbars, dialogs or inlines.

In layout folder:

<pre  style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;background-image:URL(http://2.bp.blogspot.com/_z5ltvMQPaa8/SjJXr_U2YBI/AAAAAAAAAAM/46OqEP32CJ8/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;">  &lt;Button  
     android:id="@+id/btnRaised"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:text="Raised Button"  
     android:theme="@style/RaisedButton" /&gt;  
</code></pre>

  • Style :

<pre  style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;background-image:URL(http://2.bp.blogspot.com/_z5ltvMQPaa8/SjJXr_U2YBI/AAAAAAAAAAM/46OqEP32CJ8/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;">  &lt;style name="RaisedButton" parent="Theme.AppCompat.Light"&gt;  
     &lt;item name="colorControlHighlight"&gt;@android:color/holo_purple&lt;/item&gt;  
     &lt;item name="colorButtonNormal"&gt;@android:color/holo_orange_light&lt;/item&gt;  
   &lt;/style&gt;  
</code></pre>

  • Raised

    It is rectangular shaped button. It’s raised button with background color. You can change the background color on button press.

In layout folder:

<pre  style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;background-image:URL(http://2.bp.blogspot.com/_z5ltvMQPaa8/SjJXr_U2YBI/AAAAAAAAAAM/46OqEP32CJ8/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;">  &lt;Button  
     android:id="@+id/btnRaised"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:text="Raised Button"  
     android:theme="@style/RaisedButton" /&gt;  
</code></pre>

Style :

<pre  style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;background-image:URL(http://2.bp.blogspot.com/_z5ltvMQPaa8/SjJXr_U2YBI/AAAAAAAAAAM/46OqEP32CJ8/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;">  &lt;style name="RaisedButton" parent="Theme.AppCompat.Light"&gt;  
     &lt;item name="colorControlHighlight"&gt;@android:color/holo_purple&lt;/item&gt;  
     &lt;item name="colorButtonNormal"&gt;@android:color/holo_orange_light&lt;/item&gt;  
   &lt;/style&gt;  
</code></pre>

  • Floating

              Floating buttons are action button which are circular in shape. It is generally on the right bottom corner of the screen to perform quick actions. You can change the background and shape of the buttons with properties.

In layout folder:

<pre  style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;background-image:URL(http://2.bp.blogspot.com/_z5ltvMQPaa8/SjJXr_U2YBI/AAAAAAAAAAM/46OqEP32CJ8/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;"> &lt;android.support.design.widget.FloatingActionButton  
   android:layout_width="wrap_content"  
   android:layout_height="wrap_content"  
   app:fabSize="mini"  
   android:theme="@style/FloatingButton"  
   app:rippleColor="@android:color/darker_gray"  
   android:src="@mipmap/ic_call"  
   /&gt;  
</code></pre>

Style :

<pre  style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;background-image:URL(http://2.bp.blogspot.com/_z5ltvMQPaa8/SjJXr_U2YBI/AAAAAAAAAAM/46OqEP32CJ8/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;">  &lt;style name="FloatingButton" parent="Theme.AppCompat.Light"&gt;  
     &lt;item name="colorAccent"&gt;@android:color/holo_purple&lt;/item&gt;  
   &lt;/style&gt;  
</code></pre>

2.     Bottom Sheets

Bottom sheets basically slides from bottom to the top. BottomSheetBehavior class is used for creating bottom sheets. It contains child layout and child layout contains the content which is to be shown on expanded and collapsed view.. The different states of Bottomsheets are as follows :

 - STATE_COLLAPSED
 - STATE_DRAGGING
 - STATE_EXPANDED
 - STATE_HIDDEN
 - STATE_SETTLING

In layout folder:

<pre  style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;background-image:URL(http://2.bp.blogspot.com/_z5ltvMQPaa8/SjJXr_U2YBI/AAAAAAAAAAM/46OqEP32CJ8/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;"> &lt;?xml version="1.0" encoding="utf-8"?&gt;  
 &lt;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:layout_height="match_parent"  
   android:fitsSystemWindows="true"  
   &gt;  
   &lt;!-- Bottom Sheet Content --&gt;  
   &lt;include layout="@layout/bottom_sheets_layout" /&gt;  
 &lt;/android.support.design.widget.CoordinatorLayout&gt;  
</code></pre>

3.    DialogBox

  • Alert
  • Confirmation

4.    Selection Components

  • Radio Button
  • Checkbox

Author Bio:

This article has been written by Rosina De Palma who is a technical writer at Nex Mobility. She writes articles especially for Lates mobile app development and technology trends. She describe here how to implement material design in android app development. All codes describes here os tested by android developers at Nex Mobility.

Report abuse

Comments

Your Comments
Question   Razz  Sad   Evil  Exclaim  Smile  Redface  Biggrin  Surprised  Eek   Confused   Cool  LOL   Mad   Twisted  Rolleyes   Wink  Idea  Arrow  Neutral  Cry   Mr. Green

Top Stories
Recent Stories

Register

Newsletter

Email this story
Email this story

If you really want to ban this commenter, please write down the reason:

If you really want to disable all recommended stories, click on OK button. After that, you will be redirect to your options page.