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
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?
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
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
Startcode in Android Studio laden
- 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.
- 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.
- 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.
- Rufen Sie die Datei
build.gradle
des Modulsapp
auf und prüfen Sie, ob der Blockdependencies
eine Abhängigkeit von MDC Android enthält:
api 'com.google.android.material:material:1.1.0-alpha06'
- 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
|
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>
<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.
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:
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:
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>
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:
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.
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.