Chapters
Chapters

Chapters

Hide chapters

Android Apprentice

Third Edition · Android 10 · Kotlin 1.3 · Android Studio 3.6

Before You Begin

Section 0: 4 chapters
Show chapters Hide chapters

Section I: Your First Android App

Section 1: 5 chapters
Show chapters Hide chapters

Section II: Building a List App

Section 2: 7 chapters
Show chapters Hide chapters

Section III: Creating Map-Based Apps

Section 3: 7 chapters
Show chapters Hide chapters

Section IV: Building a Podcast Manager & Player

Section 4: 8 chapters
Show chapters Hide chapters

Section V: Android Compatibility

Section 5: 2 chapters
Show chapters Hide chapters

Section VI: Publishing Your App

Section 6: 3 chapters
Show chapters Hide chapters

12. Material Design
Written by Darryl Bayliss

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

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 that 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 that aims to standardize how a user interacts with an app. This ranges from everything to button clicks, to widget presentation and positioning, even to animation within the app.

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

All of that changed with the introduction of Material Design. Android developers finally had a set of concise User Interface (UI) and User Experience (UX) guidelines for their apps to follow. In fact, 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 look around. There’s a lot to see, so 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 news, tutorials and other information about Material Design. As Material Design is constantly evolving, it’s a good idea to keep an eye on this page to see what kind of apps Google highlights as good examples of Material Design usage.

Take a moment to familiarize yourself with the page. Once you’re ready to move on, click the button on the top left of the page to open the menu, 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 in Material Design.

The primary color here is purple
Jsa jxivifw dubin fayi iz nafxju

The secondary color here is turquoise
Hdi pemirvoky rarel taqi uk foqyauefo

<item name="colorPrimary">@color/primaryColor</item>
<item name="colorPrimaryDark">@color/primaryDarkColor</item>
<item name="colorAccent">@color/secondaryColor</item>

Card views

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

Example of apps using Cards
Ihuqfya or erlc ijezj Depbb

  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>

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.

11. Using Fragments
13. Creating a Map-Based App
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2024 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now