Get started with material Design,The Easy and Clear Way,Part-I

Hi Readers,This is Anu here.I am an android developer working on android platform from last 3 years.I love to learn and share knowledge.I have started this blog for sharing and learning new concepts.

So,Let's start with concept of Material Design for android Apps.

Here,I'll be covering three main points:

1.Material design and user experience
2.Implementation
3.Best material design apps(Part-II)

Material design and user experience

As we know,it is most important for an app to have an outstanding UI and UX to keep the user engaged till the end.To achieve this,Google has announced "Material Design" in 2014.Material design is a design language to give mobile apps a consistent    look and feel    with enhanced design aspects like depth effects(animations,elevation,ripple effect),textures,different layouts.So that,Your app can get a strong thematic quality and aesthetically pleasing interface.After all,Success majorly depends on number of eyeballs your app can grab.Now,lets get hands into material design.

There are lots of amazing things to achieve material design for your app.Following are the bunch of elements to make your app visually happening:

1.Palette API
2.Lists and Cards
3.Shadows(Z property) and Clipping Views
4.Curved motion and Circular reveal animation and touch feedback
5.Vector Drawables,animated vectors and tinting.

Implementation 

Palette API

A Palette object gives you access to the primary colors in an image, as well as the corresponding colors for overlaid text.

Setup

Add this line to your gradle:

compile 'com.android.support:palette-v7:25+'

Note: compileSdkVersion should match with dependency version.

Code

Instantiate palette:

 Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.logo);  
     Palette p = Palette.from(myBitmap).generate();  
  Palette.PaletteAsyncListener paletteListener = new Palette.PaletteAsyncListener() {  
       public void onGenerated(Palette palette) {  
         // access palette colors here  
       }  
     };  
 Palette.from(myBitmap).generate(paletteListener);  

Swatch is an object which gives color information of bitmap and text.

 Palette.Swatch swatch = p.getVibrantSwatch();  
 int titleTextColor=swatch.getTitleTextColor();  

Lists and Cards

Assuming that you are familiar with recycler view.

Add this to your build.gradle file:
    compile 'com.android.support:cardview-v7:26.0.0-alpha1'

Code:

 <android.support.v7.widget.CardView  
      xmlns:card_view="http://schemas.android.com/apk/res-auto"  
      xmlns:android="http://schemas.android.com/apk/res/android"  
      android:id="@+id/card_view"  
      android:layout_width="match_parent"  
      android:layout_height="match_parent"  
      card_view:cardCornerRadius="4dp"  
      android:layout_margin="5dp">  
    <RelativeLayout  
      android:layout_width="match_parent"  
      android:layout_height="match_parent">  
      <TextView  
        android:id="@+id/title"  
        android:layout_width="match_parent"  
        android:layout_height="20dp"  
        android:background="@color/bkg_card"  
        android:text="contact det"  
        android:gravity="center_vertical"  
        android:textColor="@android:color/white"  
        android:textSize="14dp"/>  
     <TextView  
       android:id="@+id/txtName"  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:text="Name"  
       android:gravity="center_vertical"  
       android:textSize="10dp"  
       android:layout_below="@id/title"  
       android:layout_marginTop="10dp"  
       android:layout_marginLeft="5dp"/>  
   </RelativeLayout>  
 </android.support.v7.widget.CardView>  

Other attributes:
By adding xmlns:card_view="http://schemas.android.com/apk/res-auto", you can define attributes like card_view:cardCornerRadius and card_view:cardElevation that are responsible for giving Material Design enabled Android apps their signature card-like look.

Shadows and Clipping Views

Shadows and animation effects were there from so long,but with material design shadows have been redefined beautifully.

Z-Factor or Z-property provides an advanced 3D shadows to the View objects.After X and Y properties,now we have Z-axis property i.e.Elevation property,it defines the height of view object and correspondingly shadows.Elevation property also defines the drawing order of object i.e.z index or z order.Views with higher z values appears elevated or higher than other views.




Clipping is needed when you want to change the shape of view to achieve consistency and symmetry with  other design elements.

android:clipToOutline attribute can be used to clip view to its outline area. Only rectangle, circle, and round rectangle outlines support clipping, as determined by the Outline.canClip() method.

Note:Clipping views is an expensive operation, so don't animate the shape you use to clip a view. To achieve this effect, use the Reveal Effect animation.

Thanks for reading.

Kindly follow the link below,For Part-II

Get started with material Design,The Easy and Clear Way,Part-II