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 |
Material Components for Android (MDC Android) ist kein neues System oder Framework, das eine Paradigmenänderung in Ihrer App erfordert. MDC Android basiert auf denselben Klassen und APIs, die Sie bereits in Android kennen, z. B. AppCompat-Schaltflächen und ‑Textfelder. Die von MDC Android bereitgestellten Komponenten können nach Bedarf verwendet werden und verbessern das Design Ihrer vorhandenen App sofort.
Was Sie erstellen
In diesem Codelab ersetzen Sie einige vorhandene Komponenten in einem Formular durch neue von MDC.
MDC-Android-Komponenten in diesem Codelab
- Textfelder
- Schaltflächen
- Menüs
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 beim Erstellen von Android-Apps bewerten?
2. Entwicklungsumgebung einrichten
Starter-App für das Codelab herunterladen
Die Starter-App befindet sich im Verzeichnis material-components-android-codelabs-111-starter/kotlin. Wechseln Sie vor Beginn mit cd in dieses Verzeichnis.
...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 111-starter
Starter-Code in Android Studio laden
- Wenn 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 -> shipping (oder suchen Sie auf Ihrem Computer nach shipping) aus, um das Projekt „shipping“ zu öffnen.
- Warten Sie einen Moment, bis Android Studio das Projekt erstellt und synchronisiert hat. Dies wird durch Aktivitätsindikatoren unten im Android Studio-Fenster angezeigt.
- 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.
Starter-App ausführen
|
|
Fertig! Sie sollten die App und das zugehörige Formular sehen.
3. Textfelder aktualisieren
Textfelder mit Material Design bieten im Vergleich zu einfachen Textfeldern einen erheblichen Vorteil in Bezug auf die Nutzerfreundlichkeit. Wenn Sie die Trefferzone mit einer Kontur oder einer Hintergrundfüllung definieren, ist es wahrscheinlicher, dass Nutzer mit Ihrem Formular interagieren oder Textfelder in komplexeren Inhalten erkennen.
MDC-Android importieren
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-alpha05'
Textfeldstile ersetzen
Fügen Sie in shipping_info_activity.xml allen TextInputLayout-XML-Komponenten den folgenden Stil hinzu:
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Jedes TextInputLayout sollte so aussehen:
shipping_info_activity.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
Erstellen und ausführen:
Die Textfelder wurden alle aktualisiert und verwenden jetzt die neueren Designs in MDC.
Fehler hinzufügen
MDC-Textfelder haben eine integrierte Fehlerdarstellung. MDC fügt unter dem Textfeld roten Text hinzu und aktualisiert auch die Dekorationen in Rot.
Aktualisieren Sie in ShippingInfoActivity.kt die Funktion onCreate(), um die Texteingabe zu prüfen und Fehler entsprechend festzulegen. Das sollte so aussehen:
ShippingInfoActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shipping_info_activity)
val rootView = findViewById<View>(android.R.id.content)
val textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout::class.java)
save_button.setOnClickListener {
var noErrors = true
for (textInputLayout in textInputLayouts) {
val editTextString = textInputLayout.editText!!.text.toString()
if (editTextString.isEmpty()) {
textInputLayout.error = resources.getString(R.string.error_string)
noErrors = false
} else {
textInputLayout.error = null
}
}
if (noErrors) {
// All fields are valid!
}
}
}
Erstellen und ausführen. Klicken Sie auf „Speichern“, lassen Sie aber mindestens ein Textfeld leer:
Die leeren Textfelder sind rot und enthalten darunter einen Fehlertext.
4. Schaltfläche aktualisieren
MDC bietet Schaltflächen mit folgenden Funktionen:
- Tintenwellen
- Abgerundete Ecken
- Unterstützung für Designs
- Pixelgenaues Layout und pixelgenaue Typografie
- Basierend auf AppCompatButton (der Standard-Android-Schaltflächenklasse), sodass Sie wissen, wie Sie sie in Ihrem Code verwenden.
Optional: Schaltflächenklasse ersetzen
Standardmäßig werden reguläre Schaltflächen von der Material-Bibliothek automatisch in MDC-Schaltflächen umgewandelt. Sie können jedoch optional alle Verweise auf „Button“ durch „MaterialButton“ ersetzen, damit Sie auf zusätzliche Methoden zugreifen können, die nur in einer „MaterialButton“ verfügbar sind, z. B. zum Ändern des Eckradius. MDC-Schaltflächen sind eine einfache Plug-and-Play-Komponente. Ersetzen Sie einfach den XML-Komponentennamen Button durch MaterialButton und wenden Sie den Standardstil MaterialButton auf die MaterialButton an.
Ändern Sie in shipping_info_activity.xml die Schaltfläche von:
shipping_info_activity.xml
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
in:
shipping_info_activity.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
Erstellen und ausführen:
5. Karte hinzufügen
MaterialCardView ist eine Komponente, die auf CardView basiert und folgende Funktionen bietet:
- Korrekte Erhebung und korrektes Styling
- Attribute für Strichbreite und ‑farbe
Inhalte in eine Karte einfügen
Fügen Sie Ihr LinearLayout mit den Inhalten in shipping_info_activity.xml in eine MaterialCardView-Komponente ein:
shipping_info_activity.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
Erstellen und ausführen. Das gesamte Formular sollte in eine Karte eingefügt werden:
Die Komponente „Material Card View“ ist eine vertraute, aber neue Möglichkeit, Inhalte einfach in eine Karte einzufügen.
6. Zusammenfassung
Sie haben einige gängige Komponenten ersetzt, um sofort einen Mehrwert zu erzielen: Textfelder, Schaltflächen und Karten. Dabei mussten Sie Ihre App nicht komplett neu gestalten. Auch andere Komponenten können einen großen Unterschied machen, z. B. die obere App-Leiste und TabLayout.
Weiteres Vorgehen
Im Android-Widgets-Katalog finden Sie noch mehr Komponenten in MDC-Android.