Material Design für Android

Compose ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Arbeiten mit Themes in Compose
Material Design 3 →

Material Design ist ein umfassender Leitfaden für visuelles Design, Animationen und Interaktionsdesign auf verschiedenen Plattformen und Geräten. Wenn Sie Material Design in Ihren Android-Apps verwenden möchten, folgen Sie den Richtlinien in der Material Design-Spezifikation. Wenn Ihre App Jetpack Compose verwendet, können Sie die Bibliothek Compose Material 3 verwenden. Wenn Ihre App Ansichten verwendet, können Sie die Android Material Components-Bibliothek verwenden.

Android bietet die folgenden Funktionen, mit denen Sie Material Design-Apps erstellen können:

  • Ein Material Design-App-Design zum Formatieren aller UI-Widgets
  • Widgets für komplexe Ansichten wie Listen und Karten
  • APIs für benutzerdefinierte Schatten und Animationen

Material Theme und Widgets

Wenn Sie die Material-Funktionen nutzen möchten, z. B. das Styling für Standard-UI-Widgets, 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 Material-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.

Damit sich Ihre Nutzer schnell zurechtfinden, sollten Sie die gängigsten UX-Muster von Material Design verwenden:

  • Heben Sie die Hauptaktion Ihrer Benutzeroberfläche mit einem unverankerten Aktionsbutton hervor.
  • Zeigen Sie Ihre Marke, die Navigation, die Suche und andere Aktionen in der App-Leiste an.
  • Mit der Navigationsleiste können Sie die Navigation Ihrer App ein- und ausblenden.
  • Sie können aus vielen anderen Material-Komponenten für das App-Layout und die Navigation auswählen, z. B. zusammenklappbare Symbolleisten, Tabs und eine untere Navigationsleiste. Eine vollständige Liste finden Sie im Katalog der Material-Komponenten für Android.

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

Höhenschatten und ‑karten

Neben den Properties X und Y haben Ansichten in Android auch eine Z-Property. Dieses Attribut stellt die Höhe einer Ansicht dar, die Folgendes bestimmt:

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

Sie können Kartenlayouts mit Erhebung versehen, um wichtige Informationen in Karten mit Material-Look darzustellen. Mit dem CardView-Widget können Sie Karten mit einer Standarderhebung erstellen. Weitere Informationen finden Sie unter Kartenbasiertes Layout erstellen.

Informationen zum Hinzufügen von Erhebungen zu anderen Ansichten finden Sie unter Schatten erstellen und Ansichten zuschneiden.

Animationen

Abbildung 4: Eine Animation für haptisches Feedback.

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

Mit diesen APIs können Sie:

  • Mit Animationen für Berührungsfeedback können Sie auf Berührungsereignisse in Ihren Ansichten reagieren.
  • Ansichten mit Circular Reveal-Animationen ein- und ausblenden.
  • Mit benutzerdefinierten Animationen für den Aktivitätsübergang zwischen Aktivitäten wechseln
  • Mit gebogenen Bewegungen lassen sich natürlichere Animationen erstellen.
  • Mit view state change-Animationen können Sie Änderungen an einem oder mehreren Ansichtsparametern animieren.
  • Animationen in State List Drawables zwischen Änderungen des Ansichtsstatus anzeigen.

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

Weitere Informationen finden Sie unter Einführung in Animationen.

Drawables

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