Material Design für Android

Funktion „Schreiben“ ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Weitere Informationen
Material Design 3 →

Material Design ist ein umfassender Leitfaden für plattform- und geräteübergreifendes visuelles Design, Motion Design und Interaktionsdesign. Wenn du Material Design in deinen Android-Apps verwenden möchtest, folge den Richtlinien in den Material Design-Spezifikationen. Wenn Ihre Anwendung Jetpack Composer verwendet, können Sie die Compose Material 3-Bibliothek verwenden. Wenn Ihre App Ansichten verwendet, können Sie die Material Components-Bibliothek von Android verwenden.

Android bietet die folgenden Funktionen zum Erstellen von Material Design-Apps:

  • Ein Material Design-App-Design, um alle UI-Widgets zu gestalten
  • Widgets für komplexe Ansichten wie Listen und Karten
  • APIs für benutzerdefinierte Schatten und Animationen

Material Design und Widgets

Wenn Sie die Materialfunktionen, z. B. Stile für Standard-UI-Widgets, nutzen und die Stildefinition Ihrer App optimieren möchten, wenden Sie ein Material-basiertes Design auf Ihre App an.

Abbildung 1: Dunkles Material-Design
Abbildung 2: Helles Design

Wenn Sie Ihr Android-Projekt mit Android Studio erstellen, wird standardmäßig ein Material-Design angewendet. Informationen zum Aktualisieren des Designs Ihres Projekts finden Sie unter Stile und Designs.

Um Ihren Nutzenden eine vertraute User Experience zu bieten, verwenden Sie die häufigsten UX-Muster von Material:

Verwende nach Möglichkeit vordefinierte Material-Symbole. Verwenden Sie beispielsweise für die Navigationsleiste „Menü“ das Standardsymbol „Hamburger“. Eine Liste der verfügbaren Symbole finden Sie unter Material Design-Symbole. Sie können SVG-Symbole auch aus der Material Icon-Bibliothek mit Vector Asset Studio von Android Studio importieren.

Höhenschatten und Karten

Neben den Properties X und Y haben Datenansichten in Android auch die Property Z. Diese Eigenschaft stellt die Höhe einer Ansicht dar. Damit wird Folgendes bestimmt:

  • Die Größe des Schattens: Ansichten mit höheren Z-Werten werfen größere Schatten.
  • Zeichenreihenfolge: Ansichten mit einem höheren Z-Wert werden über anderen Ansichten angezeigt.
Abbildung 3: Der Wert Z für die Höhe.

Sie können Elevation auf ein kartenbasiertes Layout anwenden, um wichtige Informationen auf Karten mit einem Material-Look anzuzeigen. Mit dem CardView-Widget können Sie Karten mit einer Standardhöhe erstellen. Weitere Informationen findest du unter Kartenbasiertes Layout erstellen.

Informationen zum Hinzufügen von Höhen zu anderen Ansichten finden Sie unter Schatten und Zuschnitte erstellen.

Animationen

Abbildung 4. Eine Animation für Touch-Feedback.

Mit Animation APIs können Sie benutzerdefinierte Animationen für Touch-Feedback in UI-Steuerelementen, Änderungen des Ansichtsstatus und Aktivitätsübergänge erstellen.

Diese APIs bieten Ihnen folgende Möglichkeiten:

  • Sie können in Ansichten mit Berührungsfeedback-Animationen auf Berührungsereignisse reagieren.
  • Mit kreisförmigen Animationen können Sie Ansichten ein- und ausblenden.
  • Mit benutzerdefinierten Animationen für Aktivitätsübergänge können Sie zwischen Aktivitäten wechseln.
  • Mit gewölbten Bewegungen lassen sich natürlichere Animationen erstellen.
  • Mit Animationen für Ansichtsstatusänderungen animieren Sie Änderungen in einer oder mehreren Ansichtseigenschaften.
  • Zeigt Animationen in Drawables der Statusliste zwischen Änderungen des Ansichtsstatus an.

Animationen für Touch-Feedback sind in mehrere Standardansichten, z. B. Schaltflächen, integriert. Mit den Animations-APIs können Sie diese Animationen anpassen und zu Ihren benutzerdefinierten Ansichten hinzufügen.

Weitere Informationen finden Sie unter Einführung in Animationen.

Drawables

Diese Funktionen für Drawables helfen dir bei der Implementierung von Material Design-Apps: