MDC-104 Android: Erweiterte Material-Komponenten (Java)

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 dem Nutzer signalisiert, 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 Backdrop enthält beispielsweise eine hintere Ebene und deren Inhalt, die vordere Ebene und deren Inhalt, 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 Backdrop hinzu. Damit werden die Produkte, die im asymmetrischen Raster angezeigt werden, nach Kategorie gefiltert. Sie verwenden Folgendes:

• 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 vorn an?

Starter-App für das Codelab herunterladen

Starter-App herunterladen

Die Starter-App befindet sich im Verzeichnis material-components-android-codelabs-104-starter/java. Wechseln Sie mit cd in dieses Verzeichnis, bevor Sie beginnen.

...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). Gehen Sie zu dem Verzeichnis, in dem Sie den Beispielcode installiert haben, und wählen Sie java -> shrine aus. Alternativ können Sie auf Ihrem Computer nach shrine suchen, um das Shrine-Projekt zu öffnen.
2. Warten Sie einen Moment, bis Android Studio das Projekt erstellt und synchronisiert hat. Die Aktivitätsindikatoren werden 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. Gehen Sie zur Datei build.gradle des Moduls app 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

Prüfen Sie, ob die Build-Konfiguration links neben der Schaltfläche Run / Play (Ausführen/Wiedergabe) auf app festgelegt ist. Klicken Sie auf die grüne Schaltfläche Run / Play (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 in der Liste der verfügbaren Geräte aufgeführt ist, fahren Sie mit Schritt 8 fort. Klicken Sie andernfalls auf Create New Virtual Device (Neues virtuelles Gerät erstellen). Wählen Sie auf dem Bildschirm 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 Fehler in Ihrer Entwicklungsumgebung.

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

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

3. Backdrop-Menü hinzufügen

Ein Backdrop 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 (mit Aktionen und Filtern) und einer vorderen Ebene (mit Inhalten). Sie können einen Backdrop verwenden, um interaktive Informationen und Aktionen wie Navigations- oder Inhaltsfilter anzuzeigen.

Rasterinhalt ausblenden

Fügen Sie in shr_product_grid_fragment.xml das Attribut android:visibility="gone" zu Ihrem NestedScrollView hinzu, um den Produktinhalt 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 Backdrop installiert. Damit keine Trennung zwischen der oberen App-Leiste und dem Menüinhalt angezeigt wird, der auf dem Backdrop erscheint, legen wir für den Backdrop dieselbe Farbe wie für die obere App-Leiste fest.

Fügen Sie in shr_product_grid_fragment.xml vor der AppBarLayout Folgendes als erstes Element in Ihrem Stamm-FrameLayout 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 Backdrop 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 ein neues Layout 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 zu dem LinearLayout hinzu, das Sie gerade in shr_product_grid_fragment.xml hinzugefügt haben:

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:

Ihr Backdrop ist fertig. Jetzt holen wir 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 wichtigsten Produktinhalte auf der hintersten Oberfläche. Durch das Hinzufügen eines Backdrops werden diese Inhalte jetzt stärker hervorgehoben, da sie vor dem Backdrop angezeigt werden.

Neue Ebene hinzufügen

Wir sollten die Ebene mit dem Produktraster 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. Materialoberflä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 vermitteln. Materialformen 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.java fest. Fügen Sie die folgende Logik hinzu, um den Hintergrund am Ende von onCreateView() festzulegen, direkt vor der Rückgabeanweisung:

ProductGridFragment.java

// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    view.findViewById(R.id.product_grid).setBackgroundResource(R.drawable.shr_product_grid_background_shape);
}

Schließlich aktualisieren wir die Farbressource productGridBackgroundColor (die auch für den 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 vorderen weißen Ebene 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 sollte zur Situation passen. Bewegung, die auf wiederholte regelmäßige Aktionen angewendet wird, sollte klein und subtil sein, damit sie nicht regelmäßig zu viel Zeit in Anspruch nimmt. Andere Situationen, z. B. wenn ein Nutzer eine App zum ersten Mal öffnet, können auffälliger sein und dem Nutzer 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 Backdrop direkt nach unten bewegt. Wir haben bereits einen Klick-Listener für Sie bereitgestellt, der die Übersetzungsanimation für das Sheet in NavigationIconClickListener.java ausführt. Wir können diesen Klick-Listener in der Methode setupToolbar() von ProductGridFragment.java festlegen:

ProductGridFragment.java

toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));

Ihre Methode setUpToolbar() sollte jetzt so aussehen:

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.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 das Menü ausgeblendet werden.

Bewegung der vorderen Ebene anpassen

Bewegung ist eine gute Möglichkeit, Ihre Marke zu präsentieren. Sehen wir uns an, wie die Animation zum Einblenden mit einer anderen Timing-Kurve aussieht.

Aktualisieren Sie Ihren Code in setupToolbar() in ProductGridFragment.java, um einen Interpolator an den Klick-Listener Ihres Navigationssymbols zu übergeben:

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
           getContext(),
           view.findViewById(R.id.product_grid),
           new 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 führen es mit unserem Titel zusammen, 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 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" />

Aktualisieren Sie den Klick-Listener noch einmal in setupToolbar() in ProductGridFragment.java, um Drawables für die Symbolleiste zu verwenden, wenn das Menü geöffnet und wenn es geschlossen ist:

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
           getContext(),
           view.findViewById(R.id.product_grid),
           new AccelerateDecelerateInterpolator(),
           getContext().getResources().getDrawable(R.drawable.shr_branded_menu), // Menu open icon
           getContext().getResources().getDrawable(R.drawable.shr_close_menu))); // Menu close icon
}

Erstellen und ausführen:

Sehr gut! Wenn der Backdrop 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 mit Git 104-complete 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. Im Android Widgets Catalog finden Sie noch mehr Komponenten in MDC-Android.

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 Backdrop-Menü 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