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.
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 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 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 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.
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.
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.
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.
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!
Interested in learning more about our basic and advanced Android Courses?
Learn from the experts at a Big Nerd Ranch Bootcamp!
Interested in leveling up your coding skills from the same authors of the Big Nerd Ranch Guide? Subscribe to The Frontier today!
Guest Allan Caine