MDC-103 Android: Material-Design mit Farbe, Höhe und Typ (Kotlin)

Material Components (MDC) ermöglichen Entwicklern die Implementierung von Material Design. Das MDC wurde von einem Team aus Entwickler:innen und UX-Designern bei Google erstellt und bietet Dutzende schöne und funktionale UI-Komponenten, die für Android, iOS, Web und Flutter verfügbar sind. material.io/develop

In den Codelabs-MDC-101 und MDC-102 haben Sie Material Components (MDC) verwendet, um die Grundlagen der App Shrine zu erstellen, einer E-Commerce-App, die Kleidung und Haushaltswaren verkauft. Diese App enthält einen Nutzerfluss, der mit einem Anmeldebildschirm beginnt und den Startbildschirm zu den Produkten weiterleitet.

Die jüngste Erweiterung von Material Design bietet Designern und Entwicklern mehr Flexibilität, um ihre Produkte unter Beweis zu stellen. Mit MDC können Sie jetzt den Schrein anpassen und seinen einzigartigen Stil wiedergeben.

Inhalte, die Sie erstellen werden

In diesem Codelab passen Sie den Schrein so an, dass er seine Marke widerspiegelt:

• Color
• Typografie
• Elevation
• Layout

Dies ist das dritte von vier Codelabs, bei denen Sie die App „Shrine“ kennen, eine E-Commerce-App, die Kleidung und Haushaltswaren verkauft. Die zugehörigen Codelabs finden Sie unter: MDC-101: Material Components (MDC) – Grundlagen MDC-102: Material Design, Struktur und Layout MDC-104: Innovative Komponenten des Material Design Bis MDC 104 wird eine Anwendung erstellt, die so aussieht:

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

• Designs
• Typografie
• Elevation

Voraussetzungen

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

Wie würdest du deine Erfahrung beim Erstellen von Android-Apps bewerten?

Fortgeschritten Fortgeschritten Profi

Möchtest du von MDC-102 fortfahren?

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

Start der Codelab-App herunterladen

Starter-App herunterladen

Die Starter-App befindet sich im Verzeichnis material-components-android-codelabs-103-starter/kotlin. Achten Sie darauf, vor dem Start cd in dieses Verzeichnis zu schreiben.

...oder von GitHub klonen

Führen Sie die folgenden Befehle aus, um dieses Codelab aus 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 aus GitHub klonen

Startcode in Android Studio laden

1. Sobald der Einrichtungsassistent abgeschlossen ist und das Fenster Willkommen in Android Studio angezeigt wird, klicken Sie auf Vorhandenes Android Studio-Projekt öffnen. Gehen Sie zu dem Verzeichnis, in dem Sie den Beispielcode installiert haben, und wählen Sie Kotlin -> Schrein aus(oder suchen Sie auf Ihrem Computer nach Schrein), um das Versandprojekt zu öffnen.
2. Warten Sie einen Moment, bis Android Studio das Projekt erstellt und synchronisiert hat. Dies wird durch Aktivitätsindikatoren unten im Android Studio-Fenster angezeigt.
3. Es kann jetzt vorkommen, dass Android Studio einige Build-Fehler auslöst, weil das Android SDK oder die Build-Tools fehlen (siehe unten). Folgen Sie der Anleitung in Android Studio, um die Projekte zu installieren, zu aktualisieren und zu synchronisieren.

Projektabhängigkeiten hinzufügen

Das Projekt ist von der MDC-Android-Supportbibliothek abhängig. Im Beispielcode sollte diese Abhängigkeit bereits enthalten sein. Es empfiehlt sich aber, die folgenden Schritte auszuführen, um sicherzugehen.

1. Rufen Sie die Datei build.gradle des app-Moduls auf und achten Sie darauf, dass der dependencies-Block eine Abhängigkeit von MDC Android enthält:

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

2. Optional: Bearbeiten Sie 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'
}

Starter-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 Ausführen/Wiedergeben, um die App zu erstellen und auszuführen. Wenn im Fenster Bereitstellungsziel auswählen ein Android-Gerät aufgeführt ist, fahren Sie mit Schritt 8 fort. Andernfalls klicken Sie auf 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 eine aktuelle Android-Version aus, am besten das höchste API-Level. Sollte die App nicht installiert sein, klicken Sie auf den angezeigten Link Herunterladen und schließen Sie den Download ab. Klicken Sie auf Weiter. Übernehmen Sie auf dem Bildschirm Virtuelles Android-Gerät (AVD) die aktuellen Einstellungen und klicken Sie auf Fertigstellen. Wählen Sie im Dialogfeld „Bereitstellungsziel“ ein Android-Gerät aus. Klicke auf OK. Die App wird mit Android Studio erstellt, bereitgestellt und automatisch auf dem Zielgerät geöffnet.

Wenn Sie die Abhängigkeit nicht hinzufügen können oder die App nicht ausgeführt werden konnte, beenden Sie die Entwicklerumgebung und beheben Sie die Fehler.

Wenn beim Erstellen der Fehler INSTALL_FAILED_INVALID_APK angezeigt wird, führen Sie in Android Studio den Befehl Build' -> Clean Project' aus.

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

Ändern Sie die Farbe, Höhe und Typografie der App, damit die oberste App-Leiste mit der Marke des Schreins übereinstimmt.

Dieses Farbdesign wurde von einem Designer mit benutzerdefinierten Farben erstellt (siehe Bild unten). Sie enthält Farben, die von der Marke Schreiner ausgewählt und auf den Material-Design-Editor angewendet wurden. Dadurch wurde die Auswahl erweitert. Diese Farben stammen aus den Materialfarben von 2014.

Im Materialdesign-Editor sind sie in numerischer Kennzeichnungen zusammengefasst, darunter die Labels 50, 100, 200 usw. bis 900 in jeder Farbe. Für den Schrein werden nur die Farbtöne 50, 100 und 300 aus dem rosafarbenen Muster und 900 aus dem braunen Muster verwendet.

Ändern Sie die Farbe der oberen App-Leiste, um sie an das Farbschema anzupassen.

colorPrimaryDark und colorAccent festlegen

Ändern Sie in colors.xml die folgenden Zeilen. Mit dem Attribut colorAccent lässt sich unter anderem die Farbe der oberen Leiste der App und das Attribut colorPrimaryDark die Farbe der Statusleiste steuern.

farbe.xml

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

Fügen Sie dem App-Design von Theme.Shrine, dem Schrein, Folgendes hinzu, um in der Statusleiste dunkle Symbole zu verwenden:

styles.xml

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

Tipp: Du musst den Tools-Namespace in das Tag <resource> importieren, wie unten gezeigt:

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

Ihr colors.xml und Ihr styles.xml sollten so aussehen:

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

Aktualisieren Sie die styles.xml-Datei, um die

auf die soeben definierte textColorPrimary-Farbe.

Übrigens: Lege das Attribut android:theme im Design Widget.Shrine.Toolbar auf Theme.Shrine fest.

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

Ihr colors.xml und Ihr styles.xml sollten so aussehen:

farbe.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 Das Produktraster sollte nun so aussehen:

Der Stil des Anmeldebildschirms wird an das Farbschema angepasst.

Stil der Textfelder festlegen

Ändern Sie die Texteingabe auf der Anmeldeseite so, dass sie umrandet und bessere Farben für das Layout verwendet werden.

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

farbe.xml

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

Füge zwei neue Stile in deinem styles.xml 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>

Abschließend setzen Sie das Attribut „style“ auf beide TextInputLayout-XML-Komponenten in shr_login_fragment.xml auf Ihren neuen Stil:

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>

Farben der Schaltfläche anpassen

Gestalten Sie schließlich die Farben der Schaltflächen auf der Anmeldeseite. Füge deinem 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 entspricht dem Standardstil MaterialButton und ändert die Textfarbe und die Hintergrundfarbe der Schaltfläche. Widget.Shrine.Button.TextButton geht über den Standardstil textMaterialButton hinaus und ändert nur die Textfarbe.

Lege das Design Widget.Shrine.Button auf der Schaltfläche „Weiter“ und das Design Widget.Shrine.Button.TextButton auf deiner 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 an der Vektor-Cable (shr_logo.xml) erforderlich. Öffnen Sie die Drawable-Datei und ändern Sie die Eigenschaft android:fillAlpha in 1. Die Leiste sollte 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 so fest: ?android:attr/textColorPrimary.

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 Ihrer UI anpassen, um Ihre Marke besser auszudrücken.
• Erstellen Sie eine Farbvorlage, die aus zwei Farben (primäre und sekundäre Farben) und hellen und dunklen Varianten dieser Farben besteht. Sie können aber auch das Material Design-Palettentool verwenden.
• Vergessen Sie nicht die Farbe Ihrer Typografie!
• Achten Sie darauf, dass der Kontrast zwischen Text und Hintergrund in einem leicht zugänglichen Verhältnis liegt (3:1 für großen Typ, 4,5:1 für kleine).

Neben den Farbänderungen hat Ihr Designer auch eine spezifische Typografie für die Website bereitgestellt. Fügen wir das auch in der oberen App-Leiste ein.

Apps in der oberen Leiste

Passen Sie den Stil der oberen Leiste der App an die Spezifikationen Ihres Designers an. Füge den folgenden Textdarstellungsstil zu styles.xml hinzu und lege die titleTextAppearance-Property so fest, dass sie auf deinen Stil in deinem Widget.Shrine.Toolbar-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>

Ihr colors.xml und Ihr styles.xml sollten so aussehen:

farbe.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 formatieren

Die Produktkartenlabels werden so gestaltet, dass die richtige Textdarstellung verwendet wird und sie innerhalb der Karte horizontal zentriert wird.

Aktualisieren Sie die Typografie für das Titellabel so, dass von textAppearanceHeadline6 auf textAppearanceSubtitle2 gewechselt wird:

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

Die Art der Anmeldebildschirm ändern.

Schriftart des Anmeldebildschirms ändern

Füge 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 auf Ihren Titel <TextView> fest (und löschen Sie die dort 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 jetzt so aussehen:

Hinweise zur Typografie:

• Bei der Auswahl von Textschriftarten, die für kleine Text- und Haupttexte verwendet werden, wählen Sie Schriftarten, die deutlich und nicht für einen bestimmten Stil erkennbar sind.
• Schriftart für große Typen und Titel verwenden, um Marken hervorzuheben oder hervorzuheben

Nachdem Sie die Seite jetzt mit einer Farbe und einer Typografie versehen haben, die Schreinen entspricht, sehen Sie sich die Karten an, auf denen die Produkte von Shrine angezeigt werden. Aktuell befindet sie sich auf einer weißen Oberfläche unter der App-Navigation. Um die Aufmerksamkeit auf die Produkte zu lenken, sollten Sie sie stärker hervorheben.

Höhen des Produktrasters ändern

Sie können festlegen, dass die Inhalte auf einem Tabellenblatt über der oberen App-Leiste angezeigt werden, indem Sie die Erhebungen der oberen App-Leiste ändern. Füge das Attribut app:elevation deiner AppBarLayout und das Attribut android:elevation deinen 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>

Höhe und Farbe der Karte ändern

Passen Sie die Höhe jeder Karte an, indem Sie das app:cardElevation in shr_product_card.xml von 2dp in 0dp ändern. Ändern Sie auch die app:cardBackgroundColor zu @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">

Jetzt ansehen. Sie haben die Höhe jeder Karte auf der Produktrasterseite angepasst.

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

Füge in styles.xml die folgende Property zu deinem Widget.Shrine.Button-Design 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 des Codes die Fehlermeldung Symbol kann nicht aufgelöst werden, drücken Sie Alt + Eingabetaste oder auf dem Mac Wahltaste + Rückgabe, um die fehlenden Symbole zu importieren.

Wenn android:stateListAnimator im Stil des Button festgelegt wird, wird die Schaltfläche „Weiter“ verwendet, um den von uns bereitgestellten Animator zu verwenden.

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 Unterteilung zwischen einer Oberfläche und einer anderen beginnt mit der Anzahl der Oberflächenkanten.
• Höhenunterschiede zwischen Oberflächen können durch abgedunkelte Hintergründe, helle Hintergründe oder Schatten ausgedrückt werden.
• Oberflächen vor anderen Oberflächen enthalten normalerweise wichtigere Inhalte.

Ändern Sie das Layout, damit die Karten in unterschiedlichen Seitenverhältnissen und Größen angezeigt werden, sodass jede Karte von den anderen individuell aussieht.

Gestaffelten RecyclerView-Adapter verwenden

Im staggeredgridlayout-Paket haben wir einen neuen RecyclerView-Adapter bereitgestellt, der ein asymmetrisches gestaffeltes Kartenlayout für horizontales Scrollen anzeigt. Sie können diesen Code gern selbst verwenden, wir werden aber nicht darauf eingehen, wie er hier implementiert wird.

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

ProductGridFragment.kt (in englischer Sprache)

// 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 unseren shr_product_grid_fragment.xml vornehmen, um die Abstände aus dem NestedScrollView zu entfernen. Das geht so:

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">

Zum Schluss passen wir den Kartenabstand 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 Produktrasterelemente sollten jetzt gestaffelt sein:

Eine Farbe ist ein wirkungsvolles Mittel, um Ihre Marke auszudrücken. Schon eine kleine Änderung der Farbe kann einen großen Einfluss auf die Nutzererfahrung haben. Um das zu testen, zeigen wir, wie der Schrein aussehen würde, wenn sich das Farbschema der Marke komplett ändern würde.

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>

Verwende in AndroidManifest.xml dieses neue Design in deiner App:

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 dargestellt:

farbe.xml

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

Legen Sie dann das android:theme-Attribut unseres Symbolleistenstils so fest, dass es 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>

Hebe als Nächstes die Textfarbe für den Hinweis auf dem Anmeldebildschirm 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.

Setzen Sie den Code in diesem Abschnitt zurück, bevor Sie zu MDC-104 wechseln.

Jetzt hast du eine App erstellt, die den Designspezifikationen deines Designers entspricht.

Die fertige MDC 103 App ist verfügbar, indem du das abgelaufene Codelab herunterlädst oder die fertige Version dieses Codelabs mit Git herunterlädst: git checkout 103-complete.

Sie können Ihre Version der App mit der abgeschlossenen Version testen.

Nächste Schritte

Sie haben die folgenden MDC-Komponenten verwendet: Design, Typografie und Erhebung. In der [MDC-Webbibliothek] finden Sie weitere Komponenten und Subsysteme.

Was ist, wenn Ihr geplantes App-Design Elemente enthält, die keine Komponenten in der MDC-Bibliothek haben? In MDC-104: Material Design Advanced Components wird beschrieben, wie Sie mit der MDC-Bibliothek benutzerdefinierte Komponenten erstellen und so einen bestimmten Look erreichen.

Ich konnte dieses Codelab mit angemessenem Zeitaufwand starten.

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

Ich möchte Materialkomponenten weiterhin verwenden

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