One exciting announcement from this year’s Google I/O is the new Material Theming (just don’t call
it Material Design 2). Google realized that Material Design seemed to push some designers and
companies away because they thought it was too restrictive and they wouldn’t be able to represent
their branding using it. To help onboard more people, Google is offering more guidance on how to
customize Material Design for your specific needs. They’re now calling this Material Theming.

The goal of Material Theming is to make it very simple to customize the rules of Material Design
in a way that works for everyone. These changes should not only help designers use Material Design to fit
their brand, but also help developers implement the designs in the apps themselves. Material
Theming consists of three parts: customizing the theme, applying the custom theme to the design,
and implementing the design in code.

Customization is king

Material Design comes with a base theme that works fine on its own, but it really excels once it is
customized. There are four main ways you can customize the base design to fit your branding: color,
typography, iconography, and shape.

Color

Color is one of the main defining characteristics of Material Design. Bright, bold colors are used
to draw the attention of users to main actions on the screen. This is combined with whitespace to
separate the content into different areas of the screen. Color is still the most important aspect for
fitting Material Design to your branding.

Typography

Typography was difficult to customize in early versions of Android.
Third-party libraries like Calligraphy made it easier, and in Android Oreo the font resource type was
introduced to include simple font customization in the platform. With Material Theming, Google is pushing
developers and designers to use their own fonts. Custom fonts can go a long way to give your apps a
branded look and feel, rather than using the default Roboto font.

Iconography

Iconography is a new way to tweak the base Material Design, and a very welcome one. Instead of
being restricted to a single set of icons, Google provides several different versions. As of now
there are 5 sets: filled (the original Material Design icons), sharp, rounded, outlined, and two-toned. This
allows you to select the version that fits best with your brand. It’s still a good idea to stick
with one type of icon style to keep things consistent across your app, though.

Shape

Finally, you now have more control over the shape of the views and containers on the screen.
Instead of having the default, rounded corners for widgets, you can modify them how you want. You
can control the radii of the corners like before or you can pick another option. One is to have no
rounding, which produces sharp corners for your views. You can also use a cut corner, which creates
a straight corner at 45 degrees to the horizontal and vertical axis. These shapes can be used on
regular view components or containing views like CardView to show off branding or the state of that
widget.

Applying the theme

Once you research the different options available for customizing your design, the next step is to
apply it to your design mock-ups. You can apply changes to color, typography, iconography, or shape.
To make this process easier, Google created the
Material Theme Editor. Currently this just integrates
with Sketch but more integrations are planned soon.

The Theme Editor makes applying your design customizations simple. It provides tooling for each of
the customization options, and any time you change one of the options it will be reflected
throughout your design. This allows you to iterate on your app design quickly and get prompt
feedback.

The first area you’ll likely customize in your theme is color. 13 colors make up your app’s
palette. You can specify your primary and secondary colors, just like previous versions of Material
design, and also specify an additional variant of your primary color to help with accessibility.
Next, you can add colors for your window background, other surfaces in your app such as CardViews,
and an error color for those hopefully unlikely failure states. Lastly, you can specify what are
known as ‘on’ colors. These are colors for things drawn on top of other elements. For example, ‘on
primary’ is the color of the text drawn on top of your primary color, and ‘on surface’ is the color
used to draw things on the various surfaces in your app.

The next area you can customize is the typography used throughout your app. Like color, there are
13 different typography categories for all of your type needs in your app. There are several
different headers, subtitles, body text, button text, and others that make up the text styling for
your brand. To configure these categories you can modify things like the type family, the font,
case, and size of the text. You can configure these based on how visible things need to be in your
app.

The Theme Editor also allows you to modify the shape of different components in your design. You
can specify how the corners look on both Views and ViewGroups, such as Buttons and CardViews.
Rounded, cut, and sharp corners are all available, depending on what fits best for your design and
brand.

Last, but not least, you can modify how the icons look in your application. Originally, you just
had the default Material icons available. You could tint the icons but there was very little
control over how they looked. Now, there are five different options available for your icon themes.
Filled icons are the originals, but you can also use icons that are sharp, rounded, outlined, or
two-toned. Sharp icons remove any corner radii for the filled icons. On the opposite side, rounded
icons smooth out any sharp corners on the filled icons so they all have the same corner radius.
Outlined icons remove most of the fill to the original icons. These are useful for showing a
deselected state. Two-tone icons allow the use of a fill color and opacity for the most
configuration options.

Using your theme

Once you configure your custom Material Design theme using the Theme Editor you are ready to apply the
theme to the app itself. The values provided by the Theme Editor can be used in your app to
configure the styling for the different elements. You can apply your styles to your views, text,
and icons to make sure your branding is consistent across all of the screens in your app.

Closing thoughts

Google has made great strides to improve Material Design and simplify the process of customizing it
to fit a wide variety of styles and brands. The new Theme Editor should prove to be very useful to
both designers and developers when creating apps, and it should achieve wider adoption when it
expands beyond just Sketch. I look forward to your comments on the new Material Theming. Please
drop any questions or comments below, I’m especially curious about people’s opinions on the new
Bottom App Bar. Thanks for reading!