Material Design 3 – oft kurz „Material You" oder „M3" genannt – ist Googles aktuelles Designsystem für Android. Mit Jetpack Compose lässt es sich besonders elegant umsetzen, denn die androidx.compose.material3-Bibliothek bringt sämtliche Komponenten, Farbsysteme und Typografie-Werkzeuge bereits mit. In diesem Artikel erfährst du, wie du ein konsistentes, modernes Theme aufbaust und das Highlight von M3 – die personalisierten Dynamic Colors – richtig einsetzt.
Was Material 3 von Material 2 unterscheidet
Material Design 3 ist die Weiterentwicklung des 2014 eingeführten Material Design. Die wichtigsten Neuerungen drehen sich um Personalisierung, ein überarbeitetes Farbsystem und weichere, ausdrucksstärkere Formen:
- Dynamic Color: Ab Android 12 kann das System eine Farbpalette aus dem Hintergrundbild des Nutzers ableiten und app-übergreifend anwenden. Apps fühlen sich dadurch persönlich und ins System integriert an.
- Color Roles statt fester Farben: Statt „Primary" und „Secondary" gibt es nun ein deutlich feineres System aus semantischen Rollen wie
primaryContainer,onSurfaceVariantodersurfaceTint. - Größere, rundere Formen: Buttons, Karten und Dialoge wirken weicher und moderner.
- Aktualisierte Komponenten: Neue Varianten von Buttons, Navigation Bars, Top App Bars und vieles mehr.
Der MaterialTheme-Block
Jedes Compose-Projekt mit M3 wird von einem MaterialTheme umschlossen. Dieser Composable stellt drei zentrale Bausteine bereit, auf die alle Kind-Composables zugreifen:
- colorScheme – die Farbpalette deiner App
- typography – die Schriftstile
- shapes – die Eckenradien für kleine, mittlere und große Komponenten
Innerhalb deiner Composables greifst du über MaterialTheme.colorScheme.primary, MaterialTheme.typography.titleLarge oder MaterialTheme.shapes.medium auf diese Werte zu. Der große Vorteil: Definierst du eine Farbe einmal zentral, zieht sich die Änderung automatisch durch die gesamte App. Hardcodierte Farbwerte irgendwo tief im UI-Baum gehören damit der Vergangenheit an.
Color Roles verstehen
Das Farbsystem von M3 ist auf den ersten Blick komplex, aber durchdacht. Jede Farbrolle hat einen klaren Zweck, und für nahezu jede Farbe gibt es eine passende on-Variante, die garantiert ausreichenden Kontrast für Inhalte darauf bietet:
- primary / onPrimary: Hauptakzentfarbe für prominente Elemente wie den wichtigsten Button. Inhalte darauf nutzen
onPrimary. - primaryContainer / onPrimaryContainer: eine gedämpftere Variante für hervorgehobene, aber weniger dominante Flächen.
- surface / onSurface: Hintergrundflächen von Karten, Sheets und Dialogen samt der darauf liegenden Inhalte.
- error / onError: für Fehlerzustände und Validierungshinweise.
Der Clou dieses Systems: Wenn du konsequent Color Roles statt fester Farbcodes verwendest, funktioniert deine App automatisch im hellen und dunklen Modus – und sogar mit Dynamic Color – ohne dass du an Dutzenden Stellen nachbessern musst. Die richtige Wahl der Rolle ist hier entscheidender als der konkrete Farbwert.
Dynamic Color aktivieren
Das Vorzeige-Feature von Material 3 ist Dynamic Color. Auf Geräten mit Android 12 oder neuer kannst du ein ColorScheme direkt aus dem System ableiten lassen:
dynamicLightColorScheme(context)liefert ein helles Schema basierend auf dem Wallpaper des Nutzers.dynamicDarkColorScheme(context)liefert das passende dunkle Schema.- Für ältere Geräte ohne Dynamic-Color-Unterstützung definierst du ein statisches Fallback-Schema mit deinen Markenfarben.
In der Praxis baust du eine kleine Logik: Ist Dynamic Color verfügbar und gewünscht, nutze das System-Schema, ansonsten dein eigenes. So profitieren moderne Geräte von der Personalisierung, während ältere weiterhin ein konsistentes, markengerechtes Aussehen erhalten. Wichtig ist nur, dass du Dynamic Color bewusst einsetzt – bei stark markengeprägten Apps möchte man die eigene Identität oft bewahren und Dynamic Color nur optional anbieten.
Typografie und Shapes
Type Scale
Material 3 definiert eine durchdachte Type Scale mit benannten Stilen von displayLarge über headlineMedium und titleLarge bis zu bodyMedium und labelSmall. Jeder Stil legt Schriftgröße, Zeilenhöhe, Gewicht und Buchstabenabstand fest. Indem du diese benannten Stile verwendest, erhältst du eine konsistente typografische Hierarchie über die gesamte App – statt überall manuell Pixelgrößen zu setzen.
Eigene Schriftart einbinden
Eine eigene Schriftart bindest du über eine FontFamily ein und überschreibst die Standard-Typografie damit. So bekommt deine App einen unverwechselbaren Charakter, ohne dass du das M3-Größensystem aufgeben musst.
Shapes
Über das Shapes-Objekt steuerst du die Eckenradien zentral. M3 unterscheidet kleine, mittlere und große Komponenten. Passt du diese Werte an, ändern sich Karten, Buttons und Dialoge konsistent mit – etwa von sanft abgerundet zu betont eckig, je nach gewünschtem Markenausdruck.
Die wichtigsten M3-Komponenten
Die material3-Bibliothek liefert fertige, barrierearme Komponenten, die das Theme automatisch respektieren:
- Button, FilledTonalButton, OutlinedButton, TextButton – die Button-Hierarchie für unterschiedlich starke Handlungsaufforderungen.
- Card – Container für gruppierte Inhalte, in den Varianten elevated, filled und outlined.
- TopAppBar – die obere Leiste, inklusive scrollverhaltensabhängiger Varianten wie der „large" App Bar.
- NavigationBar – die untere Navigationsleiste für die Hauptbereiche der App.
- Scaffold – das Grundgerüst, das App Bar, Bottom Bar, Floating Action Button und Inhalt sauber zusammenfügt.
Weil all diese Komponenten ihre Farben aus dem aktiven MaterialTheme beziehen, fügen sie sich ohne Zusatzaufwand harmonisch ins Gesamtbild ein.
Konsistenz und Barrierefreiheit
Ein gut umgesetztes M3-Theme ist nicht nur schön, sondern auch barrierearm. Die on-Farbrollen sind so abgestimmt, dass sie die Kontrastanforderungen der WCAG-Richtlinien in der Regel erfüllen. Trotzdem lohnt es sich, eigene Farbkombinationen zu prüfen – besonders wenn du von den Standardpaletten abweichst.
Für die Planung deiner Markenpalette und das Prüfen von Kontrasten helfen die Werkzeuge im kotsch.tech Webtools-Bereich: Mit einem Farbpaletten-Generator findest du harmonische Farbkombinationen, die du anschließend als Color Roles in dein Theme übernehmen kannst.
Häufige Fragen
Muss ich Dynamic Color verwenden?
Nein, es ist optional. Dynamic Color ist ein starkes Feature für system-integriertes Aussehen, aber bei markengetriebenen Apps möchtest du oft deine eigenen Farben durchhalten. Viele Apps bieten Dynamic Color als umschaltbare Einstellung an und überlassen die Wahl dem Nutzer.
Funktioniert Material 3 auf alten Android-Versionen?
Die Komponenten selbst funktionieren über viele Android-Versionen hinweg. Nur Dynamic Color benötigt Android 12 oder neuer. Für ältere Geräte definierst du ein statisches Fallback-Farbschema, sodass deine App überall konsistent aussieht.
Kann ich Material 2 und Material 3 mischen?
Technisch ist beides parallel installierbar, aber in einem Bildschirm solltest du dich für eines entscheiden. Ein Mix führt zu inkonsistentem Aussehen. Für neue Projekte ist Material 3 die klare Empfehlung.
Wie setze ich den Dark Mode um?
Du definierst ein helles und ein dunkles ColorScheme und wählst je nach isSystemInDarkTheme() das passende aus. Verwendest du durchgehend Color Roles, ist damit die meiste Arbeit bereits getan und der Wechsel funktioniert automatisch.
Wo finde ich die offiziellen Farbpaletten?
Google stellt mit dem „Material Theme Builder" ein offizielles Web-Werkzeug bereit, das aus einer Grundfarbe ein vollständiges M3-Farbschema generiert und den passenden Compose-Code exportiert. Das ist ein idealer Startpunkt für ein eigenes Theme.