MDC-104 Android: Material Advanced Components (Kotlin)

1. Einführung

Mit Material Components (MDC) können Entwickler Material Design implementieren. MDC wurde von einem Team aus Ingenieuren und UX-Designern bei Google entwickelt und bietet Dutzende von ansprechenden und funktionalen UI-Komponenten.Es ist für Android, iOS, das Web und Flutter verfügbar: material.io/develop

Im Codelab MDC-103 haben Sie die Farbe, die Ebenentiefe und die Typografie von Material Components (MDC) angepasst, um Ihre App zu gestalten.

Eine Komponente im Material Design-System führt eine Reihe vordefinierter Aufgaben aus und hat bestimmte Merkmale, z. B. eine Schaltfläche. Eine Schaltfläche ist jedoch mehr als nur eine Möglichkeit für Nutzer, eine Aktion auszuführen. Sie ist auch ein visueller Ausdruck von Form, Größe und Farbe, der Nutzern zeigt, dass sie interaktiv ist und dass beim Tippen oder Klicken etwas passiert.

In den Richtlinien für Material Design werden Komponenten aus der Sicht eines Designers beschrieben. Sie beschreiben eine breite Palette grundlegender Funktionen, die auf allen Plattformen verfügbar sind, sowie die anatomischen Elemente, aus denen jede Komponente besteht. Ein Hintergrund besteht beispielsweise aus einer hinteren Ebene und ihren Inhalten, der vorderen Ebene und ihren Inhalten, Bewegungsregeln und Anzeigeoptionen. Jede dieser Komponenten kann an die Anforderungen, Anwendungsfälle und Inhalte der jeweiligen App angepasst werden. Bei diesen Komponenten handelt es sich größtenteils um herkömmliche Ansichten, Steuerelemente und Funktionen aus dem SDK Ihrer Plattform.

In den Richtlinien für Material Design werden zwar viele Komponenten genannt, aber nicht alle eignen sich für wiederverwendbaren Code und sind daher nicht in MDC enthalten. Sie können diese Elemente selbst erstellen, um einen benutzerdefinierten Stil für Ihre App zu erzielen. Dazu verwenden Sie herkömmlichen Code.

Aufgaben

In diesem Codelab fügen Sie Shrine einen Hintergrund hinzu. Dadurch werden die Produkte im asymmetrischen Raster nach Kategorie gefiltert. Sie verwenden:

• Form
• Bewegung
• Herkömmliche Android SDK-Klassen

Dies ist das letzte von vier Codelabs, in denen Sie eine App für ein Produkt namens Shrine erstellen. Wir empfehlen, alle Codelabs in der Reihenfolge zu bearbeiten, da die Aufgaben Schritt für Schritt durchgegangen werden.Die zugehörigen Codelabs finden Sie hier: MDC-101: Grundlagen der Material-Komponenten (MDC) MDC-102: Struktur und Layout in Material Design. MDC-103: Material Design-Theming mit Farbe, Form, Ebenentiefe und Typografie

MDC-Android-Komponenten in diesem Codelab

• Form

Voraussetzungen

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

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

Anfänger Fortgeschritten Experte

2. Entwicklungsumgebung einrichten

Sie machen mit MDC-103 weiter?

Wenn Sie MDC-103 abgeschlossen haben, sollte Ihr Code für dieses Codelab bereit sein. Fahren Sie mit Schritt 3 fort.

Sie fangen ganz von vorne an?

Starter-App für das Codelab herunterladen

Starter-App herunterladen

Die Starter-App befindet sich im Verzeichnis material-components-android-codelabs-104-starter/kotlin. Achten Sie darauf, dass Sie sich vor Beginn in diesem Verzeichnis befinden.cd

...oder aus 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 104-starter

Weitere Informationen: Repository aus GitHub klonen

Starter-Code in Android Studio laden

1. Sobald der Einrichtungsassistent abgeschlossen ist und das Fenster Welcome to Android Studio (Willkommen in Android Studio) angezeigt wird, klicken Sie auf Open an existing Android Studio project (Vorhandenes Android Studio-Projekt öffnen). Rufen Sie das Verzeichnis auf, in dem Sie den Beispielcode installiert haben, und wählen Sie kotlin -> shrine aus. Sie können auch auf Ihrem Computer nach shrine suchen, um das Projekt „Shipping“ 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. An dieser Stelle werden in Android Studio möglicherweise einige Build-Fehler angezeigt, weil das Android SDK oder Build-Tools fehlen, z. B. der unten gezeigte Fehler. Folgen Sie der Anleitung in Android Studio, um diese zu installieren oder zu aktualisieren, und synchronisieren Sie Ihr Projekt.

Projektabhängigkeiten hinzufügen

Für das Projekt ist eine Abhängigkeit von der MDC Android-Supportbibliothek erforderlich. Die heruntergeladene Beispielcode sollte diese Abhängigkeit bereits enthalten. Es empfiehlt sich jedoch, die folgenden Schritte auszuführen, um sicherzugehen.

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

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

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

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 / Wiedergabe auf app festgelegt ist. Klicken Sie auf die grüne Schaltfläche Ausführen / Wiedergabe , um die App zu erstellen und auszuführen. Wenn im Fenster Select Deployment Target (Bereitstellungsziel auswählen) bereits ein Android-Gerät unter den verfügbaren Geräten aufgeführt ist, fahren Sie mit Schritt 8 fort. Klicken Sie andernfalls auf Create New Virtual Device (Neues virtuelles Gerät erstellen). Wählen Sie auf dem Bildschirm Select Hardware (Hardware auswählen) ein Smartphone aus, z. B. Pixel 2 , und klicken Sie dann auf Next (Weiter). Wählen Sie auf dem Bildschirm System Image (Systemabbild) eine aktuelle Android-Version aus, vorzugsweise mit dem höchsten API-Level. Wenn sie nicht installiert ist, klicken Sie auf den Link Download (Herunterladen) und schließen Sie den Download ab. Klicken Sie auf Next (Weiter). Übernehmen Sie auf dem Bildschirm Android Virtual Device (AVD) (Virtuelles Android-Gerät) die Einstellungen und klicken Sie auf Finish (Fertig). Wählen Sie im Dialogfeld für das 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, halten Sie an und beheben Sie die Fehler in Ihrer Entwicklungsumgebung.

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

Fertig! Die Shrine-App sollte auf Ihrem Gerät ausgeführt werden.

3. Hintergrundmenü hinzufügen

Ein Hintergrund ist die hinterste Oberfläche einer App, die hinter allen anderen Inhalten und Komponenten angezeigt wird. Er besteht aus zwei Oberflächen: einer hinteren Ebene (auf der Aktionen und Filter angezeigt werden) und einer vorderen Ebene (auf der Inhalte angezeigt werden). Sie können einen Hintergrund verwenden, um interaktive Informationen und Aktionen wie Navigations- oder Inhaltsfilter anzuzeigen.

Rasterinhalte ausblenden

Fügen Sie in shr_product_grid_fragment.xml das Attribut android:visibility="gone" zu Ihrem NestedScrollView hinzu, um die Produktinhalte vorübergehend 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"
   android:elevation="8dp"
   android:visibility="gone"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

In diesem Bereich wird ein Hintergrund installiert. Damit keine Trennung zwischen der oberen App-Leiste und den Menüinhalten angezeigt wird, die im Hintergrund erscheinen, legen wir für den Hintergrund dieselbe Farbe wie für die obere App-Leiste fest.

Fügen Sie in shr_product_grid_fragment.xml Folgendes als erstes Element in Ihrem Stamm-FrameLayout vor dem AppBarLayout hinzu:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="100dp"
   android:paddingBottom="100dp">

</LinearLayout>

Fügen Sie in styles.xml Folgendes hinzu:

styles.xml

<style name="Widget.Shrine.Backdrop" parent="">
   <item name="android:background">?attr/colorAccent</item>
</style>

Gut gemacht! Sie haben der UI von Shrine einen ansprechenden Hintergrund hinzugefügt. Als Nächstes fügen wir ein Menü hinzu.

Menü hinzufügen

Ein Menü ist im Grunde eine Liste von Textschaltflächen. Wir fügen hier eines hinzu.

Erstellen Sie im Verzeichnis res -> layout eine neue Layoutdatei namens shr_backdrop.xml und fügen Sie Folgendes hinzu:

shr_backdrop.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_featured_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_apartment_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_accessories_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_shoes_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_tops_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_bottoms_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_dresses_label" />

   <View
       android:layout_width="56dp"
       android:layout_height="1dp"
       android:layout_margin="16dp"
       android:background="?android:attr/textColorPrimary" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_account_label" />

</merge>

Fügen Sie diese Liste mit einem <include> -Tag dem gerade in shr_product_grid_fragment.xml hinzugefügten LinearLayout hinzu:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="88dp">

   <include layout="@layout/shr_backdrop" />
</LinearLayout>

Erstellen und ausführen. Ihr Startbildschirm sollte so aussehen:

Jetzt haben wir den Hintergrund eingerichtet. Wir holen die Inhalte zurück, die wir zuvor ausgeblendet haben.

4. Form hinzufügen

Bevor wir in diesem Codelab Änderungen an Shrine vorgenommen haben, befanden sich die primären Produktinhalte auf der hintersten Oberfläche. Durch das Hinzufügen eines Hintergrunds werden diese Inhalte jetzt stärker hervorgehoben, da sie vor diesem Hintergrund angezeigt werden.

Neue Ebene hinzufügen

Wir sollten die Ebene mit dem Produkt-Grid wieder anzeigen. Entfernen Sie das Attribut android:visibility="gone" aus Ihrem NestedScrollView:

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"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

Wir gestalten die vordere Ebene mit einer Kerbe in der oberen linken Ecke. In Material Design wird diese Art der Anpassung als Form bezeichnet. Material-Oberflächen können in verschiedenen Formen angezeigt werden. Formen verleihen Oberflächen mehr Ausdruck und Stil und können verwendet werden, um das Branding zu unterstreichen. Material-Formen können abgerundete oder eckige Ecken und Kanten sowie eine beliebige Anzahl von Seiten haben. Sie können symmetrisch oder unregelmäßig sein.

Form hinzufügen

Ändern Sie die Form des Rasters. Wir haben einen benutzerdefinierten Formhintergrund bereitgestellt, aber die Form wird nur unter Android Marshmallow und höher korrekt angezeigt. Wir können den Hintergrund shr_product_grid_background_shape nur unter Android Marshmallow und höher für Ihr NestedScrollView festlegen. Fügen Sie zuerst Ihrem NestedScrollView eine id hinzu, damit wir im Code darauf verweisen können:

shr_product_grid_fragment.xml

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

Legen Sie dann den Hintergrund programmatisch in ProductGridFragment.kt fest. Fügen Sie die folgende Logik hinzu, um den Hintergrund am Ende von onCreateView() festzulegen, direkt vor der Rückgabeanweisung:

ProductGridFragment.kt

// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
       view.product_grid.background = context?.getDrawable(R.drawable.shr_product_grid_background_shape)
}

Schließlich aktualisieren wir die Farbressource productGridBackgroundColor (die auch vom benutzerdefinierten Formhintergrund verwendet wird) so:

colors.xml

<color name="productGridBackgroundColor">#FFFBFA</color>

Erstellen und ausführen:

Wir haben der primären Oberfläche von Shrine eine benutzerdefinierte Form verliehen. Aufgrund der Ebenentiefe der Oberfläche können Nutzer sehen, dass sich direkt hinter der weißen Vorderseite etwas befindet. Wir fügen Bewegung hinzu, damit Nutzer sehen können, was sich dort befindet: das Menü.

5. Bewegung hinzufügen

Bewegung ist eine Möglichkeit, Ihre App lebendiger zu gestalten. Bewegung kann groß und dramatisch, subtil und minimal oder irgendwo dazwischen sein. Die Art der Bewegung, die Sie verwenden, sollte zur Situation passen. Bewegungen, die auf wiederholte regelmäßige Aktionen angewendet werden, sollten klein und subtil sein, damit sie nicht zu viel Zeit in Anspruch nehmen. Andere Situationen, z. B. wenn ein Nutzer eine App zum ersten Mal öffnet, können auffälliger sein und Nutzern helfen, die Verwendung Ihrer App zu erlernen.

Bewegung zum Einblenden der Menüschaltfläche hinzufügen

Die Bewegung besteht darin, dass sich die Form vor dem Hintergrund direkt nach unten bewegt. Wir haben bereits einen Click-Listener für Sie bereitgestellt, der die Übersetzungsanimation für das Sheet in NavigationIconClickListener.kt ausführt. Wir können diesen Click-Listener in onCreateView() von ProductGridFragement festlegen, im Abschnitt, der für die Einrichtung der Symbolleiste zuständig ist. Fügen Sie die folgende Zeile hinzu, um den Click-Listener für das Menüsymbol der Symbolleiste festzulegen:

ProductGridFragment.kt

view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))

Der Abschnitt sollte jetzt so aussehen:

ProductGridFragment.kt

// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))

Erstellen und ausführen. Klicken Sie auf die Menüschaltfläche:

Wenn Sie noch einmal auf das Symbol für das Navigationsmenü klicken, sollte es ausgeblendet werden.

Bewegung der vorderen Ebene anpassen

Bewegung ist eine gute Möglichkeit, Ihre Marke auszudrücken. Sehen wir uns an, wie die Animation zum Einblenden mit einer anderen Timing-Kurve aussieht.

Aktualisieren Sie den Click-Listener in ProductGridFragment.kt, um einen Interpolator an den Click-Listener des Navigationssymbols zu übergeben:

ProductGridFragment.kt

view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid, AccelerateDecelerateInterpolator()))

Das erzeugt einen anderen Effekt, oder?

6. Markensymbol

Das Branding erstreckt sich auch auf bekannte Symbole. Wir passen das Symbol zum Einblenden an und kombinieren es mit unserem Titel, um einen einzigartigen, markenspezifischen Look zu erzielen.

Symbol der Menüschaltfläche ändern

Ändern Sie die Menüschaltfläche so, dass ein Symbol mit einem Diamantdesign angezeigt wird. Aktualisieren Sie die Symbolleiste in shr_product_grid_fragment.xml, um ein neues Markensymbol zu verwenden, das wir für Sie bereitgestellt haben (shr_branded_menu). Legen Sie die Attribute app:contentInsetStart und android:padding fest, damit die Symbolleiste besser zu den Spezifikationen Ihres Designers passt:

shr_product_grid_fragment.xml

<androidx.appcompat.widget.Toolbar
   android:id="@+id/app_bar"
   style="@style/Widget.Shrine.Toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:paddingStart="12dp"
   android:paddingLeft="12dp"
   android:paddingEnd="12dp"
   android:paddingRight="12dp"
   app:contentInsetStart="0dp"
   app:navigationIcon="@drawable/shr_branded_menu"
   app:title="@string/shr_app_name" />

Wir aktualisieren noch einmal den Click-Listener in onCreateView() in ProductGridFragment.kt, um Drawables für die Symbolleiste zu verwenden, wenn das Menü geöffnet und geschlossen ist:

ProductGridFragment .kt

// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(
       activity!!,
       view.product_grid,
       AccelerateDecelerateInterpolator(),
       ContextCompat.getDrawable(context!!, R.drawable.shr_branded_menu), // Menu open icon
       ContextCompat.getDrawable(context!!, R.drawable.shr_close_menu))) // Menu close icon

Erstellen und ausführen:

Sehr gut! Wenn der Hintergrund eingeblendet werden kann, wird das Diamant-Menüsymbol angezeigt. Wenn das Menü ausgeblendet werden kann, wird stattdessen ein Schließen-Symbol angezeigt.

7. Zusammenfassung

Im Laufe dieser vier Codelabs haben Sie erfahren, wie Sie mit Material Components einzigartige, elegante Benutzeroberflächen erstellen, die die Persönlichkeit und den Stil einer Marke zum Ausdruck bringen.

Die fertige MDC-104-App ist verfügbar, indem Sie das abgeschlossene Codelab herunterladen oder 104-complete mit Git auschecken: git checkout 104-complete.

Sie können Ihre Version der App mit der App in diesem Branch vergleichen.

Weiteres Vorgehen

Dieses Codelab, MDC-104, schließt diese Reihe von Codelabs ab. Weitere Komponenten in MDC-Android finden Sie im MDC-Android-Komponentenkatalog.

Wenn Sie dieses Codelab noch weiter bearbeiten möchten, ändern Sie Ihre Shrine-App so, dass die Produktbilder geändert werden, die angezeigt werden, wenn im Hintergrundmenü eine Kategorie ausgewählt wird.

Informationen zum Verbinden dieser App mit Firebase für ein funktionierendes Backend finden Sie im Firebase Android Codelab.

Ich konnte dieses Codelab mit einem angemessenen Zeit- und Arbeitsaufwand abschließen.

Stimme voll und ganz zu Stimme zu Neutral Stimme nicht zu Stimme überhaupt nicht zu

Ich möchte Material Components auch in Zukunft verwenden.

Stimme voll und ganz zu Stimme zu Neutral Stimme nicht zu Stimme überhaupt nicht zu