12.
Material Design
Written by Darryl Bayliss
Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as text.
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.
<!-- 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. -->
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.
implementation "androidx.cardview:cardview:1.0.0"
<?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>
<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>
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:
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.