Material Design: Schlüsselkonzepte, Material You und Material 3

Was ist Material Design?

Material Design (Codename Project Quantum) ist Googles Designsystem, das erstmals auf der Google I/O 2014 angekündigt und erstmals in Android 5.0 Lollipop implementiert wurde. Das Ziel von Material Design ist es, eine einheitliche visuelle Sprache für alle Google-Produkte und Android-Apps zu schaffen, die auf den physikalischen Eigenschaften von Papier und Tinte basiert — dem „Material.“ Im Gegensatz zum Flat Design fügt Material Design physikalische Tiefe, Schatten, Ebenen und realistische Animation hinzu.

Seit 2014 hat Material Design drei Hauptversionen durchlaufen: Material 1 (2014) — ursprüngliche Richtlinien mit Karten und Floating Action Button; Material 2 (2018) — vereinfachte visuelle Sprache, größere Abstände, Betonung der Typografie; Material 3 / Material You (2021) — dynamisches Farbschema, generiert aus dem Gerätehintergrundbild, Personalisierung. Laut Google Play Console (2024) verwenden 78% der Top-1000-Google-Play-Apps Material Components für Android.

Material Design ist nicht nur ein UI-Kit, sondern ein vollständiges Designsystem: Richtlinien für Barrierefreiheit (a11y), Animation (Motion), responsive Layouts, Komponenten (TopAppBar, BottomNavigation, Navigation Drawer), Typografie (Material Type Scale) und Ikonografie (Material Symbols). Bei IT Sectr verwenden wir Material Design seit 2014 als grundlegendes Designsystem für Android-Projekte und passen es über den Material Theme Builder an die Marke des Kunden an.

Grundprinzipien von Material Design: Materialität, Tiefe, Bewegung

Materialität (Material as Metaphor) — das Schlüsselprinzip von Material Design, das die physikalischen Eigenschaften von Papier übernimmt: Material hat eine Oberfläche, Dicke (1dp), wirft einen Schatten (Elevation) und nimmt Raum ein (Bounds). Oberflächenelemente — Karten, Schaltflächen, Panels — verhalten sich wie physische Objekte: sie heben sich beim Drücken an (Ripple-Effekt), überlappen einander (Z-Achse) und animieren beim Erscheinen (Motion).

Tiefe (Depth) wird durch Elevation erzeugt — eine Materialeigenschaft, die seine Position auf der Z-Achse bestimmt. Je höher die Elevation (8dp, 16dp), desto größer der Schatten, den das Element wirft. Eine Karte hat Elevation von 1–2dp, FAB — 6dp, Modal BottomSheet — 16dp. Tiefe wird verwendet, um Hierarchie zu vermitteln: modale Fenster und Dialoge befinden sich immer über dem Inhalt, Navigation Drawer über der Action Bar. Tiefe ersetzt die 3D-Perspektive durch eine flache Z-Ebene und bewahrt die Rendering-Leistung.

Bewegung (Motion) — Animation in Material Design ist nicht dekorativ, sondern funktional. Animation sollte: 1) die Aufmerksamkeit des Benutzers lenken (sich ausdehnende Karte mit Details), 2) räumliche Beziehungen erklären (AppBar verwandelt sich beim Scrollen in TopAppBar), 3) sanfte Übergänge gewährleisten (Shared-Element-Übergang zwischen Bildschirmen). Laut Google Material Guidelines (2024) sollte Animation 300ms für Mikrointeraktionen und 500ms für Bildschirmübergänge nicht überschreiten — längere Animationen werden als Verzögerungen wahrgenommen.

Material You (Material Design 3): dynamische Farben und Personalisierung

Material You (Material Design 3) ist das größte Update des Designsystems, das 2021 zusammen mit Android 12 vorgestellt wurde. Die wichtigste Neuerung — dynamische Farben (Monet): Das System extrahiert automatisch 5 Schlüsselfarben aus dem Gerätehintergrundbild und generiert eine vollständige Farbpalette mit 15 Tönen (primary, secondary, tertiary, error mit ihren light/dark-Varianten) mit berechneten WCAG-AA-Kontrastverhältnissen.

Das Farbmodell von Material You basiert auf HCT (Hue, Chroma, Tone) — einem von Google entwickelten Farbraum, der die menschliche Wahrnehmung (Hue) mit Sättigung (Chroma) und Helligkeit (Tone) kombiniert. Im Gegensatz zu HSL/HSV garantiert HCT, dass alle generierten Töne den erforderlichen Kontrast auf weißem und schwarzem Hintergrund haben. Google Material Guidelines (2024) empfiehlt, nur tonale Varianten der Hauptpalette für Text, Surface-Töne für Hintergründe und Primary-Container für Akzentflächen zu verwenden.

Der Benutzer kann aus 4 Personalisierungsschemata wählen: TonalSpot (Hauptfarbe aus dem Hintergrundbild), Vibrant (gesättigtste Farbe), Expressive (zusätzliche helle Farben), Neutral (monochrome Palette). Der Material Theme Builder (material-foundation.github.io) ermöglicht den Export eines Material 3-Themes in XML, Compose Theme, CSS und sogar ein Figma-Plugin.

Material Components für Android: Implementierung mit XML und Compose

Material Components für Android (MDC-Android) ist die offizielle Google-Bibliothek, die fertige View-Komponenten bereitstellt, die den Material Design-Richtlinien entsprechen. Für XML-Layouts ist die Bibliothek über die Abhängigkeit com.google.android.material:material verfügbar, aktuelle Version Stand Juni 2026 — 1.12.0.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/app_name"
        app:menu="@menu/main_menu" />

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="2dp"
        app:strokeWidth="1dp"
        app:strokeColor="@color/outline">

        <LinearLayout android:orientation="vertical" ...>
            <com.google.android.material.textfield.TextInputLayout
                style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:endIconMode="clear_text">
                <com.google.android.material.textfield.MaterialAutoCompleteTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/city_hint" />
            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.button.MaterialButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Widget.Material3.Button.MaterialYou"
                android:text="@string/submit" />
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/topAppBar"
        app:layout_anchorGravity="bottom|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Das Beispiel zeigt einen Material-Bildschirm mit MaterialToolbar (TopAppBar), MaterialCardView mit benutzerdefiniertem Padding und Strich, TextInputLayout mit Dropdown-Liste und MaterialButton im Material3-Stil. Der FAB ist an der Toolbar verankert — ein Standardmuster für Master-Detail-Schnittstellen.

@Composable
fun MaterialYouScreen() {
    val colorScheme = MaterialTheme.colorScheme

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Material You") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = colorScheme.primaryContainer,
                    titleContentColor = colorScheme.onPrimaryContainer
                )
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { },
                containerColor = colorScheme.tertiaryContainer
            ) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "Add"
                )
            }
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier.padding(paddingValues)
        ) {
            OutlinedTextField(
                value = "",
                onValueChange = { },
                label = { Text("Stadt") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Senden")
            }
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme(
                colorScheme = dynamicLightColorScheme(this),
                typography = MaterialTheme.typography
            ) {
                MaterialYouScreen()
            }
        }
    }
}

Der Code demonstriert ein Material You-Theme in Compose: dynamicLightColorScheme() generiert automatisch ein Farbschema basierend auf dem Gerätehintergrundbild. Scaffold bietet eine Standardstruktur mit TopAppBar und FAB. OutlinedTextField und Button sind Material 3-Komponenten, deren Farben aus dem dynamischen colorScheme stammen. Wenn sich das Hintergrundbild ändert, aktualisieren sich alle App-Farben automatisch — Personalisierung ohne Codeänderungen.

Material Design auf iOS: Material Components für iOS

Material Components für iOS (MDC-iOS) ist eine Bibliothek, die native UIKit-Komponenten bereitstellt, die Material Design auf iOS implementieren. Da iOS ein eigenes Designsystem (Human Interface Guidelines) hat, werden Material-Komponenten auf iOS seltener verwendet, sind aber in plattformübergreifenden Apps gefragt, die einen einheitlichen visuellen Stil zwischen Android und iOS erfordern.

MDC-iOS umfasst AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs und TextFields, gestaltet für Material Design. Die Bibliothek ist über CocoaPods (pod 'MaterialComponents') und Swift Package Manager verfügbar. Die Apple Human Interface Guidelines (2024) empfehlen nicht, native UIKit-Komponenten vollständig durch Material-Äquivalente zu ersetzen, erlauben aber die Verwendung von Material-Komponenten für benutzerdefinierte Oberflächen, sofern die native Navigation (NavigationStack, UITabBarController) erhalten bleibt.

Bei IT Sectr verwenden wir Material Components auf iOS nur für Apps, die von Android portiert wurden (plattformübergreifende Projekte mit Flutter oder Kotlin Multiplatform). Für native iOS-Apps folgen wir HIG und verwenden UIKit/SwiftUI mit benutzerdefiniertem Branding. Laut einer Swift Community-Umfrage (2024) verwenden 8% der Entwickler Material Components für iOS, hauptsächlich in Hybridprojekten.

Material Design im Vergleich zu anderen Designsystemen

Material Design ist nicht das einzige Designsystem auf dem Markt. Hauptkonkurrenten: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Jedes System ist für seine Plattform optimiert: Material Design für Android, HIG für iOS, Fluent für Windows. Die Wahl des Designsystems wird durch die Zielplattform und das Ökosystem bestimmt.

Der Hauptvorteil von Material Design ist seine Offenheit und Plattformunabhängigkeit. Richtlinien, Komponenten und Tools (Material Theme Builder) sind kostenlos verfügbar, was das System bei Startups und unabhängigen Entwicklern beliebt macht. Apple HIG ist eng an das Apple-Ökosystem gebunden, gewährleistet aber die beste Übereinstimmung mit den Plattformerwartungen. Für plattformübergreifende Projekte ist Material Design dank Flutter und Jetpack Compose Multiplatform die optimale Wahl.