Android Material Design: Styles

In mobile application development, a lot of time is often spent stylizing interfaces to ensure they are both user-friendly and easy to program. However, this process has become more efficient with the introduction of a visual language that encapsulates the core principles of innovative design, saving significant time in styling. This is known as Material Design.

What is Material Design?

Material Design is a design language that provides structure, clear specifications, and vibrant colors and animations for the user interface of Android applications. It can be seen as a set of well-defined rules for creating striking, high-quality designs and interfaces.

Many applications are increasingly adopting this design philosophy due to its ability to deliver excellent results, and it’s no surprise that users find it highly appealing. While initially created for the Android version Lollipop, Material Design has also been successfully implemented on websites, receiving positive user feedback.

Material Design Compatibility and Integration

One of the key advantages of Material Design in Android is its backward compatibility. Even though it's available from API level 21 onwards, it can be integrated into lower levels using the appcompat_v7 support library. When starting a new project or updating an Android app’s interface, you need to add the build.gradle library to Android Studio:

This allows developers to begin updating their designs to align with Material Design standards.

Setting Up Material Design in Your Project

To apply Material Design styles, note that API 21 introduces changes to how Android styles are applied. You need to create a style file specifically for API level 21 within the values-21 directory.

The application’s base style should use the AppCompat reference. In this instance, we’ll apply a Light style without an ActionBar (which is replaced by ToolBar with a different implementation). Modify the styles.xml file in the values directory to set up the theme.

Make sure the theme is applied in your AndroidManifest.xml with the following value:

Color in Material Design

One of the main elements in Material Design is color, which has special documentation detailing its usage. There are three primary colors:

• colorPrimary: Used for the ToolBar and the main color of the app.
• colorAccent: Applied to highlight elements like action buttons, sliders, switches, or linked texts.
• colorPrimaryDark: The color of the notifications bar, which is only modifiable from Android Lollipop onwards.

Knowing these concepts, you can set up your app’s color scheme in colors.xml as follows:

Customizing Styles for API Level 21

As mentioned, API level 21 requires special handling. Within the values-21 directory, make changes to the styles.xml file:

• Use the previously created theme as the parent.
• Add the prefix "android" before each color name to call these colors specifically at the API 21 level.

After setting up the colors and themes, you can then add toolbars, buttons, text elements, and other components following Material Design guidelines to complete your application’s interface.

Implementing a basic Material Design theme in Android applications is straightforward and enhances the overall user interface. Many companies developing mobile applications are updating their apps using this methodology. Material Design is one of the major improvements introduced in API level 21, offering a fresh design that replaces the well-known Holo theme. It sets the foundation for modern Android design guidelines and breathes new life into user interfaces for mobile and tablet devices.

We recommend you this video