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 einen Paradigmenwechsel 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/java. Wechseln Sie vor Beginn zu diesem Verzeichnis.cd
...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 111-starter
Starter-Code in Android Studio laden
- Sobald der Einrichtungsassistent abgeschlossen ist und das Fenster Welcome to Android Studio (Willkommen bei Android Studio) angezeigt wird, klicken Sie auf Open an existing Android Studio project (Vorhandenes Android Studio-Projekt öffnen). Navigieren Sie zu dem Verzeichnis, in dem Sie den Beispielcode installiert haben, und wählen Sie java -> shipping aus. Sie können auch auf Ihrem Computer nach shipping suchen, um das Projekt „Shipping“ zu öffnen.
- Warten Sie einen Moment, bis Android Studio das Projekt erstellt und synchronisiert hat. Dies wird durch Aktivitätsindikatoren am unteren Rand des Android Studio-Fensters 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.
MDC-Android importieren
Navigieren 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'
Starter-App ausführen
|
|
Fertig! Die App und das Formular sollten angezeigt werden.
3. Textfelder aktualisieren
Textfelder in Material Design bieten einen großen Vorteil in Bezug auf die Nutzerfreundlichkeit gegenüber einfachen Textfeldern. Durch das Definieren der Trefferzone mit einer Umrandung oder einer Hintergrundfüllung interagieren Nutzer eher mit Ihrem Formular oder erkennen Textfelder in komplizierteren Inhalten.
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.TextInputLayout
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, um die neueren Designs in MDC zu verwenden.
Fehler hinzufügen
MDC-Textfelder haben eine integrierte Fehlerdarstellung. MDC fügt roten Text unter dem Textfeld hinzu und aktualisiert auch die Dekorationen in Rot.
Aktualisieren Sie in ShippingInfoActivity.java die Methode onCreate() so, dass sie wie folgt aussieht:
ShippingInfoActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.shipping_info_activity);
View rootView = findViewById(android.R.id.content);
final List<TextInputLayout> textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout.class);
Button button = findViewById(R.id.save_button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
boolean noErrors = true;
for (TextInputLayout textInputLayout : textInputLayouts) {
String editTextString = textInputLayout.getEditText().getText().toString();
if (editTextString.isEmpty()) {
textInputLayout.setError(getResources().getString(R.string.error_string));
noErrors = false;
} else {
textInputLayout.setError(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
- Designunterstützung
- Pixelgenaues Layout und 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 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 Formatierung
- Attribute für Strichbreite und ‑farbe
Inhalte in eine Karte einfügen
Fügen Sie LinearLayout mit Ihren 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 frische 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 das Design Ihrer App nicht komplett überarbeiten. 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.