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

1. Einführung

Mit Material Components (MDC) können Entwickler Material Design implementieren. MDC wurde von einem Team aus Entwicklern und UX-Designern bei Google entwickelt. Es enthält Dutzende schöne und funktionale UI-Komponenten und ist für Android, iOS, das Web und Flutter.material.io/develop verfügbar.

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 kürzlich erfolgte Erweiterung von Material Design bietet Designschaffenden und Entwickelnden mehr Flexibilität, die Marke ihres Produkts auszudrücken. Du kannst MDC jetzt verwenden, um Shrine anzupassen und seinen einzigartigen Stil widerzuspiegeln.

Inhalt

In diesem Codelab kannst du „Shrine“ so anpassen, dass es seine Marke widerspiegelt:

• Farbe
• Typografie
• Höhe
• Layout

Dies ist das dritte von vier Codelabs, die dich durch die Entwicklung der App Shrine führen – einer E-Commerce-App für den Verkauf von Kleidung und Haushaltswaren.Die zugehörigen Codelabs findest du unter: MDC-101: Grundlagen zu Material Components (MDC) MDC-102: Material Design Structure and Layout MDC-104: Erweiterte Material Design-Komponenten Am Ende von MDC 104 haben Sie eine App erstellt, die so aussieht:

In diesem Codelab verwendete MCD-Komponenten und ‐Subsysteme von Android:

• Designs
• Typografie
• Höhe

Voraussetzungen

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

Wie würden Sie Ihre Erfahrung im Erstellen von Android-Apps bewerten?

Anfänger Mittelstufe Fortgeschritten

2. Entwicklungsumgebung einrichten

Weiter mit MDC-102?

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

Starter-Codelab-App herunterladen

Starter App herunterladen

Die Start-App befindet sich im Verzeichnis material-components-android-codelabs-103-starter/kotlin. Sie müssen sich vor Beginn in diesem Verzeichnis cd befinden.

…oder es 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 Willkommen bei Android Studio angezeigt wird, klicken Sie auf Bestehendes Android Studio-Projekt öffnen. 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 das Projekt in Android Studio erstellt und synchronisiert wurde. Dies können Sie an den Aktivitätsanzeigen unten im Android Studio-Fenster erkennen.
3. An dieser Stelle meldet Android Studio möglicherweise einige Buildfehler, weil das Android SDK oder die Buildtools fehlen, z. B. den unten gezeigten. 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-Supportbibliothek. Im Beispielcode, den Sie heruntergeladen haben, sollte diese Abhängigkeit bereits aufgeführt sein. Es empfiehlt sich jedoch, die folgenden Schritte durchzuführen, um sicherzugehen.

1. Gehen Sie zur Datei build.gradle des Moduls app und achten Sie darauf, dass 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

Die Build-Konfiguration links neben der Schaltfläche Ausführen/Wiedergeben muss app sein. Klicken Sie auf die grüne Schaltfläche Run / Play, um die App zu erstellen und auszuführen. Wenn im Fenster Select Deployment Target (Bereitstellungsziel auswählen) unter den verfügbaren Geräten bereits ein Android-Gerät aufgeführt ist, fahren Sie mit Schritt 8 fort. Klicken Sie andernfalls auf Neues virtuelles Gerät erstellen. Wählen Sie auf dem Bildschirm Hardware auswählen ein Smartphone wie Pixel 2 aus und klicken Sie dann auf Weiter. Wählen Sie auf dem Bildschirm System-Image die aktuelle Android-Version aus, vorzugsweise die höchste API-Ebene. Falls 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 Finish (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 Ihre Entwicklungsumgebung und beheben Sie Fehler.

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

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

Passen wir die obere App-Leiste an die Marke von Shrine an, indem wir Farbe, Höhe und Typografie ändern.

3. Farbe ändern

Dieses Farbschema wurde von einem Designer mit benutzerdefinierten Farben erstellt (siehe Abbildung unten). Sie enthält Farben, die aus der Marke von Shrine ausgewählt und auf den Material Theme Editor angewendet wurden. Dieser hat sie erweitert, um eine vollständigere Palette zu erhalten. Diese Farben stammen nicht aus den Material Design-Farbpaletten von 2014.

Im Material Theme Editor wurden sie in Schattierungen mit numerisch beschrifteten Schattierungen organisiert, einschließlich der Beschriftungen 50, 100, 200, ... bis 900 jeder Farbe. Für Shrine werden nur die Farbtöne 50, 100 und 300 aus dem rosafarbenen Farbmuster und 900 aus dem braunen Farbmuster verwendet.

Ändern wir die Farbe der oberen App-Leiste entsprechend.

„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. Das Attribut colorPrimaryDark steuert 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 Theme.Shrine, dem App-Design von Shrine, Folgendes hinzu:

styles.xml

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

Hinweis: Sie müssen den Tools-Namespace wie unten gezeigt in das <resource>-Tag importieren:

<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-Farbressourcengruppe zu #442C2E hinzu und aktualisieren Sie das toolbarIconColor-Attribut, damit es auf die textColorPrimary-Farbe verweist.

Aktualisieren Sie die Datei styles.xml, um die

Attribut für die Farbe textColorPrimary, die wir gerade definiert haben.

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

Wenn du android:textColorPrimary in Theme.Shrine festlegst, wird der Text für alle Elemente formatiert, einschließlich der oberen App-Leiste und der Symbole in der oberen App-Leiste.

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 Produktraster sollte jetzt so aussehen:

Ändern wir den Stil des Anmeldebildschirms, damit er zu unserem Farbschema passt.

Textfelder gestalten

Ändern wir die Texteingaben auf der Anmeldeseite so, dass sie umrissen werden, und verwenden Sie 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 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 Stilattribut für beide XML-Komponenten aus TextInputLayout 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 stylen

Legen Sie abschließend die Farben der Schaltflächen auf der Anmeldeseite fest. Fügen Sie styles.xml die folgenden Stile 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 Widget.Shrine.Button-Stil geht über den Standard-MaterialButton-Stil hinaus und ändert die Text- und Hintergrundfarbe der Schaltfläche. Widget.Shrine.Button.TextButton erweitert den Standardstil Text MaterialButton und ändert nur die Textfarbe.

Legen Sie den Widget.Shrine.Button-Stil für Ihre Schaltfläche „Weiter“ und den Stil Widget.Shrine.Button.TextButton für die Schaltfläche „Abbrechen“ wie folgt 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 erforderlich: shr_logo.xml. Öffne die Drawable-Datei und ändere das Attribut android:fillAlpha in 1. Das Drawable sollte wie folgt 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 auf dem Logo <ImageView> in shr_login_fragment.xml wie folgt 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 Farbe und Design:

• Sie können die Farbe in Ihrer Benutzeroberfläche anpassen, um Ihre Marke besser zu repräsentieren.
• Erstellen Sie eine Farbpalette mit zwei Farben (Primär- und Sekundärfarben) und hellen und dunklen Varianten dieser Farben. Sie können auch das Material Design-Palettentool verwenden, um Paletten zu generieren.
• Vergessen Sie nicht die Farbe Ihrer Typografie!
• Achten Sie darauf, dass der Farbkontrast zwischen Text und Hintergrundfarbe ein geeignetes Verhältnis aufweist (3:1 für große Schrift, 4,5:1 für kleine).

4. Typografie und Labelstile ändern

Zusätzlich zu den Farbänderungen haben Ihre Designschaffenden Ihnen auch spezifische Typografien zur Verwendung auf der Website bereitgestellt. Fügen wir das auch der oberen App-Leiste hinzu.

Obene App-Leiste gestalten

Passen Sie die Textdarstellung der oberen App-Leiste an die vom Designer bereitgestellten Spezifikationen an. Fügen Sie styles.xml den folgenden Stil für die Textdarstellung hinzu und legen Sie die Eigenschaft titleTextAppearance so fest, dass sie in Ihrem Widget.Shrine.Toolbar-Stil auf diesen Stil verweist.

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 gestalten die Labels der Produktkarte so, dass sie den richtigen Text haben und horizontal auf der Karte zentriert sind.

Aktualisieren Sie die Typografie Ihres Titellabels wie folgt 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> 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. Ihr Produktraster-Bildschirm sollte jetzt so aussehen:

Ändern wir die Typografie des Anmeldebildschirms entsprechend.

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>

Lege in shr_login_fragment.xml den neuen Stil auf deinen „SHRINE“-Titel <TextView> fest und lösche die vorhandenen 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 nun so aussehen:

Hinweise zur Typografie:

• Wählen Sie bei der Auswahl von Textschriftarten, die für kleine Schriften und Fließtext verwendet werden, klare Schriftarten und nicht nur einen bestimmten Stil aus.
• Displayschriften, die für große Schriftarten und Titel verwendet werden, sollten die Marke ausdrücken oder hervorheben.

5. Höhe anpassen

Nachdem Sie die Seite mit einer bestimmten Farbe und Typografie gestaltet haben, die zu Shrine passt, sehen wir uns die Karten an, auf denen die Produkte von Shrine zu sehen sind. Derzeit sind sie auf einer weißen Oberfläche unter der Navigation der App platziert. Um die Aufmerksamkeit auf die Produkte zu lenken, sollten wir sie noch betonen.

Ebene des Produktrasters ändern

Wenn es so aussehen soll, als befänden sich die Inhalte auf einem Blatt, das über der oberen App-Leiste schwebt, ändern Sie die Höhen der oberen App-Leiste. Fügen Sie das Attribut app:elevation Ihrer AppBarLayout und das Attribut android:elevation Ihren NestedScrollView-XML-Komponenten in shr_product_grid_fragment.xml so 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 die app:cardElevation in shr_product_card.xml von 2dp zu 0dp ändern. Ändern Sie auch 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">

Schau mal hier! Sie haben die Höhe der einzelnen Karten auf der Produktrasterseite angepasst.

Höhe der Schaltfläche „Weiter“ ändern

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

styles.xml

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

Hinweis: Falls in Android Studio beim Schreiben dieses Codes der Fehler Symbol kann nicht behoben werden auftritt, drücken Sie Alt + Eingabetaste oder Wahltaste + Eingabetaste auf einem Mac, um die fehlenden Symbole zu importieren.

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

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

Hinweise zur Höhe:

• Alle Oberflächen und Komponenten von Material Design haben Höhenwerte.
• Die Trennung zwischen dem Ende einer Oberfläche und dem Beginn einer anderen wird durch die Kanten gekennzeichnet.
• Höhenunterschiede zwischen Oberflächen können mit gedimmten, helleren Hintergründen oder Schatten ausgedrückt werden.
• Oberflächen, die vor anderen Oberflächen angezeigt werden, enthalten in der Regel wichtigere Inhalte.

6. Layout ändern

Ändern wir das Layout, damit die Karten in verschiedenen Seitenverhältnissen und Größen angezeigt werden, damit sich jede Karte von den anderen abhebt.

Einen gestaffelten RecyclerView-Adapter verwenden

Im staggeredgridlayout-Paket finden Sie einen neuen RecyclerView-Adapter, der ein asymmetrisches versetztes Kartenlayout für horizontales Scrollen anzeigt. Sie können sich diesen Code selbst ansehen. Wir gehen hier nicht darauf ein, wie er implementiert ist.

Wenn Sie diesen neuen Adapter verwenden möchten, ändern Sie die onCreateView()-Methode in ProductGridFragment.kt. Ersetzen Sie den Codeblock nach dem Kommentar „RecyclerView einrichten“ 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 shr_product_grid_fragment.xml vornehmen, um die Abstände aus 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 den Innenrand der Karte innerhalb von RecyclerView an, indem wir ProductGridItemDecoration.kt modifizieren. Ändern Sie die Methode getItemOffsets() 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 im Produktraster sollten jetzt gestaffelt sein:

7. Anderes Design ausprobieren

Farbe ist eine wirkungsvolle Möglichkeit, Ihre Marke zu präsentieren. Eine kleine Farbänderung kann sich stark auf die User Experience auswirken. Um das zu testen, 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>

Und in AndroidManifest.xml verwenden Sie dieses neue Design in Ihrer Anwendung:

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 Symbols der Symbolleiste in colors.xml wie unten gezeigt:

colors.xml

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

Legen Sie dann das android:theme-Attribut unseres Symbolleistenstils so fest, dass es über das Attribut „?theme“ auf das aktuelle Design verweist, anstatt es hartzucodieren:

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>

Als Nächstes wird die Hinweistextfarbe in den Textfeldern auf dem Anmeldebildschirm aufgehellt. Fügen Sie dem Stil der Textfelder 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 als Vorschau angezeigt werden.

Setzen Sie den in diesem Abschnitt geänderten Code zurück, bevor Sie mit MDC-104 fortfahren.

8. Zusammenfassung

Sie haben inzwischen eine App erstellt, die den Designanforderungen Ihres Designers entspricht.

Du kannst die fertige MDC 103-App herunterladen, indem du das fertige Codelab herunterlädst oder indem du dir die fertige Version dieses Codelab mit git ansehen kannst: git checkout 103-complete.

Sie können Ihre App-Version mit der fertigen Version testen.

Weiteres Vorgehen

Sie haben die folgenden MDC-Komponenten verwendet: Design, Typografie und Erhebung. Weitere Komponenten und Subsysteme findest du in der [MDC-Webbibliothek].

Was ist, wenn Ihr geplantes App-Design Elemente enthält, für die es keine Komponenten in der MDC-Bibliothek gibt? In MDC-104: Material Design Advanced Components erfahren Sie, wie Sie mithilfe der MDC-Bibliothek benutzerdefinierte Komponenten erstellen, um einen bestimmten Look zu erzielen.

Ich konnte dieses Codelab mit angemessenem Zeitaufwand und Mühe abschließen.

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

Ich möchte Material Components auch in Zukunft verwenden

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