12. Material Design

Written by Darryl Bayliss

When building apps, making them work is the easy part. The difficulty lies in making them work in a way that is stylish and appealing. This means taking color, animation, and even the size of your widgets into account to ensure you convey the right message. You’ll often hear this referred to by designers as design language.

This is such an important topic, Google created its own design language called Material Design. In this final chapter for Section II, you’ll learn:

• What Material Design is.
• What resources are available to learn about Material Design.
• How to update ListMaker so that it adopts some Material Design principles.

What is Material Design?

Material Design is a design language aiming to standardize how a user interacts with an app. This ranges from button clicks to widget presentation and positioning. Even to animation within the app.

Before Material Design existed, there were no user interface guidelines to which an app was expected to adhere. This was a problem for users because different apps worked in different ways, meaning users had to figure out how each app worked.

That changed with the introduction of Material Design. Android developers finally had a concise User Interface (UI) and User Experience (UX) for their apps to follow. Google is so invested in Material Design that it dedicated an entire site to it: https://material.io.

Open the site in your browser and feel free to take a look around, there’s a lot to see. Once you’re ready to proceed, click the Design button in the toolbar along the top of the page.

The Material Design guidelines are kept here.

Along the left of the page is a list of guidelines for each component that makes up Material Design. On the right, you’ll see links to the foundations of Material Design, tutorials, and news. Material Design is constantly evolving, so it’s a good idea to keep an eye on this page to keep up to date on the latest trends.

Once you’re ready to move on, navigate to the menu on the left and select Color > The color system.

This takes you to the section of Material Design specific to color.

Primary and secondary colors

Take a moment to read through the page. It talks about the amount of emphasis color has on Material Design.

To paraphrase, color is important to Material Design because it draws the user’s attention to important areas of your app you want them to interact with. Material Design also stresses you shouldn’t overdo it with color, because having too many colors in an app is distracting to a user and can confuse the purpose of Views on the screen.

Material Design focuses on two color choices: Primary and Secondary.

The Primary Color is what you’ll use most often within your app. Generally speaking, it should be the color of your app’s brand, and it works well for things like action bars and backgrounds.

The Secondary Color is used to accent certain areas of your app. A good rule of thumb is that it should contrast with the Primary Color.

The Secondary Color works well for buttons, floating action buttons, and progress bars — things you want your user to notice.

Using this knowledge about color in Material Design, you’re going to bring some color to Listmaker.

In your browser, navigate to https://material.io/tools/color/; this takes you to the Color Tool.

The Color Tool allows you to pick out colors to preview in a mockup app to see how they look.

At the moment, the Color Tool has no colors chosen, so the mockup app on the left of the screen doesn’t contain any color.

It’s time to change that!

In the top-right of the Color Tool, choose a Primary Color that you like. Remember this color is the one that’s most used in your app, so choose wisely. The sample project uses a red color, but you can choose something else appealing to your sense of design.

Next, in the bottom-right of the Color Tool, click the Secondary color scheme to set up the Secondary color.

Select a different color for the Secondary Color. Remember, this color should contrast with the Primary Color. The sample project uses a dark red.

When you’re happy with your selections, move the mouse cursor to the top-right of the browser window and click Export.

A new window appears over the export button and gives you the option to export your theme for various platforms. Select Android.

The Color Tool offers to export your chosen colors to your computer. Check your download folder, and you’ll find colors.xml ready to import into your project.

Open the Listmaker project in Android Studio and navigate to colors.xml in res ‣ values. This file is where you declare the colors you want to use in your app. You’re going to replace the contents of this file with the new file you retrieved from the color tool.

Open the colors.xml file you downloaded from the Color Tool, copy its contents and paste them into the colors.xml file in your Android Studio project.

Next, open themes.xml; it’s located in the same directory as colors.xml.

This file is responsible for declaring the Themes for your app. A theme is a set of grouped attributes to style your Views. You can create multiple themes for your app to avoid repeatedly declaring the same attributes in your Layouts and Views. This is a useful file if you want a single place to style all your Views.

You might be seeing errors with this file because the colors used in the Theme.Listmaker theme no longer exist. Within the Theme, rename the values of the colorPrimary and colorSecondary attributes so they match the names of the colors you added to colors.xml:

<!-- Primary brand color. -->
<item name="colorPrimary">@color/primaryColor</item>
<item name="colorPrimaryVariant">@color/primaryDarkColor</item>
<item name="colorOnPrimary">@color/primaryLightColor</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/secondaryColor</item>
<item name="colorSecondaryVariant">@color/secondaryDarkColor</item>
<item name="colorOnSecondary">@color/secondaryLightColor</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->

This tells your app what colors to use as the primary and secondary colors. Repeat the step for themes.xml (night).

Time for the big reveal! Run your app and check out the difference in color.

Tap the FloatingActionButton. It looks so nice!

Also, notice the accent color change in the dialog when tapping the EditText:

Excellent! You just updated the app to use some Material Design colors of your own.

Card Views

As you continue reading the Material Design site, you may notice it emphasizes the use of Cards. Cards are designed as a gateway to more information.

You can use Cards to visually inform your users that a list contains some tasks in Listmaker.

Note: For more information about Cards read the following: https://material.io/guidelines/components/cards.html.

To use a Card in your app, you need to declare a new dependency. Open build.gradle (Module: app), and in the dependencies block, add the following line:

implementation "androidx.cardview:cardview:1.0.0"

Click the Sync Now button that appears when you change the Gradle script. This rebuilds your project, pulling in any new dependencies that you added from the internet.

With the Cards dependency added to the project, you can now update the RecyclerView ViewHolders to use Cards.

Open the list_selection_view_holder.xml layout, making sure you have the Code Layout view open. Update the XML layout so that it matches this:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="4dp"
    android:layout_marginRight="4dp"
    android:layout_marginBottom="4dp"
    card_view:cardCornerRadius="2dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/itemNumber"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp" />

        <TextView
            android:id="@+id/itemString"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp" />
    </LinearLayout>
</androidx.cardview.widget.CardView>

The LinearLayout and its containing TextView widgets stay the same. The big change is these components are now wrapped in a CardView.

Cards behave similar to other Layout widgets, with a few additional properties. To access these properties, you first need to assign a namespace; this is done via xmlns:card_view.

You then use the namespace at the end of the open CardView tag, via cardCornerRadius. This sets the rounding of each corner of the card. The Material Design guidelines recommend a rounding of 2 density pixels (dp), used here.

It’s also worth noting that the CardView has its margins pushed 4 dp from the left, right, and bottom. This ensures that it doesn’t hit the edge of the screen and isn’t clipped by a card beneath it, which would obscure the CardView.

Run the app, and you’ll see that now the collection of lists look more appealing.

With the lists setup to show as cards. It’s time to do the same for task_view_holder.xml!

Open list_item_view_holder.xml layout, making sure the Text tab is selected. Update the XML to wrap a CardView around the root LinearLayout, like so:

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="4dp"
    android:layout_marginRight="4dp"
    android:layout_marginBottom="4dp"
    card_view:cardCornerRadius="2dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView_task"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp"
            android:text="TextView" />
    </LinearLayout>
</androidx.cardview.widget.CardView>

Run the app, and click on a list that already contains some tasks. Notice how the CardView makes your tasks pop off the screen.

Key Points

Material Design is used across Android and beyond. By adhering to these guidelines, you can make your Apps intuitive to use and a pleasure for people to try. In this chapter you learned:

• What Material Design is and why it’s important.
• Where to find the Material Design Guidelines.
• How to use the Color tool to generate a color scheme for your app.
• How to use the CardView library to create Cards for your app.

Where to go from here?

You only had a peek into the benefits Material Design brings to an app. With Material Design, you can provide your users with a great experience.

In future apps, it’s worth reading more about the Material Design guidelines and finding ways to incorporate them into your app. Don’t forget to keep checking https://material.io to make sure you stay up-to-date!