App Development

Deep Dive into Material Theming

Harin Trivedi

May 02, 2019

With Google I/O 2019 fast approaching, developers around the world anticipate new acts on one of the world’s biggest (and most popular) tech stages.

During last year’s presentation, there was a lot of news and discussion around Material Design Components. This took design implementation to the next level–making design easier for the developer community.

**Ref**: https://material.io/design/material-studies/

Designed for Android, iOS, Web and Flutter frameworks, the material component library is a universal tool. But there are specific considerations around Material Theming and how to use it in Android.

By definition, Material Theming is the ability to systematically customize Material Design to better reflect your brand within a digital product.

Theming consists of three major parts:

Color Theming
Shape Theming
Typography Theming

Color Theming

Many are accustomed to defining a color system at the app level. But this has evolved, adding more attributes. These attributes help to inform more global color applications–enhancing and customizing the look and feel, along with the accessibility, of view components.

The diagram displays the additional attributes that differentiate app parts and components with specific usage and purpose.

Ref: https://material.io/design/material-theming/

The colorError attribute will be applied for all text fields to highlight the error behavior from just one source. Additionally, it helps to define multiple themes for a single app quickly, or to create variants of your app.

For example, you can change the color theme without affecting other code by identifying the appropriate theming attributes.

Shape Theming

This new type of theming defines the shape attribute. The shapeAppearance attribute defines shapes and their properties. Its definition can be global or used as an overlay. There are two properties to define shape property: cut and round. You may apply this on specific corners or more universally throughout the view. For example, a Button can have a cut on the top-right, or all of its corners.

A main benefit to identify is the fact that all of the components in the entire app can derive from a single set style, such as a button (e.g. EditText, Dialogs, and Fabs).

Typography Theming

Typography defines a font system, which can be applied globally throughout the app. With easy customization, it’s easy to personalize without changing any lines in the layout XML. It provides predefined textAppearance attributes that need to be used for all views displaying textual data.

Extending particular textAppearance allows for changes in properties as needed. It will impact the app in its entirety, which is already using text appearance attributes.