Android Authority newsletter

The best way to stay connected to the Android pulse. Our main newsletter is the Android Weekly which is sent every Sunday and contains all the top Android news, reviews and features from the past week.

100% Privacy, No Spam Policy: We value privacy and your email address will be 100% secure. We hate spam just like you do and will never send you too much email, nor will we ever share your information with anyone.

Buy now!

Name:

Subject:

Message:

How to use Material Design in your Android apps

Material design is an important aspect of any UI because it makes apps compelling. We are visual beings and even though an app might have cool features, a poor the design will lead to users abandoning an app.

In this tutorial, we are going to look at some of the principles of material design that are key to an awesome design and in turn, make your application beautiful. We already know how to make different elements of Android come together to create an application, but material design adds beauty and elegance to your app.

In order to get started with material design, we need to apply the material design theme. In your styles file, add the following code.

Creating surfaces with Elevations

Material design layouts should conform to material design guidelines. Let’s see how we can create a layout for our App. Creating shadows in material design is made possible by using elevation. To set elevation in surfaces, we use the android: elevation attribute as shown below. Let’s create two surfaces each with different elevations.

Here we have two different surfaces that cast different shadows, one at 4 dp and the other at 8 dp. The higher the elevation, the more the shadow cast.

Implementing a Floating Action Button (FAB)

A FAB is a colored circular button that floats above the rest of your content in your app and is a way of promoting a primary action. This has the greatest elevation and thus floats above all the content. FABs have standard sizes and elevations, they come in either 40 or 56 dp diameters and an elevation of 6 dp though they may rise up to 12 dp when pressed.

So how do we implement floating buttons? Luckily Android Studio comes the Basic activity that has a built-in FAB element as shown below. However, it’s important to know how to implement it in case of an app that just needs upgrading.

Depending on your version of Android Studio, add the following dependencies to Build.gradle:

Our FAB has a normal size and an elevation of 6dp. The translationZ means that the button will rise to 12dp when pressed. Our FAB will elevate and show ripples when touched.

Scroll Events

Scrolling is another major aspect of material design that cannot be ignored. Many of the Google’s Material Design’s scrolling effects depend on the CoordinatorLayout design and there are several ways to implement.

Let’s see how we can implement WhatsApp like scrolling effect which uses the collapsing and expanding toolbar. First make sure you have the following dependency in your grade file: compile ‘com.android.support:design:26.0.0-alpha1’

Color and material design color palettes

Color and material design color palettesColor can be able to distinguish items, for example, it can tell if a fruit is ripe or not. It can also be used to direct our attention to something or simply imply hierarchy and structure of elements in an application. Material design encourages app developers to embrace purposeful uses of color to make applications easy to use.Material design provides a color tool and color pallets that make it fast and easy to design your UI.

Primary and secondary colors

A primary color is basically the color displayed most frequently in your screen and components. It is recommended to pick a primary color that represents your brand or personality. This color can be used in the app bar to make your application recognizable. You can also use different shades to provide contrast between elements.

A secondary color is used to accent different parts of your UI. This is a more saturated color designed to draw attention to a certain element, ie floating action buttons or a fab.Secondary colors are best used for:

Text fields, cursors, and text selection

Buttons, floating action buttons, and button text

Progress bars

Selection controls, buttons, and sliders

Links

Headlines

Color can also be used to create a hierarchy, For example, bright colored app bars make an applications to stand out. The example below shows how to use color and color pallets to create a contrast between elements.

Let’s implement our app using the color palettes provided by material design. The first thing we need to specify the colors we want to use in the color file as follows:

Implementing Lists.

The RecyclerView widget is used to create complex lists with material design.The Recycler widget is a more advanced version of the traditional ListView. The widget uses an adapter and a layout manager and it looks something like this: