MDC-101 Android: Grundlagen zu Material Components (MDC) (Java)

1. Einführung

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

Was sind Material Design und Material Components für Android?

Material Design ist ein System zum Erstellen ausdrucksstarker und ansprechender digitaler Produkte. Indem sie Stil, Branding, Interaktion und Bewegung unter einem einheitlichen Satz von Prinzipien und Komponenten vereinen, können Produktteams ihr größtes Designpotenzial ausschöpfen.

Bei Android-Apps vereint Material Components for Android (MDC Android) Design und Entwicklung mit einer Komponentenbibliothek, um für Konsistenz in Ihrer App zu sorgen. Im Zuge der Weiterentwicklung des Material Design-Systems werden diese Komponenten aktualisiert, um eine konsistente Pixel-perfekte Implementierung und die Einhaltung der Frontend-Entwicklungsstandards von Google sicherzustellen. MDC ist auch für Web, iOS und Flutter verfügbar.

In diesem Codelab erstellen Sie eine Anmeldeseite mit verschiedenen MDC-Komponenten von Android.

Inhalt

Dieses Codelab ist das erste von vier Codelabs, in dem du die App Shrine entwickelst. Das ist eine E-Commerce-App für Android, mit der Kleidung und Haushaltswaren verkauft werden. Es wird gezeigt, wie Sie mithilfe von MDC-Android Komponenten an beliebige Marken und Stile anpassen können.

In diesem Codelab erstellst du eine Anmeldeseite für Shrine, die Folgendes enthält:

• Zwei Textfelder, eines zum Eingeben eines Nutzernamens und eines für ein Passwort
• Zwei Schaltflächen, eine für „Abbrechen“ und eine für „Weiter“
• Der Name der App (Schrein)
• Bild des Shrine-Logos

Die zugehörigen Codelabs findest du unter:

• MDC 102: Struktur und Layout von Material Design
• MDC 103: Material Design-Designs mit Farbe, Form, Höhe und Typ
• MDC 104: Erweiterte Komponenten von Material Design

Bis zum Ende der Version 104 von MDC erstellen Sie eine Android-App, die so aussieht:

MDC-Android-Komponenten in diesem Codelab

• Textfeld
• Schaltfläche

In diesem Codelab verwenden Sie die Standardkomponenten von MDC Android. Wie Sie sie anpassen, erfahren Sie in MDC 103: Material Design Theming with Color, Shape, Elevation and Type (Material Design-Designs mit Farbe, Form, Höhe und Typ).

Voraussetzungen

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

Wie würdest du deine Erfahrung mit der Entwicklung von Android-Apps bewerten?

<ph type="x-smartling-placeholder"></ph> Neuling Mittel Kompetent

2. Entwicklungsumgebung einrichten

Android Studio starten

Wenn Sie Android Studio öffnen, sollte ein Fenster mit dem Titel „Welcome to Android Studio“ (Willkommen bei Android Studio) angezeigt werden. Wenn Sie Android Studio jedoch zum ersten Mal starten, führen Sie die Schritte im Android Studio-Einrichtungsassistenten mit den Standardwerten aus. Es kann einige Minuten dauern, bis die erforderlichen Dateien heruntergeladen und installiert wurden. Sie können diesen Schritt also im Hintergrund ausführen, während Sie mit dem nächsten Abschnitt fortfahren.

Starter-Codelab-App herunterladen

Starter App herunterladen

Die Start-App befindet sich im Verzeichnis material-components-android-codelabs-101-starter/java.

...oder von 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 101-starter

Weitere Informationen finden Sie unter Repository von GitHub klonen.

Startcode in Android Studio laden

1. Sobald der Einrichtungsassistent fertig ist und das Fenster Willkommen bei Android Studio angezeigt wird, klicken Sie auf Vorhandenes Android Studio-Projekt öffnen. Navigieren Sie zu dem Verzeichnis, in dem Sie den Beispielcode installiert haben, und wählen Sie java -> Schrein (oder suche auf deinem Computer nach Schrein), um das Shrine-Projekt zu öffnen.
2. Warten Sie einen Moment, bis das Projekt in Android Studio erstellt und synchronisiert wurde. Dies können Sie an den Aktivitätsanzeigen unten im Android Studio-Fenster erkennen.
3. An dieser Stelle kann Android Studio einige Build-Fehler ausgeben, weil das Android SDK oder die Build-Tools (siehe unten) fehlen. Folgen Sie der Anleitung in Android Studio, um diese zu installieren bzw. zu aktualisieren und Ihr Projekt zu synchronisieren.

Projektabhängigkeiten hinzufügen

Für das Projekt ist eine Abhängigkeit von der MDC-Android-Supportbibliothek erforderlich. Im Beispielcode, den Sie heruntergeladen haben, sollte diese Abhängigkeit bereits aufgeführt sein. Es empfiehlt sich jedoch, die folgenden Schritte durchzuführen, um sicherzugehen.

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

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

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

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

Starter-App ausführen

Achten Sie darauf, dass die Build-Konfiguration links von der Schaltfläche Run / Play den Wert app hat. Klicken Sie auf die grüne Schaltfläche Run / Play, um die App zu erstellen und auszuführen. Wenn im Fenster Select Deployment Target (Bereitstellungsziel auswählen) unter den verfügbaren Geräten bereits ein Android-Gerät aufgeführt ist, fahren Sie mit Schritt 8 fort. Klicken Sie andernfalls auf Neues virtuelles Gerät erstellen. Wählen Sie auf dem Bildschirm Hardware auswählen ein Smartphone wie Pixel 2 aus und klicken Sie auf Weiter. Wählen Sie auf dem Bildschirm System-Image die aktuelle Android-Version aus, vorzugsweise die höchste API-Ebene. Falls sie nicht installiert ist, klicken Sie auf den angezeigten Link Herunterladen und schließen Sie den Download ab. Klicken Sie auf Weiter. Lassen Sie die Einstellungen auf dem Bildschirm Android Virtual Device (AVD) unverändert und klicken Sie auf Finish (Fertigstellen). Wählen Sie im Dialogfeld 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, beenden Sie Ihre Entwicklungsumgebung und beheben Sie Fehler.

Wenn beim Erstellen der Fehler „INSTALL_FAILED_INVALID_APK“ auftritt, versuche es mit einem Build -&gt; „Clean Project“ in Android Studio.

Fertig! Der Startcode für die Anmeldeseite von Shrine sollte in deinem Emulator ausgeführt werden. Du solltest den Namen „Schrein“ sehen und das Shrine-Logo direkt darunter.

Sehen wir uns den Code an. In unserem Beispielcode finden Sie ein einfaches Fragment-Navigations-Framework, mit dem Sie Fragmente anzeigen und zwischen Fragmenten wechseln können.

Öffnen Sie MainActivity.java im Verzeichnis shrine -> app -> src -> main -> java -> com.google.codelabs.mdc.java.shrine. Sie sollte Folgendes enthalten:

MainActivity.java

package com.google.codelabs.mdc.java.shrine;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;

public class MainActivity extends AppCompatActivity implements NavigationHost {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.shr_main_activity);

       if (savedInstanceState == null) {
           getSupportFragmentManager()
                   .beginTransaction()
                   .add(R.id.container, new LoginFragment())
                   .commit();
       }
   }

   /**
    * Navigate to the given fragment.
    *
    * @param fragment       Fragment to navigate to.
    * @param addToBackstack Whether or not the current fragment should be added to the backstack.
    */
   @Override
   public void navigateTo(Fragment fragment, boolean addToBackstack) {
       FragmentTransaction transaction =
               getSupportFragmentManager()
                       .beginTransaction()
                       .replace(R.id.container, fragment);

       if (addToBackstack) {
           transaction.addToBackStack(null);
       }

       transaction.commit();
   }
}

Diese Aktivität zeigt die Layoutdatei R.layout.shr_main_activity an, die in shr_main_activity.xml definiert ist.

Wie Sie sehen, startet MainActivity.java in onCreate(), eine Fragment-Transaktion, um LoginFragment anzuzeigen. LoginFragment. Das werden wir in diesem Codelab ändern. In der Aktivität wird außerdem eine in NavigationHost definierte navigateTo(Fragment)-Methode implementiert, mit der jedes Fragment zu einem anderen Fragment navigieren kann.

Befehlstaste + Klick (oder Strg + Klick) shr_main_activity in der Aktivitätsdatei, um die Layoutdatei zu öffnen, oder navigieren Sie in app -> res -> layout -> shr_main_activity.xml zur Layoutdatei.

Hinweis: Wenn Sie beim Öffnen von shr_main_activity.xml eine App-Vorschau anstelle einer XML-Datei sehen, wechseln Sie vom Design aus. auf den Tab Text unten links im Steuerfeld. Wir arbeiten an Text. für die Dauer dieses Codelabs.

shr_main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity" />

Hier sehen Sie ein einfaches <FrameLayout>, das als Container für alle Fragmente dient, die in der Aktivität angezeigt werden. Öffnen wir LoginFragment.java.

LoginFragment.java

package com.google.codelabs.mdc.java.shrine;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;

/**
* Fragment representing the login screen for Shrine.
*/
public class LoginFragment extends Fragment {

   @Override
   public View onCreateView(
           @NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
       // Inflate the layout for this fragment
       View view = inflater.inflate(R.layout.shr_login_fragment, container, false);

       // Snippet from "Navigate to the next Fragment" section goes here.

       return view;
   }

   // "isPasswordValid" from "Navigate to the next Fragment" section method goes here
}

LoginFragment maximiert die shr_login_fragment-Layoutdatei und zeigt sie in onCreateView() an. Sehen wir uns die Layoutdatei shr_login_fragment.xml an, um zu sehen, wie die Anmeldeseite aussieht.

shr_login_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@color/loginPageBackgroundColor"
   tools:context=".LoginFragment">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:clipChildren="false"
       android:clipToPadding="false"
       android:orientation="vertical"
       android:padding="24dp"
       android:paddingTop="16dp">

       <ImageView
           android:layout_width="64dp"
           android:layout_height="64dp"
           android:layout_gravity="center_horizontal"
           android:layout_marginTop="48dp"
           android:layout_marginBottom="16dp"
           app:srcCompat="@drawable/shr_logo" />

       <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:textAllCaps="true"
           android:textSize="16sp" />

       <!-- Snippet from "Add text fields" section goes here. -->

       <!-- Snippet from "Add buttons" section goes here. -->

   </LinearLayout>
</ScrollView>

Hier sehen wir ein <LinearLayout> mit einem <ImageView> ganz oben, das für den „Schrein“ steht. Logo.

Darauf folgt ein <TextView>-Tag, das für „SHRINE“ steht. . Der Text für dieses Label ist eine Stringressource mit dem Namen @string/shr_app_name. Wenn Sie auf den Namen der String-Ressource Strg + Klick oder Strg + Klick drücken oder app -> res -> values -> strings.xml öffnen, können Sie die Datei strings.xml sehen, in der Stringressourcen definiert sind. Wenn in Zukunft weitere Stringressourcen hinzugefügt werden, werden sie hier definiert. Jede Ressource in dieser Datei sollte das Präfix shr_ haben, um darauf hinzuweisen, dass sie Teil der Shrine-Anwendung ist.

Da Sie nun mit dem Startcode vertraut sind, können wir unsere erste Komponente implementieren.

3. Textfelder hinzufügen

Zunächst fügen wir zwei Textfelder zu unserer Anmeldeseite hinzu, in die Nutzer ihren Nutzernamen und ihr Passwort eingeben können. Wir verwenden die MDC-Textfeldkomponente, die integrierte Funktionen zur Anzeige einer unverankerten Beschriftung und Fehlermeldungen enthält.

Die Material Design-Textfelder wurden erheblich verbessert. Sie bieten jetzt mehr Anpassungsoptionen, um Ihre Marke zu unterstützen. Die Verbesserungen wurden durch umfassende Forschung zur Nutzererfahrung (UX-Forschung) für eine bessere Nutzerfreundlichkeit und ein besseres visuelles Design gestützt.

Weitere Informationen zu den neuen Textfeldern finden Sie im Artikel der Material-Richtlinien.

XML hinzufügen

Füge in shr_login_fragment.xml zwei TextInputLayout-Elemente mit einem untergeordneten TextInputEditText-Element hinzu, das sich im <LinearLayout> unterhalb von „SHRINE“ befindet Label <TextView>:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   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"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

Tipp: Wenn Sie eine Datei schnell in Android Studio öffnen möchten, tippen Sie doppelt auf die Umschalttaste, um eine unverankerte Suchleiste aufzurufen, und geben Sie den Namen der Datei ein, die Sie öffnen möchten.

Das obige Snippet stellt zwei Textfelder dar, die jeweils aus einem <TextInputLayout>-Element und einem untergeordneten <TextInputEditText>-Element bestehen. Der Hinweistext für jedes Textfeld wird im Attribut android:hint angegeben.

Wir haben zwei neue String-Ressourcen für das Textfeld hinzugefügt: @string/shr_hint_username und @string/shr_hint_password. Öffnen Sie strings.xml, um diese Stringressourcen anzusehen.

strings.xml

...
<string name="shr_hint_username">Username</string>
<string name="shr_hint_password">Password</string>
...

Eingabevalidierung hinzufügen

TextInputLayout-Komponenten bieten eine integrierte Fehlerfeedbackfunktion.

Nehmen Sie folgende Änderungen an shr_login_fragment.xml vor, damit Fehlerfeedback angezeigt werden kann:

• Setzen Sie das Attribut app:errorEnabled für das TextInputLayout-Element Passwort auf „true“. Dadurch wird die Fehlermeldung unterhalb des Textfeldes um einen zusätzlichen Abstand ergänzt.
• Legen Sie das Attribut android:inputType auf „textPassword“ fest auf das Element Passwort TextInputEditText. Dadurch wird der Eingabetext im Passwortfeld ausgeblendet.

Nach dieser Änderung sollten die Textfelder in shr_login_fragment.xml so aussehen:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   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"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   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>

Versuchen Sie nun, die App auszuführen. Es sollte eine Seite mit zwei Textfeldern für „Nutzername“ angezeigt werden und „Passwort“.

Sehen Sie sich die Animation für unverankerte Labels an:

Zu den Funktionen von MDC-Textfeld gehören:

• Integriertes Fehlerfeedback anzeigen
• Unterstützung einer Ein/Aus-Schaltfläche für die Sichtbarkeit von Passwörtern mit app:passwordToggleEnabled
• Mit app:helperText integrierte Hilfstextfunktionen anbieten
• Anzeige der Gesamt- und maximalen Zeichenanzahl mit app:counterEnabled und app:counterMaxLength

4. Schaltflächen hinzufügen

Als Nächstes fügen wir zwei Schaltflächen zu unserer Anmeldeseite hinzu: "Abbrechen". und „Weiter“. Wir verwenden die Komponente für die MDC-Schaltfläche, die mit dem ikonischen, symbolhaften Tinten-Ripple-Effekt von Material Design ausgestattet ist.

XML hinzufügen

Füge in shr_login_fragment.xml dem <LinearLayout> unter den TextInputLayout-Elementen ein <RelativeLayout> hinzu. Fügen Sie dann zwei <MaterialButton>-Elemente zu <RelativeLayout> hinzu.

Die resultierende XML-Datei sollte wie folgt aussehen:

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

Hinweis: Die Komponente MaterialButton hat den Standardstil einer farbigen Schaltfläche mit erhöhten Rechten. Für diese Abbrechen-Schaltfläche möchten wir jedoch eine nicht hervorgehobene, nicht gefüllte Schaltfläche sein. Zu diesem Zweck wenden wir ein style-Attribut an: @style/Widget.MaterialComponents.Button.TextButton.

Fertig! Wenn du die App startest, wird beim Tippen auf die einzelnen Schaltflächen eine Wellen der Tinte angezeigt.

Zu den Funktionen der MDC-Schaltfläche gehören:

• Standardmäßig integriertes Touch-Feedback (als MDC Ripple bezeichnet)
• Standardhöhe
• Eckenradius und Strich anpassbar

5. Zum nächsten Fragment gehen

Zum Schluss fügen wir etwas Java-Code zu LoginFragment.java hinzu, um unseren auf ein anderes Fragment. Sie werden feststellen, dass jeder der Komponenten, die wir zu unserem Layout hinzugefügt haben, ein id zugewiesen wurde. Wir verwenden diese ids, um auf die Komponenten in unserem Code zu verweisen und einige Fehlerprüfung und Navigation hinzuzufügen.

Fügen wir in LoginFragment.java unterhalb von onCreateView() eine private boolesche isPasswordValid-Methode mit Logik hinzu, die bestimmt, ob das Passwort gültig ist oder nicht. Für diese Demo stellen wir nur sicher, dass das Passwort mindestens 8 Zeichen lang ist:

LoginFragment.java

/*
   In reality, this will have more complex logic including, but not limited to, actual
   authentication of the username and password.
*/
private boolean isPasswordValid(@Nullable Editable text) {
   return text != null && text.length() >= 8;
}

Fügen Sie als Nächstes einen Klick-Listener zum Schaltfläche zum Festlegen und Löschen des Fehlers basierend auf der soeben erstellten isPasswordValid()-Methode. In onCreateView() sollte dieser Klick-Listener zwischen der Inflater-Zeile und der return view-Zeile platziert werden.

Als Nächstes fügen wir dem Passwort TextInputEditText einen Schlüssel-Listener hinzu, um auf Schlüsselereignisse zu warten, die den Fehler löschen. Dieser Listener sollte auch isPasswordValid() verwenden, um zu prüfen, ob das Passwort gültig ist. Sie können dies direkt unter dem Klick-Listener in onCreateView() hinzufügen.

Die onCreateView()-Methode sollte nun in etwa so aussehen:

LoginFragment.java

@Override
public View onCreateView(
       @NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   // Inflate the layout for this fragment
   View view = inflater.inflate(R.layout.shr_login_fragment, container, false);
   final TextInputLayout passwordTextInput = view.findViewById(R.id.password_text_input);
   final TextInputEditText passwordEditText = view.findViewById(R.id.password_edit_text);
   MaterialButton nextButton = view.findViewById(R.id.next_button);

   // Set an error if the password is less than 8 characters.
   nextButton.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View view) {
           if (!isPasswordValid(passwordEditText.getText())) {
               passwordTextInput.setError(getString(R.string.shr_error_password));
           } else {
               passwordTextInput.setError(null); // Clear the error
           }
       }
   });

   // Clear the error once more than 8 characters are typed.
   passwordEditText.setOnKeyListener(new View.OnKeyListener() {
       @Override
       public boolean onKey(View view, int i, KeyEvent keyEvent) {
           if (isPasswordValid(passwordEditText.getText())) {
               passwordTextInput.setError(null); //Clear the error
           }
           return false;
       }
   });
   return view;
}            

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

Jetzt können wir zu einem anderen Fragment navigieren. Aktualisieren Sie OnClickListener in onCreateView(), um nach erfolgreicher Fehlervalidierung zu einem anderen Fragment zu wechseln. Dazu fügen Sie die folgende Zeile hinzu, um zu ProductGridFragment für den else-Fall des Klick-Listeners zu gelangen:

LoginFragment.java

...
((NavigationHost) getActivity()).navigateTo(new ProductGridFragment(), false); // Navigate to the next Fragment
...

Der Klick-Listener sollte jetzt so aussehen:

LoginFragment.java

...
MaterialButton nextButton = view.findViewById(R.id.next_button);

// Set an error if the password is less than 8 characters.
nextButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
       if (!isPasswordValid(passwordEditText.getText())) {
           passwordTextInput.setError(getString(R.string.shr_error_password));
       } else {
           passwordTextInput.setError(null); // Clear the error
           ((NavigationHost) getActivity()).navigateTo(new ProductGridFragment(), false); // Navigate to the next Fragment
       }
   }
});
...

Diese neue Codezeile ruft die Methode navigateTo() von MainActivity auf, um zu einem neuen Fragment zu gelangen: ProductGridFragment. Derzeit ist dies eine leere Seite, an der Sie in MDC-102 arbeiten werden.

Der Parameter false in navigateTo() weist die Aktivität an, das aktuelle Fragment nicht zum Backstack hinzuzufügen, sodass der Nutzer nicht mit der Zurücktaste zum Anmeldebildschirm zurückkehren kann.

Erstellen Sie nun die App. Drücke die Schaltfläche „Weiter“.

Geschafft! Dieser Bildschirm ist der Ausgangspunkt für unser nächstes Codelab, an dem Sie in MDC-102 arbeiten werden.

6. Fertig

Mit grundlegendem XML-Markup und ca. 30 Zeilen Java haben Sie mithilfe der Material Components for Android-Bibliothek eine ansprechende Anmeldeseite erstellt, die den Material Design-Richtlinien entspricht und auf allen Geräten einheitlich aussieht und funktioniert.

Sie können die fertige MDC 101-App herunterladen, indem Sie das abgeschlossene Codelab herunterladen oder sich „101-complete“ mit git: git checkout 101-complete ansehen.

Sie können Ihre Version der Seite mit der fertigen Version vergleichen, indem Sie das Projekt Shrine in diesem Verzeichnis mit Android Studio öffnen und die App ausführen.

Weiteres Vorgehen

Das Textfeld und die Schaltfläche sind zwei Hauptkomponenten in der MDC Android-Bibliothek, es gibt jedoch noch viele weitere. Sie können sich auch die übrigen Komponenten für MDC Android ansehen. Alternativ können Sie sich in MDC 102: Material Design Structure and Layout über die obere App-Leiste, die Kartenansicht und das Rasterlayout informieren. Vielen Dank, dass Sie Material Components ausprobieren. Wir hoffen, dieses Codelab hat Ihnen gefallen.

Ich konnte dieses Codelab mit angemessenem Zeit- und Arbeitsaufwand abschließen

<ph type="x-smartling-placeholder"></ph> Stimme vollkommen zu Stimme zu Weder zufrieden noch unzufrieden Stimme nicht zu Stimme überhaupt nicht zu

Ich möchte Material Components weiterhin verwenden.

<ph type="x-smartling-placeholder"></ph> Stimme vollkommen zu Stimme zu Weder zufrieden noch unzufrieden Stimme nicht zu Stimme überhaupt nicht zu