MDC-111 Android: Material Components in die Codebasis einbinden (Java)

MDC-111 Android:
Material Components in die Codebasis einbinden (Java)

Informationen zu diesem Codelab

subjectZuletzt aktualisiert: Okt. 12, 2020
account_circleVerfasst von Gautham Sajith

1. Einführung

logo_components_color_2x_web_96dp.png

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.

Material Components for Android (MDC Android) ist kein neues System oder Framework, das einen Paradigmenwechsel in Ihrer App erfordert. MDC Android basiert auf den gleichen Klassen und APIs, die Sie bereits aus Android kennen, beispielsweise AppCompat-Schaltflächen und Textfelder. Komponenten, die von MDC Android bereitgestellt werden, können nach Bedarf verwendet werden, um eine sofortige Designverbesserung für Ihre bestehende App vorzunehmen.

Inhalt

In diesem Codelab ersetzen Sie von MDC einige vorhandene Komponenten in einem Formular durch neue.

MDC-Android-Komponenten in diesem Codelab

  • Textfelder
  • Tasten
  • Menus

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)
<ph type="x-smartling-placeholder">

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

2. Entwicklungsumgebung einrichten

Starter-Codelab-App herunterladen

Die Start-App befindet sich im Verzeichnis material-components-android-codelabs-111-starter/java. Achten Sie darauf, dass Sie sich in diesem Verzeichnis cd befinden, bevor Sie beginnen.

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

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 -> Versand (oder suchen Sie auf Ihrem Computer nach shipping), um das Versandprojekt 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.

gKYVUDrUs8bH1NfVV5DnikrjM7zJkP3j2rTbd0B66JVyySb54sS89vrTALAD6_AFp7p4CNA4OqOIAkyVjcR23CoUQwNtdsbEQ_sn5EooSqBQo9YBq9H_IsKctCTZBM8pci9WXlmlEw

MDC-Android importieren

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'

Starter-App ausführen

  1. Achten Sie darauf, dass die Build-Konfiguration links von der Schaltfläche Run / Play den Wert app hat.
  2. Klicken Sie auf die grüne Schaltfläche Run / Play, um die App zu erstellen und auszuführen.
  3. 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.
  4. Wählen Sie auf dem Bildschirm Hardware auswählen ein Smartphone wie Pixel 2 aus und klicken Sie auf Weiter.
  5. 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.
  6. Klicken Sie auf Weiter.
  7. Lassen Sie die Einstellungen auf dem Bildschirm Android Virtual Device (AVD) unverändert und klicken Sie auf Finish (Fertigstellen).
  8. Wählen Sie im Dialogfeld für das Bereitstellungsziel ein Android-Gerät aus.
  9. Klicken Sie auf OK.
  10. Android Studio erstellt die App, stellt sie bereit und öffnet sie automatisch auf dem Zielgerät.

Fertig! Sie sollten die App und ihr Formular sehen.

dba8e6132a12da58.png

3. Textfelder aktualisieren

Textfelder in Material Design haben gegenüber reinen Textfeldern einen deutlichen Vorteil bei der Benutzerfreundlichkeit. Wenn Sie den Trefferbereich mithilfe eines Umrisses oder einer Hintergrundfüllung definieren, ist die Wahrscheinlichkeit höher, dass Nutzer mit Ihrem Formular interagieren oder Textfelder in komplexeren Inhalten erkennen.

Textfeldstile ersetzen

Füge in shipping_info_activity.xml allen TextInputLayout-XML-Komponenten den folgenden Stil hinzu:

shipping_info_activity.xml

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

Jeder 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 Sie den folgenden Befehl und führen Sie ihn aus:

824c2b33592b2c7e.png

Die Textfelder wurden alle aktualisiert, um die neueren Designs in MDC zu verwenden.

Fehler hinzufügen

MDC-Textfelder verfügen über eine integrierte Fehlerdarstellung. Von MDC wird unter Ihrem Textfeld roter Text eingefügt und die Dekorationen werden ebenfalls rot dargestellt.

Aktualisieren Sie in ShippingInfoActivity.java die Methode onCreate() so:

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 und lassen Sie mindestens ein Textfeld leer:

ef2a846d08f2780d.png

Die leeren Textfelder sind rot und darunter ein Fehlertext.

4. Schaltfläche aktualisieren

MDC verfügt über Schaltflächen mit:

  • Tintenwellen
  • Abgerundete Ecken
  • Unterstützung von Designs
  • Layout und Typografie: perfekt für Pixel
  • Basiert auf AppCompatButton, der standardmäßigen Android-Schaltflächenklasse, damit Sie wissen, wie Sie diese in Ihrem Code verwenden.

Schaltflächenklasse ersetzen (optional)

Standardmäßig bläht die Material-Bibliothek automatisch normale Schaltflächen zu MDC-Schaltflächen auf. Sie können jedoch optional alle Verweise auf die Schaltfläche durch MaterialButton ersetzen, sodass Sie auf zusätzliche Methoden zugreifen können, die nur in MaterialButton verfügbar sind, wie zum Beispiel das Ändern des Eckenradius. Die MDC-Schaltflächen sind eine einfache Plug-and-Play-Komponente. Sie ersetzen einfach den Namen der XML-Komponente Button durch MaterialButton und wenden 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" />

An:

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 Sie den folgenden Befehl und führen Sie ihn aus:

824c2b33592b2c7e.png

5. Karte hinzufügen

MaterialCardView ist eine Komponente, die auf CardView basiert und Folgendes hat:

  • Höhenangaben und Stile korrigieren
  • Attribute für Strichbreite und -farbe

Karteninhalte in einer Karte zusammenfassen

Binde die LinearLayout-Datei, die deine Inhalte enthält, in shipping_info_activity.xml mit einer 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 eingebunden sein:

75c86ab9fa395e3c.png

Mit der Komponente „Material Card View“ können Sie Ihre Inhalte ganz einfach in einer Karte zusammenfassen.

6. Zusammenfassung

Sie haben einige gängige Komponenten ersetzt, die den sofortigen Nutzen zeigen: Textfelder, Schaltflächen und Karten, und Sie mussten Ihre App nicht komplett neu gestalten. Auch andere Komponenten wie die obere App-Leiste und das Tab-Layout können einen großen Unterschied machen.

Weiteres Vorgehen

Im Android Widgets Catalog finden Sie noch mehr Komponenten in MDC-Android.

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

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

Ich möchte Material Components weiterhin verwenden.