I’m demonstrating the use of a material design in Android Studio. If you are using Eclipse, follow the same steps to get started. Create a new Project in Android Studio. The name of your application should be set to MaterialDesign, the package name should be set to com.techlovejump.materialdesign, and the minimum SDK should be set to API 14 (Android 4.0). Do not choose any predefined activity.

no activity

How can I get started with a material design in Android?

You just need to add the material theme to your Android application to get started. You can then follow the guidelines given by Google. The material theme is added in API 21 (Android 5.0).

How can I support using a material design on older Android versions?

Android provides support libraries whenever they introduce the latest API’s. This also facilitates the support of new features in old Android versions. For supporting a material design in older versions, they have provided the appcompact v21 library. So we use appcompact v21 to implement a material design in older versions. The themes must inherit Theme.appcompact to support a toolbar or an actionbar.

Supporting an Android material design on older versions of Android

Step #1. Add a Compile Dependency

On completion of the initial setup, go to build.gradle which is located inside the Gradle Scripts in Android Studio. Make sure you have the code similar to the lines given below. The appcompat v7 library has been upgraded to support material design. So, add a compile dependency for appcompat. If it’s already added then leave it as is. Appcompat provides support for previous versions of the Android OS.

gradle build

Make sure you rebuild the project once you change the Gradle Scripts. To rebuild your project in Android Studio, you need to go to the Build menu and click the Rebuild Project option.

Step #2. Add a theme

We do not need to use the old action bar. A material design provides a toolbar which handles all functions similar to an action bar. So, it’s now recommended to use a toolbar. Next, we need to change the theme name. Go to res->values->Style.xml. Make sure you change the theme parent name to Theme.AppCompat.Light. It will help support the toolbar/actionbar.

Adding Actionbar or Toolbar

You can create an action bar by using two different methods. One is by using the action bar which comes with your theme. The second way is by implementing a toolbar which is a new viewgroup. In this material design example, I will add an action bar (which comes with Theme.AppCompat).

The toolbar is a new widget that was introduced in API 21. It’s a more generalized version of an action bar. You can learn more about it by reading Android toolbar tutorial.

Adding an Actionbar

Create a new activity (main activity) for your material design Android application. Make sure your main activity extends ActionBarActivity. This will add an action bar to your activity. Below you can find the complete code of my main activity.

The Android Material Design Specification

One of the specifications of material design says that a popup should hide the icon behind it. You can see the effect in the screenshot given below. The icon is hidden behind the popup window. Below you can find the screenshot of our new Android material design application.

material design

You can read more about the material design on the official website.

We have built a basic “Hello World” application using an Android material design. Feel free to post your suggestions or queries. Thank You for reading.