Book Image

Learning Material Design

By : Kyle Mew, Nadir Belhaj
Book Image

Learning Material Design

By: Kyle Mew, Nadir Belhaj

Overview of this book

Google's Material Design language has taken the web development and design worlds by storm. Now available on many more platforms than Android, Material Design uses color, light, and movements to not only generate beautiful interfaces, but to provide intuitive navigation for the user. Learning Material Design will teach you the fundamental theories of Material Design using code samples to put these theories into practice. Focusing primarily on Android Studio, you’ll create mobile interfaces using the most widely used and powerful material components, such as sliding drawers and floating action buttons. Each section will introduce the relevant Java classes and APIs required to implement these components. With the rules regarding structure, layout, iconography, and typography covered, we then move into animation and transition, possibly Material Design's most powerful concept, allowing complex hierarchies to be displayed simply and stylishly. With all the basic technologies and concepts mastered, the book concludes by showing you how these skills can be applied to other platforms, in particular web apps, using the powerful Polymer library.
Table of Contents (17 chapters)

Customizing the material theme

One of the most useful features of the material theme is the way it can take a small palette made of only a handful of colors and incorporate these colors into every aspect of a UI. Text and cursor colors, the way things are highlighted, and even system features such as the status and navigation bars can be customized to give our apps brand colors and an easily recognizable look.

The use of color in Material Design is a topic in itself, and there are strict guidelines regarding color, shade, and text, and these will be covered in detail later in the book. For now, we will just look at how we can use a style to apply our own colors to a material theme.

So as to keep our resources separate, and therefore easier to manage, we will define our palette in its own XML file. As we did earlier with the my_style.xml file, create a new values resource file in the values directory and call it colors. Complete the code as shown next:

<?xml version="1.0" encoding="utf-8"?>
    <color name="primary">#FFC107</color>
    <color name="primary_dark">#FFA000</color>
    <color name="primary_light">#FFECB3</color>
    <color name="accent">#03A9F4</color>
    <color name="text_primary">#212121</color>
    <color name="text_secondary">#727272</color>
    <color name="icons">#212121</color>
    <color name="divider">#B6B6B6</color>


In the gutter to the left of the code, you will see small, colored squares. Clicking on these will take you to a dialog with a color wheel and other color selection tools for quick color editing.

We are going to apply our style to the entire app, so rather than creating a separate file, we will include our style in the theme that was set up by the project template wizard when we started the project. This theme is called AppTheme, as can be seen by opening the res/values/styles/styles.xml (v21) file. Edit the code in this file so that it looks like the following:

<?xml version="1.0" encoding="utf-8"?>
    <style name="AppTheme" parent="android:Theme.Material.Light">
        <item name="android:colorPrimary">@color/primary</item>
        <item name="android:colorPrimaryDark">@color/primary_dark</item>
        <item name="android:colorAccent">@color/accent</item>
        <item name="android:textColorPrimary">@color/text_primary</item>
        <item name="android:textColor">@color/text_secondary</item>

Being able to set key colors, such as colorPrimary and colorAccent, allows us to incorporate our brand colors throughout the app, although the project template only shows us how we have changed the color of the status bar and app bar. Try adding radio buttons or text edit boxes to see how the accent color is applied. In the following figure, a timepicker replaces the original text view:

The XML for this looks like the following lines:

    android:layout_centerHorizontal="true" />

For now, it is not necessary to know all the color guidelines. Until we get to them, there is an online material color palette generator at that lets you try out different palette combinations and download color XML files that can just be cut and pasted into the editor.

With a complete and up-to-date development environment constructed, and a way to customize and adapt the material theme, we are now ready to look into how material specific widgets, such as card views, are implemented.