How to Material Design in Android

Material design was the talk of the Android town, when it first made it appearance. Such an appealing look expanding upon the card view design that debuted in Google products list.

The features it gives such as animations, transitions, elevations, lighting, and shadows is still recommended by designers who opt to choose third party plugins.

In this article, we shall see how we can implement Material design, the design that provides beauty and style to your application.


1. At first, we need to set the material design theme


The first step in the design is to change the theme of your app to Material.

Open up your styles.xml file, and add the below lines of code.


2. Elevations and Shadows

There are more than one ways of creating shadows to UI objects in XML, like using layer-list, 9-patch image as background etc,. But still, material design team suggests designers to design layouts confirming to the material design guidelines.

The option they provide for view shadows is ‘elevation’. To use the feature we have to use the android: elevation attribute to the specific view in our layout.

The more the elevation, the more the shadow would be.

For example,


In the above layout, we have two buttons where the elevation of first button is 30dp, and the elevation of second is 60dp. The second button will be having twice the elevation of button one and the amount of shade would be also twice for second button.


3. Scroll Events

Google has provided another major feature with the material design. The scroll events they provide depend mainly on the CoordinatorLayout structure.

Now let us make some scrolling effect.

 First, add the support design dependency to your gradle


Now design the xml part.


In your java class, connect the Id’s like this,


4. Material Design Lists

When we need to design a list or card, we use RecyclerView. The Recycler with waterial design is a more improved version of the existing ListView.


In the java class, we use an adapter that helps display the content from the defined layout manager.

Leave a Reply

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