MDC-101 Android: Grundlagen zu Hardware (MDC) – Kotlin

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

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

Material Design ist ein System zur Erstellung ausdrucksstarker und schöner digitaler Produkte. Durch die Kombination von Stil, Branding, Interaktion und Bewegung unter Berücksichtigung aller Grundsätze und Komponenten können Produktteams ihr größtes Designpotenzial ausschöpfen.

Bei Android-Apps werden die Komponenten Designkomponenten für Android(MDC Android) mit einer Bibliothek aus Komponenten kombiniert, um für eine einheitliche Konsistenz in Ihrer App zu sorgen. Im Zuge der Weiterentwicklung des Material Design-Systems werden diese Komponenten aktualisiert, um die konsistente Pixel-Implementierung und die Einhaltung der Front-End-Entwicklungsstandards von Google zu gewährleisten. MDC ist auch für das Web, iOS und Flutter verfügbar.

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

Inhalte, die Sie erstellen werden

Dieses Codelab ist das erste von vier Codelabs, bei denen du durch die Erstellung einer App namens Shrine geführt wirst, einer E-Commerce-Android-App, die Kleidung und Haushaltswaren verkauft. Sie erfahren, wie Sie Komponenten für MDC Android für jede Marke und jeden Stil anpassen können.

In diesem Codelab erstellen Sie eine Anmeldeseite für den Schrein, der Folgendes enthält:

• Zwei Textfelder, eines zur Eingabe eines Nutzernamens und eines für ein Passwort
• Zwei Tasten, eine für „Abbrechen“ und eine für „Weiter“
• Name der App (Schrein)
• Logo von Shrine'

Die zugehörigen Codelabs finden Sie unter:

• MDC 102: Struktur und Layout des Material Design
• MDC 103: Material Design mit Farbe, Form, Höhe und Typ
• MDC 104: Komponenten für erweitertes Design

Bis MDC 104 wirst du eine Android-App erstellen, die so aussieht:

MDC-Android-Komponenten in diesem Codelab

• Textfeld
• Schaltfläche

In diesem Codelab nutzen Sie die von MDC Android bereitgestellten Standardkomponenten. Sie erfahren in MDC 103: Material Design Designing with Color, Shape, Elevation and Type, wie Sie sie anpassen können.

Voraussetzungen

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

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

Fortgeschritten Fortgeschritten Profi

Android Studio starten

Wenn Sie Android Studio öffnen, sollte das Fenster „Willkommen bei Android Studio“ angezeigt werden. Falls Sie Android Studio zum ersten Mal starten, führen Sie die Schritte im Einrichtungsassistenten für Android Studio mit den Standardwerten aus. Dieser Schritt kann einige Minuten dauern, um die erforderlichen Dateien herunterzuladen und zu installieren. Sie können den Download daher im Hintergrund weiterlaufen lassen, während Sie den nächsten Abschnitt durchgehen.

Start der Codelab-App herunterladen

Starter-App herunterladen

Die Starter-App befindet sich im Verzeichnis material-components-android-codelabs-101-starter/kotlin.

...oder von GitHub klonen

Führen Sie die folgenden Befehle aus, um dieses Codelab aus GitHub zu klonen:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 101-starter

Weitere Informationen: Repository aus GitHub klonen

Startcode in Android Studio laden

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

Projektabhängigkeiten hinzufügen

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

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

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

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

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

Starter-App ausführen

Achten Sie darauf, dass die Build-Konfiguration links neben der Schaltfläche Ausführen/Wiedergeben app ist. Klicken Sie auf die grüne Schaltfläche Ausführen/Wiedergeben, um die App zu erstellen und auszuführen. Wenn im Fenster Bereitstellungsziel auswählen ein Android-Gerät aufgeführt ist, fahren Sie mit Schritt 8 fort. Andernfalls klicken Sie auf Neues virtuelles Gerät erstellen. Wählen Sie auf dem Bildschirm Hardware auswählen ein Smartphone aus, z. B. Pixel 2, und klicken Sie dann auf Weiter. Wählen Sie auf dem Bildschirm System Image eine aktuelle Android-Version aus, am besten das höchste API-Level. Sollte die App nicht installiert sein, klicken Sie auf den angezeigten Link Herunterladen und schließen Sie den Download ab. Klicken Sie auf Weiter. Übernehmen Sie auf dem Bildschirm Virtuelles Android-Gerät (AVD) die aktuellen Einstellungen und klicken Sie auf Fertigstellen. Wählen Sie im Dialogfeld „Bereitstellungsziel“ ein Android-Gerät aus. Klicke auf OK. Die App wird mit Android Studio erstellt, bereitgestellt und automatisch auf dem Zielgerät geöffnet.

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

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

Fertig! Der Starter-Code für die Anmeldeseite von Shrine sollte in deinem Emulator ausgeführt werden. Jetzt sollten der Name „Schrein“ und direkt daneben das Schrein-Logo angezeigt werden.

Sehen wir uns den Code etwas genauer an. In unserem Beispielcode wurde ein einfaches Fragment-Navigations-Framework bereitgestellt, mit dem Fragmente angezeigt und zwischen Fragmenten navigiert wird.

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

Hinweis: Weitere Informationen zu Navigation, Erstellung und Verwaltung von Navigationspfaden in Android Studio findest du in der Übung Kotlin Android Fundamentals 03.2: Navigationspfade definieren.

MainActivity.kt

package com.google.codelabs.mdc.kotlin.shrine

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

class MainActivity : AppCompatActivity(), NavigationHost {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.shr_main_activity)

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

   override fun navigateTo(fragment: Fragment, addToBackstack: Boolean) {
       val transaction = supportFragmentManager
               .beginTransaction()
               .replace(R.id.container, fragment)

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

       transaction.commit()
   }
}

Für diese Aktivität wird die in shr_main_activity.xml definierte Layoutdatei R.layout.shr_main_activity angezeigt.

Sie können sehen, dass onCreate(), MainActivity.kt eine Transaktion in Fragment startet, um LoginFragment anzuzeigen. Für dieses Codelab ändern wir LoginFragment. Durch die Aktivität wird außerdem eine navigateTo(Fragment)-Methode implementiert, die in NavigationHost definiert ist. Dadurch kann jedes Fragment zu einem anderen Fragment wechseln.

Befehl+Klick (oder Strg + Klick) shr_main_activityin der Aktivitätsdatei, um die Layoutdatei zu öffnen, oder die Layoutdatei in app -> res -> layout -> shr_main_activity.xml aufrufen.

Hinweis: Wenn Sie beim Öffnen von shr_main_activity.xml eine Anwendungsvorschau anstelle einer XML-Datei sehen, wechseln Sie unten links im Tab vom Tab Design zur Seite Text. Während des Codelabs arbeiten Sie auf dem Tab Text.

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 wir einen einfachen <FrameLayout>, der als Container für alle Fragmente fungiert, die die Aktivität anzeigt.

Als Nächstes öffnen wir LoginFragment.kt.

LoginFragment.kt-DE

package com.google.codelabs.mdc.kotlin.shrine

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

class LoginFragment : Fragment() {

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       return view
   }
}

LoginFragment erhöht die Layoutdatei shr_login_fragment und zeigt sie in onCreateView() an.

Sehen wir uns jetzt die Layoutdatei shr_login_fragment.xml an, um herauszufinden, 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" />
   </LinearLayout>
</ScrollView>

Hier sehen Sie oben ein <LinearLayout> mit einer <ImageView>, die das Schrein-Logo darstellt.

Danach befindet sich das <TextView>-Tag, das das Label „Schrein“ unter dem Logo darstellt. Der Text für dieses Label ist eine Stringressource mit dem Namen @string/shr_app_name. Wenn Sie Befehlstaste + Klick (oder Strg + Klick) für den String-Ressourcennamen auswählen oder app -> res -> values -> strings.xml öffnen, sehen Sie die Datei strings.xml, in der die String-Ressourcen definiert sind. Wenn in Zukunft weitere String-Ressourcen hinzugefügt werden, werden diese hier definiert. Jede Ressource in dieser Datei sollte das Präfix shr_ haben, um anzugeben, dass sie Teil der Shrine-App sind.

Jetzt, da Sie mit dem Startcode vertraut sind, wollen wir unsere erste Komponente implementieren.

Zuerst fügen wir unserer Anmeldeseite zwei Textfelder hinzu, in denen Nutzer ihren Nutzernamen und ihr Passwort eingeben können. Wir verwenden die Komponente „MDC-Textfeld“, die eine integrierte Funktion enthält, mit der ein unverankertes Label und Fehlermeldungen angezeigt werden.

Die Textfelder von Material Design wurden verbessert und bieten mehr Anpassungsoptionen, mit denen Sie Ihre Marke unterstützen können. Außerdem profitieren Sie von Verbesserungen und umfassenden Studien zur Nutzererfahrung, um die Nutzererfahrung und das visuelle Design zu verbessern.

Weitere Informationen zu den neuen Textfeldern findest du in diesem Hilfeartikel.

XML hinzufügen

In shr_login_fragment.xml fügen Sie zwei TextInputLayout-Elemente mit einem untergeordneten Element TextInputEditText innerhalb von <LinearLayout> unter dem Label SHRINE ein:<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" />
</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 in Android Studio schnell öffnen möchten, tippen Sie doppelt auf die Umschalttaste, um eine schwebende Suchleiste aufzurufen, und geben Sie den Namen der Datei ein, die Sie öffnen möchten.

Das obige Snippet enthält zwei Textfelder, die jeweils aus einem <TextInputLayout>-Element und einem <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 eingefügt: @string/shr_hint_username und @string/shr_hint_password. Öffnen Sie strings.xml, um diese String-Ressourcen 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 Funktion für Fehlerfeedback.

Bevor Sie Fehlerfeedback anzeigen können, müssen Sie die folgenden Änderungen an shr_login_fragment.xml vornehmen:

• Setze das Attribut app:errorEnabled auf trueim Element Passwort TextInputLayout. Dadurch wird unter dem Textfeld ein zusätzlicher Abstand für die Fehlermeldung hinzugefügt.
• Legen Sie das android:inputType-Attribut auf dem Element Password (TextInputEditText) auf „textPassword“ fest. Dadurch wird der Eingabetext im Passwortfeld ausgeblendet.

Durch diese Änderungen 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" />
</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“ und „Passwort“ angezeigt werden.

Sehen Sie sich die unverankerte Labelanimation an:

Zu den MDC-Textfeldfunktionen gehören:

• Integriertes Fehlerfeedback anzeigen
• Ein-/Aus-Schaltfläche zum Aktivieren der Passwortsichtbarkeit mit app:passwordToggleEnabled
• Mit app:helperText integrierte Hilfsfunktionen anbieten
• Gesamt- und Zeichenzahl werden mit app:counterEnabled und app:counterMaxLength angezeigt

Nun fügen wir der Anmeldeseite zwei Schaltflächen hinzu: „Abbrechen“ und „Weiter“. Wir verwenden die Komponente „MDC-Taste“, die aus dem eingebauten Rilleneffekt besteht.

XML hinzufügen

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

Die XML-Datei sollte in etwa so 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 einen Standardstil einer farbigen, erhöhten Schaltfläche. Für diese Schaltfläche „Abbrechen“ ist jedoch eine nicht gefüllte, nicht gefüllte Schaltfläche erforderlich. Dazu wenden wir ein style-Attribut an: @style/Widget.MaterialComponents.Button.TextButton.

Fertig! Wenn Sie die App ausführen, wird nach dem Tippen auf eine Schaltfläche ein Tintenwellensymbol angezeigt.

Zu den MDC-Schaltflächen gehören:

• Integriertes Touch-Feedback (auch MDC-Risiko genannt)
• Erhöhte Höhe
• Anpassbarer Eckenradius und -strich

Zum Schluss fügen wir LoginFragment.kt einen Kotlin-Code hinzu, um unsere Schaltfläche „Weiter“ für die Umstellung auf ein anderes Fragment zu verwenden.

Fügen Sie in LoginFragment.kt unter onCreateView() eine private boolesche isPasswordValid-Methode hinzu, um zu ermitteln, ob das Passwort gültig ist. In dieser Demo sollten Sie allerdings darauf achten, dass das Passwort mindestens 8 Zeichen lang ist:

LoginFragment.kt-DE

private fun isPasswordValid(text: Editable?): Boolean {
   return text != null && text.length >= 8
}

Als Nächstes fügen Sie der Schaltfläche „Weiter“ einen Klick-Listener hinzu, mit dem der Fehler basierend auf der soeben erstellten isPasswordValid()-Methode festgelegt und gelöscht wird. In onCreateView() sollte dieser Klick-Listener zwischen der aufgefüllten Linie und der return view-Zeile platziert werden.

Fügen Sie nun dem Passwort TextInputEditText einen Schlüssel-Listener hinzu, um wichtige Ereignisse zu erfassen, die den Fehler beheben würden. 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() einfügen.

Ihre onCreateView()-Methode sollte jetzt in etwa so aussehen:

LoginFragment.kt-DE

override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment.
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       // Set an error if the password is less than 8 characters.
       view.next_button.setOnClickListener({
           if (!isPasswordValid(password_edit_text.text!!)) {
               password_text_input.error = getString(R.string.shr_error_password)
           } else {
               // Clear the error.
               password_text_input.error = null
           }
       })

       // Clear the error once more than 8 characters are typed.
       view.password_edit_text.setOnKeyListener({ _, _, _ ->
           if (isPasswordValid(password_edit_text.text!!)) {
               // Clear the error.
               password_text_input.error = null
           }
           false
       })

       return view
   }
}

Hinweis: Falls in Android Studio beim Schreiben des Codes die Fehlermeldung Symbol kann nicht aufgelöst werden, drücken Sie Alt + Eingabetaste oder auf dem Mac Wahltaste + Rückgabe, um die fehlenden Symbole zu importieren.

Jetzt können wir zu einem anderen Fragment gehen. Aktualisieren Sie onCreateView(), wenn OnClickListener zu einem anderen Fragment navigiert wird, wenn die Fehlerüberprüfung erfolgreich ist. Der clickListener-Code sollte nun so aussehen:

LoginFragment.kt-DE

// Set an error if the password is less than 8 characters.
view.next_button.setOnClickListener({
   if (!isPasswordValid(password_edit_text.text!!)) {
       password_text_input.error = getString(R.string.shr_error_password)
   } else {
       // Clear the error.
       password_text_input.error = null
       // Navigate to the next Fragment.
       (activity as NavigationHost).navigateTo(ProductGridFragment(), false)
   }
})

Wir haben dem Zeilen-else des Klick-Listeners die Zeile (activity as NavigationHost).navigateTo(ProductGridFragment(), false) hinzugefügt. In dieser Zeile wird die navigateTo()-Methode von MainActivity aufgerufen, um zu einem neuen Fragment zu gelangen: ProductGridFragment. Das ist derzeit eine leere Seite, an der Sie in MDC-102 arbeiten.

Über den Parameter false in navigateTo() wird die Aktivität angewiesen, das aktuelle Fragment nicht in den Backstack aufzunehmen, sodass der Nutzer nicht über den Rücktaste zum Anmeldebildschirm zurückkehren kann.

Erstellen Sie nun die App. Klicken Sie auf „Weiter“.

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

Dank der einfachen XML-Markups und ca. 30 Kotlin-Zeilen konnten Sie über die Material Components for Android-Bibliothek eine ansprechende Anmeldeseite erstellen, die den Material Design-Richtlinien entspricht und außerdem auf allen Geräten einheitlich aussieht und funktioniert.

Die fertige MDC 101-App ist verfügbar, indem du das abgelaufene Codelab herunterlädst oder den 101-Level mit Git nutzt: git checkout 101-complete.

Du kannst deine Version der Seite mit der abgeschlossenen Version testen. Öffne dazu das Projekt Schrein in diesem Verzeichnis mit Android Studio und führe die App aus.

Nächste Schritte

Das Textfeld und die Schaltfläche sind zwei Hauptkomponenten in der MDC-Android-Bibliothek. Es gibt aber noch viele weitere! Sie können sich auch die anderen Komponenten zu MDC Android ansehen. Alternativ können Sie in MDC 102: Struktur und Layout von Material Design Informationen zur oberen Leiste der App, zur Kartenansicht und zum Rasterlayout erhalten. Vielen Dank, dass Sie Material Komponenten ausprobiert haben. Wir hoffen, dass dir dieses Codelab gefallen hat.

Ich konnte dieses Codelab mit angemessenem Zeitaufwand starten.

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

Ich möchte Materialkomponenten weiterhin verwenden

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