MDC-103 Android: Material Theming with Color, Elevation and Type (Kotlin)

Material Components (MDC) helfen Entwicklern bei der Implementierung von Material Design. MDC wurde von einem Team aus Entwicklern und UX-Designern bei Google entwickelt und bietet Dutzende von ansprechenden und funktionalen UI-Komponenten. Es ist für Android, iOS, Web und Flutter verfügbar. material.io/develop

In den Codelabs MDC-101 und MDC-102 haben Sie mit Material Components (MDC) die Grundlagen einer App namens Shrine erstellt, einer E‑Commerce-App, in der Kleidung und Haushaltswaren verkauft werden. Diese App enthält einen User Flow, der mit einem Anmeldebildschirm beginnt und den Nutzer zum Startbildschirm mit Produkten weiterleitet.

Die jüngste Erweiterung von Material Design bietet Designern und Entwicklern mehr Flexibilität, um die Marke ihres Produkts zu präsentieren. Sie können jetzt MDC verwenden, um Shrine anzupassen und den einzigartigen Stil widerzuspiegeln.

Umfang

In diesem Codelab passen Sie Shrine an die Marke an. Dazu verwenden Sie:

• Farbe
• Typografie
• Höhe
• Layout

Dies ist das dritte von vier Codelabs, in denen Sie eine E-Commerce-App namens Shrine erstellen, in der Kleidung und Haushaltswaren verkauft werden. Die zugehörigen Codelabs finden Sie unter: MDC-101: Material Components (MDC) – Grundlagen MDC-102: Material Design Structure and Layout MDC-104: Material Design Advanced Components Am Ende von MDC 104 haben Sie eine App erstellt, die so aussieht:

In diesem Codelab verwendete MDC-Android-Komponenten und ‑Subsysteme:

• Designs
• Typografie
• Höhe

Voraussetzungen

• Grundkenntnisse in der Android-Entwicklung
• Android Studio (hier herunterladen, falls noch nicht vorhanden)
• Ein Android-Emulator oder -Gerät (über Android Studio verfügbar)
• Der Beispielcode (siehe nächsten Schritt)

Wie würden Sie Ihre Erfahrung bei der Entwicklung von Android-Apps bewerten?

Anfänger Mittelstufe Fortgeschritten

Sie haben bereits MDC-102 abgeschlossen?

Wenn Sie MDC-102 abgeschlossen haben, sollte Ihr Code für dieses Codelab bereit sein. Fahren Sie mit Schritt 3 fort: Farbe ändern.

Starter-App für das Codelab herunterladen

Starter-App herunterladen

Die Starter-App befindet sich im Verzeichnis material-components-android-codelabs-103-starter/kotlin. cd Sie vor Beginn in dieses Verzeichnis.

…oder aus GitHub klonen

Führen Sie die folgenden Befehle aus, um dieses Codelab von GitHub zu klonen:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 103-starter

Weitere Informationen: Repository von GitHub klonen

Startcode in Android Studio laden

1. Wenn der Einrichtungsassistent abgeschlossen ist und das Fenster Welcome to Android Studio angezeigt wird, klicken Sie auf Open an existing Android Studio project. Rufen Sie das Verzeichnis auf, in dem Sie den Beispielcode installiert haben, und wählen Sie kotlin -> shrine aus(oder suchen Sie auf Ihrem Computer nach shrine), um das Shipping-Projekt zu öffnen.
2. Warten Sie einen Moment, bis Android Studio das Projekt erstellt und synchronisiert hat. Die Aktivitätsanzeigen unten im Android Studio-Fenster geben Aufschluss über den Fortschritt.
3. An diesem Punkt werden in Android Studio möglicherweise einige Build-Fehler angezeigt, weil das Android SDK oder Build-Tools wie das unten gezeigte fehlen. Folgen Sie der Anleitung in Android Studio, um diese zu installieren/aktualisieren und Ihr Projekt zu synchronisieren.

Projektabhängigkeiten hinzufügen

Das Projekt benötigt eine Abhängigkeit von der MDC Android Support Library. Die heruntergeladenen Beispielcodes sollten diese Abhängigkeit bereits enthalten. Es empfiehlt sich jedoch, die folgenden Schritte auszuführen, um sicherzugehen.

1. Rufen Sie die Datei build.gradle des Moduls app auf und prüfen Sie, ob der Block dependencies eine Abhängigkeit von MDC Android enthält:

api 'com.google.android.material:material:1.1.0-alpha06'

2. Optional: Bearbeiten Sie bei Bedarf die Datei build.gradle, um die folgenden Abhängigkeiten hinzuzufügen, und synchronisieren Sie das Projekt.

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

Start-App ausführen

Achten Sie darauf, dass die Build-Konfiguration links neben der Schaltfläche „Ausführen / Wiedergeben“ app ist. Klicken Sie auf die grüne Schaltfläche Run / Play (Ausführen / Spielen), um die App zu erstellen und auszuführen. Wenn im Fenster Select Deployment Target (Bereitstellungsziel auswählen) bereits ein Android-Gerät in der Liste der verfügbaren Geräte aufgeführt ist, fahren Sie mit Schritt 8 fort. Klicken Sie andernfalls auf Create New Virtual Device (Neues virtuelles Gerät erstellen). Wählen Sie auf dem Bildschirm Hardware auswählen ein Smartphone aus, z. B. Pixel 2, und klicken Sie dann auf Weiter. Wählen Sie auf dem Bildschirm System Image (System-Image) eine aktuelle Android-Version aus, vorzugsweise das höchste API-Level. Wenn sie nicht installiert ist, klicken Sie auf den angezeigten Link Herunterladen und schließen Sie den Download ab. Klicken Sie auf Weiter. Lassen Sie die Einstellungen auf dem Bildschirm Android Virtual Device (AVD) unverändert und klicken Sie auf Fertigstellen. Wählen Sie im Dialogfeld „Bereitstellungsziel“ ein Android-Gerät aus. Klicken Sie auf OK. Android Studio erstellt die App, stellt sie bereit und öffnet sie automatisch auf dem Zielgerät.

Wenn Sie die Abhängigkeit nicht hinzufügen oder die App nicht erfolgreich ausführen konnten, beenden Sie den Vorgang und beheben Sie die Probleme in Ihrer Entwicklungsumgebung.

Wenn beim Erstellen der App der Fehler INSTALL_FAILED_INVALID_APK auftritt, versuchen Sie, in Android Studio Build -> Clean Project (Projekt bereinigen) auszuführen.

Fertig! Die Anmeldeseite von Shrine sollte auf Ihrem Gerät oder Emulator angezeigt werden. Wenn Sie auf „Weiter“ klicken, wird die Shrine-Startseite mit einer App-Leiste oben und einem Raster mit Produktbildern darunter angezeigt.

Wir passen die obere App-Leiste an das Shrine-Branding an, indem wir ihre Farbe, Erhebung und Typografie ändern.

Dieses Farbdesign wurde von einem Designer mit benutzerdefinierten Farben erstellt (siehe Abbildung unten). Es enthält Farben, die aus der Marke von Shrine ausgewählt und auf den Material Theme Editor angewendet wurden. Dort wurden sie erweitert, um eine umfassendere Palette zu erstellen. Diese Farben stammen nicht aus den Material-Farbpaletten von 2014.

Im Material Theme Editor sind sie in numerisch gekennzeichnete Schattierungen unterteilt, darunter die Labels 50, 100, 200 … bis 900 für jede Farbe. Shrine verwendet nur die Farben 50, 100 und 300 aus dem rosa Farbmuster und 900 aus dem braunen Farbmuster.

Ändern wir die Farbe der oberen App-Leiste, damit sie dem Farbschema entspricht.

colorPrimaryDark und colorAccent festlegen

Ändern Sie in colors.xml die folgenden Zeilen. Mit dem Attribut colorAccent wird unter anderem die Farbe der oberen App-Leiste festgelegt und mit dem Attribut colorPrimaryDark die Farbe der Statusleiste.

colors.xml

<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>

Wenn Sie dunkle Symbole in der Statusleiste verwenden möchten, fügen Sie dem App-Design von Theme.Shrine, Shrine, Folgendes hinzu:

styles.xml

<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

Hinweis:Sie müssen den Namespace „tools“ im <resource>-Tag importieren, wie unten gezeigt:

<resources xmlns:tools="http://schemas.android.com/tools">

colors.xml und styles.xml sollten so aussehen:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="toolbarIconColor">#FFFFFF</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

Fügen Sie in colors.xml eine neue textColorPrimary-Farbressource hinzu, die auf #442C2E festgelegt ist, und aktualisieren Sie das Attribut toolbarIconColor, damit es auf die textColorPrimary-Farbe verweist.

Aktualisieren Sie die Datei styles.xml, um

Attribut auf die gerade definierte textColorPrimary-Farbe.

Legen Sie das Attribut android:theme im Widget.Shrine.Toolbar-Stil auf Theme.Shrine fest.

Wenn Sie android:textColorPrimary in Theme.Shrine festlegen, wird der Text in allen Elementen, einschließlich der oberen App-Leiste und der Symbole in der oberen App-Leiste, entsprechend formatiert.

colors.xml und styles.xml sollten so aussehen:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

Erstellen und ausführen Ihr Produkt-Grid sollte nun so aussehen:

Wir ändern den Stil des Anmeldebildschirms, damit er zu unserem Farbschema passt.

Textfelder gestalten

Wir ändern die Texteingaben auf der Anmeldeseite so, dass sie umrandet sind, und verwenden bessere Farben für unser Layout.

Fügen Sie der Datei colors.xml die folgende Farbressource hinzu:

colors.xml

<color name="textInputOutlineColor">#FBB8AC</color>

Fügen Sie in Ihrem styles.xml zwei neue Stile hinzu:

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
   <item name="hintTextColor">@color/textColorPrimary</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>

<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Legen Sie schließlich das Attribut „style“ für beide TextInputLayout-XML-Komponenten in shr_login_fragment.xml auf den neuen Stil fest:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="text"
       android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

Schaltflächenfarben anpassen

Legen Sie abschließend die Farben der Schaltflächen auf der Anmeldeseite fest. Fügen Sie Ihrem styles.xml die folgenden Formatierungen hinzu:

styles.xml

<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
   <item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>

<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Der Stil Widget.Shrine.Button wird vom Standardstil MaterialButton abgeleitet und ändert die Textfarbe und den Hintergrundfarbton der Schaltfläche. Widget.Shrine.Button.TextButton wird vom Standardstil text MaterialButton abgeleitet und ändert nur die Textfarbe.

Legen Sie den Stil Widget.Shrine.Button für die Schaltfläche „Weiter“ und den Stil Widget.Shrine.Button.TextButton für die Schaltfläche „Abbrechen“ fest:

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       style="@style/Widget.Shrine.Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

Aktualisieren Sie die Farbe des Shrine-Logos auf der Anmeldeseite. Dazu ist eine kleine Änderung am Vektor-Drawable shr_logo.xml erforderlich. Öffnen Sie die Drawable-Datei und ändern Sie das Attribut android:fillAlpha in 1. Die Drawables sollten so aussehen:

shr_logo.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="149dp"
   android:height="152dp"
   android:tint="?attr/colorControlNormal"
   android:viewportWidth="149"
   android:viewportHeight="152">
   <path
       android:fillAlpha="1"
       android:fillColor="#DADCE0"
       android:fillType="evenOdd"
       android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
       android:strokeWidth="1"
       android:strokeAlpha="0.4"
       android:strokeColor="#00000000" />
</vector>

Legen Sie dann das Attribut android:tint für das Logo <ImageView> in shr_login_fragment.xml auf ?android:attr/textColorPrimary fest:

shr_login_fragment.xml

<ImageView
   android:layout_width="64dp"
   android:layout_height="64dp"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="48dp"
   android:layout_marginBottom="16dp"
   android:tint="?android:attr/textColorPrimary"
   app:srcCompat="@drawable/shr_logo" />

Erstellen und ausführen Ihr Anmeldebildschirm sollte jetzt so aussehen:

Hinweise zu Farben und Designs:

• Sie können die Farbe in Ihrer Benutzeroberfläche anpassen, damit sie besser zu Ihrer Marke passt.
• Erstellen Sie eine Farbpalette aus zwei Farben (Ihrer primären und sekundären Farbe) mit hellen und dunklen Varianten dieser Farben. Oder verwenden Sie das Material Design-Palettentool, um Paletten zu generieren.
• Vergessen Sie nicht die Farbe Ihrer Typografie.
• Achten Sie darauf, dass der Farbkontrast zwischen Text und Hintergrund ein barrierefreies Verhältnis aufweist (3:1 für große Schrift, 4,5:1 für kleine Schrift).

Neben Farbänderungen hat Ihr Designer Ihnen auch eine bestimmte Typografie für die Website vorgegeben. Fügen wir das auch der oberen App-Leiste hinzu.

Obere App-Leiste gestalten

Legen Sie das Erscheinungsbild des Texts in der oberen App-Leiste entsprechend den Vorgaben Ihres Designers fest. Fügen Sie styles.xml den folgenden Stil für die Darstellung von Text hinzu und legen Sie für die Eigenschaft titleTextAppearance fest, dass in Ihrem Widget.Shrine.Toolbar-Stil auf diesen Stil verwiesen wird.

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">@style/Theme.Shrine</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
   <item name="android:textSize">16sp</item>
</style>

colors.xml und styles.xml sollten so aussehen:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
   <color name="textInputOutlineColor">#FBB8AC</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
       <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
       <item name="hintTextColor">@color/textColorPrimary</item>
       <item name="android:paddingBottom">8dp</item>
       <item name="boxStrokeColor">@color/textInputOutlineColor</item>
   </style>

   <style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
       <item name="backgroundTint">?attr/colorPrimaryDark</item>
   </style>

   <style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
       <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
   </style>

   <style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
       <item name="android:textSize">16sp</item>
   </style>

</resources>

Labels gestalten

Wir formatieren die Labels auf der Produktkarte so, dass sie das richtige Erscheinungsbild haben und horizontal auf der Karte zentriert sind.

Aktualisieren Sie die Typografie des Titellabels von textAppearanceHeadline6 zu textAppearanceSubtitle2:

shr_product_card.xml

<TextView
   android:id="@+id/product_title"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="@string/shr_product_title"
   android:textAppearance="?attr/textAppearanceSubtitle2" />

Wenn Sie die Bildlabels zentrieren möchten, ändern Sie die Label-<TextView>s in shr_product_card.xml, um das Attribut android:textAlignment="center" festzulegen:

shr_product_card.xml

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

   <TextView
       android:id="@+id/product_title"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_title"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceSubtitle2" />

   <TextView
       android:id="@+id/product_price"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_description"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>

Erstellen und ausführen Der Bildschirm mit dem Produkt-Grid sollte jetzt so aussehen:

Wir ändern die Typografie des Anmeldebildschirms, damit sie übereinstimmt.

Schriftart des Anmeldebildschirms ändern

Fügen Sie in styles.xml den folgenden Stil hinzu:

styles.xml

<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
   <item name="textAllCaps">true</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Legen Sie in shr_login_fragment.xml den neuen Stil für den Titel <TextView> „SHRINE“ fest und löschen Sie die Attribute textAllCaps und textSize:

shr_login_fragment.xml

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginBottom="132dp"
   android:text="@string/shr_app_name"
   android:textAppearance="@style/TextAppearance.Shrine.Title" />

Erstellen und ausführen Ihr Anmeldebildschirm sollte jetzt so aussehen:

Hinweise zur Typografie:

• Wählen Sie für kleine Schrift und Fließtext Schriftarten, die gut lesbar sind, anstatt Schriftarten, die einen bestimmten Stil haben.
• Schriftarten für die Anzeige, die für große Schrift und Titel verwendet werden, sollten dazu dienen, die Marke auszudrücken oder hervorzuheben.

Nachdem Sie die Seite mit bestimmten Farben und Schriftarten gestaltet haben, die zu Shrine passen, sehen wir uns nun die Karten mit den Produkten von Shrine an. Derzeit werden sie auf einer weißen Fläche unter der Navigation der App platziert. Um die Aufmerksamkeit auf die Produkte zu lenken, sollten wir sie stärker hervorheben.

Erhebung des Produktrasters ändern

Damit es so aussieht, als ob sich die Inhalte auf einem Blatt befinden, das über der oberen App-Leiste schwebt, ändern Sie die Erhebung der oberen App-Leiste. Fügen Sie das Attribut app:elevation zu Ihrem AppBarLayout und das Attribut android:elevation zu Ihren NestedScrollView-XML-Komponenten in shr_product_grid_fragment.xml hinzu:

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:elevation="0dp">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       style="@style/Widget.Shrine.Toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:navigationIcon="@drawable/shr_menu"
       app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   android:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

Kartenhöhe (und -farbe) ändern

Passen Sie die Höhe jeder Karte an, indem Sie app:cardElevation in shr_product_card.xml von 2dp zu 0dp ändern. Ändern Sie auch die app:cardBackgroundColor in @android:color/transparent.

shr_product_card.xml

<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardBackgroundColor="@android:color/transparent"
   app:cardElevation="0dp"
   app:cardPreventCornerOverlap="true">

Sehen Sie selbst! Sie haben die Erhebung jeder Karte auf der Seite mit dem Produkt-Grid angepasst.

Erhebung der Schaltfläche „Weiter“ ändern

Fügen Sie in styles.xml die folgende Property zum Widget.Shrine.Button-Stil hinzu:

styles.xml

<item name="android:stateListAnimator" tools:ignore="NewApi">
    @animator/shr_next_button_state_list_anim
</item>

Hinweis: Wenn in Android Studio beim Schreiben dieses Codes Cannot resolve symbol-Fehler auftreten, drücken Sie Alt + Eingabetaste oder (Wahltaste + Rückgabetaste auf dem Mac), um die fehlenden Symbole zu importieren.

Wenn Sie android:stateListAnimator im Stil von Button festlegen, wird für die Schaltfläche „Weiter“ der von uns bereitgestellte Animator verwendet.

Erstellen und ausführen Ihr Anmeldebildschirm sollte jetzt so aussehen:

Hinweise zur Höhe:

• Alle Material Design-Oberflächen und -Komponenten haben Erhebungswerte.
• Die Grenze zwischen zwei Oberflächen wird durch Oberflächenkanten dargestellt.
• Höhenunterschiede zwischen Oberflächen können durch abgedunkelte oder aufgehellte Hintergründe oder durch Schatten dargestellt werden.
• Oberflächen, die vor anderen Oberflächen angezeigt werden, enthalten in der Regel wichtigere Inhalte.

Wir ändern das Layout, damit die Karten unterschiedliche Seitenverhältnisse und Größen haben und sich voneinander abheben.

Gestaffelten RecyclerView-Adapter verwenden

Wir haben einen neuen RecyclerView-Adapter für Sie im staggeredgridlayout-Paket bereitgestellt, der ein asymmetrisches, versetztes Kartenlayout anzeigt, das horizontal gescrollt werden soll. Sie können sich den Code gern selbst ansehen, aber wir werden hier nicht darauf eingehen, wie er implementiert ist.

Wenn Sie diesen neuen Adapter verwenden möchten, müssen Sie die Methode onCreateView() in ProductGridFragment.kt ändern. Ersetzen Sie den Codeblock nach dem Kommentar „set up the RecyclerView“ durch Folgendes:

ProductGridFragment.kt

// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
val gridLayoutManager = GridLayoutManager(context, 2, RecyclerView.HORIZONTAL, false)
gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
   override fun getSpanSize(position: Int): Int {
       return if (position % 3 == 2) 2 else 1
   }
}
view.recycler_view.layoutManager = gridLayoutManager
val adapter = StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

Außerdem müssen wir eine kleine Änderung an unserer shr_product_grid_fragment.xml vornehmen, um die Abstände aus unserer NestedScrollView zu entfernen:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:elevation="6dp">

Schließlich passen wir auch das Padding der Karte innerhalb von RecyclerView an, indem wir ProductGridItemDecoration.kt ändern. Ändern Sie die getItemOffsets()-Methode von ProductGridItemDecoration.kt so:

ProductGridItemDecoration.kt

override fun getItemOffsets(outRect: Rect, view: View,
                           parent: RecyclerView, state: RecyclerView.State?) {
   outRect.left = smallPadding
   outRect.right = largePadding
}

Erstellen und ausführen Die Elemente des Produktrasters sollten jetzt versetzt dargestellt werden:

Farbe ist ein wirkungsvolles Mittel, um Ihre Marke zu präsentieren. Eine kleine Änderung der Farbe kann einen großen Einfluss auf die User Experience haben. Sehen wir uns an, wie Shrine aussehen würde, wenn das Farbschema der Marke völlig anders wäre.

Stile und Farben ändern

Fügen Sie in styles.xml das folgende neue Design hinzu:

styles.xml

<style name="Theme.Shrine.Autumn" parent="Theme.Shrine">
   <item name="colorPrimary">#FFCF44</item>
   <item name="colorPrimaryDark">#FD9725</item>
   <item name="colorAccent">#FD9725</item>
   <item name="colorOnPrimary">#FFFFFF</item>
   <item name="colorError">#FD9725</item>
</style>

Verwenden Sie dieses neue Design in Ihrer Anwendung in AndroidManifest.xml:

AndroidManifest.xml

<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/shr_app_name"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:supportsRtl="true"
  android:name="com.google.codelabs.mdc.kotlin.shrine.application.ShrineApplication"
   android:theme="@style/Theme.Shrine.Autumn">
   <activity android:name=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />

           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity>
</application>

Ändern Sie die Farbe des Symbolleistensymbols in colors.xml wie unten gezeigt:

colors.xml

<color name="toolbarIconColor">#FFFFFF</color>

Legen Sie dann das Attribut android:theme unseres Symbolleistenstils so fest, dass es mit dem Attribut „?theme“ auf das aktuelle Design verweist, anstatt es fest zu codieren:

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">?theme</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

Hellen Sie als Nächstes die Farbe des Hinweistexts in den Textfeldern des Anmeldebildschirms auf. Fügen Sie den Textfeldern das Attribut android:textColorHint hinzu:

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">
@style/TextAppearance.Shrine.TextInputLayout.HintText
</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="android:textColorHint">?attr/colorPrimaryDark</item>
</style>

Erstellen und ausführen Das neue Design sollte jetzt in der Vorschau angezeigt werden.

Machen Sie die in diesem Abschnitt vorgenommenen Codeänderungen rückgängig, bevor Sie mit MDC-104 fortfahren.

Sie haben jetzt eine App erstellt, die den Designvorgaben Ihres Designers entspricht.

Die fertige MDC 103-App ist verfügbar, wenn Sie das fertige Codelab herunterladen oder die fertige Version dieses Codelabs mit Git auschecken: git checkout 103-complete.

Sie können Ihre Version der App mit der fertigen Version der App vergleichen.

Weiteres Vorgehen

Sie haben die folgenden MDC-Komponenten verwendet: theme, typography und elevation. Weitere Komponenten und Subsysteme finden Sie [in der MDC Web-Bibliothek].

Was ist, wenn das geplante App-Design Elemente enthält, für die es in der MDC-Bibliothek keine Komponenten gibt? In MDC-104: Material Design Advanced Components wird beschrieben, wie Sie benutzerdefinierte Komponenten mit der MDC-Bibliothek erstellen, um ein bestimmtes Erscheinungsbild zu erzielen.

Ich konnte dieses Codelab mit einem angemessenen Zeit- und Arbeitsaufwand durcharbeiten.

Stimme vollkommen zu Stimme zu Neutral Stimme nicht zu Stimme überhaupt nicht zu

Ich möchte Material-Komponenten auch in Zukunft verwenden.

Stimme voll zu Stimme zu Neutral Stimme nicht zu Stimme überhaupt nicht zu