Material Design: kernbegrippen, Material You en Material 3

Wat is Material Design?

Material Design (codenaam Project Quantum) — het ontwerpsysteem van Google, voor het eerst aangekondigd op Google I/O 2014 en voor het eerst geïmplementeerd in Android 5.0 Lollipop. Het doel van Material Design is het creëren van een uniforme visuele taal voor alle Google-producten en Android-apps, gebaseerd op de fysieke eigenschappen van papier en inkt — “materiaal”. In tegenstelling tot plat ontwerp (Flat Design) voegt Material Design fysieke diepte, schaduwen, lagen en realistische animatie toe.

Sinds 2014 heeft Material Design drie grote versies doorgemaakt: Material 1 (2014) — de oorspronkelijke richtlijnen met kaarten en Floating Action Button; Material 2 (2018) — vereenvoudiging van de visuele taal, grotere marges, nadruk op typografie; Material 3 / Material You (2021) — dynamisch kleurenschema gegenereerd op basis van het apparaatachtergrond, personalisatie. Volgens Google Play Console (2024) gebruikt 78% van de top 1000 Google Play-apps Material Components voor Android.

Material Design is niet zomaar een UI-kit, maar een volledig ontwerpsysteem: richtlijnen voor toegankelijkheid (a11y), animatie (Motion), adaptieve lay-outs (Responsive Layout), componenten (TopAppBar, BottomNavigation, Navigation Drawer), typografie (Material Type Scale) en iconografie (Material Symbols). Bij IT Sectr gebruiken we Material Design sinds 2014 als basisontwerpsysteem voor Android-projecten en passen het aan het merk van de klant aan via Material Theme Builder.

Belangrijkste principes van Material Design: materialiteit, diepte, beweging

Materialiteit (Material as Metaphor) — het belangrijkste principe van Material Design, dat de fysieke eigenschappen van papier overneemt: materiaal heeft een oppervlak, dikte (1dp), werpt een schaduw (Elevation) en neemt ruimte in (Bounds). Interface-elementen — kaarten, knoppen, panelen — gedragen zich als fysieke objecten: ze verheffen zich bij indrukken (ripple-effect), overlappen elkaar (Z-as) en animeren bij verschijnen (motion).

Diepte (Depth) wordt gecreëerd door Elevation — de eigenschap van materiaal die zijn positie op de Z-as bepaalt. Hoe hoger de Elevation (8dp, 16dp), hoe groter de schaduw die het element werpt. Een kaart heeft Elevation 1–2dp, FAB — 6dp, Modal BottomSheet — 16dp. Diepte wordt gebruikt om hiërarchie over te brengen: modale vensters en dialogen staan altijd boven de inhoud, Navigation Drawer — boven de Action Bar. Diepte vervangt het driedimensionale perspectief door een platte Z-laag, terwijl de weergaveprestaties behouden blijven.

Beweging (Motion) — animatie in Material Design is niet decoratief, maar functioneel. Animatie moet: 1) de aandacht van de gebruiker sturen (het openvouwen van een kaart met details), 2) ruimtelijke relaties uitleggen (AppBar verandert in TopAppBar bij scrollen), 3) vloeiende overgangen garanderen (shared element transition tussen schermen). Volgens Google Material Guidelines (2024) mag animatie niet langer duren dan 300ms voor micro-interacties en 500ms voor overgangen tussen schermen — langere animaties worden ervaren als vertraging.

Material You (Material Design 3): dynamische kleuren en personalisatie

Material You (Material Design 3) — de grootste update van het ontwerpsysteem, geïntroduceerd in 2021 samen met Android 12. De belangrijkste innovatie — dynamische kleuren (Monet): het systeem haalt automatisch 5 belangrijke kleuren uit het apparaatachtergrond en genereert een volledig kleurenpalet van 15 tinten (primary, secondary, tertiary, error met hun licht/dark-varianten) met berekende WCAG AA-contrastverhoudingen.

Het kleurenmodel van Material You is gebaseerd op HCT (Hue, Chroma, Tone) — een door Google ontwikkelde kleurenruimte die menselijke perceptie (Hue) combineert met verzadiging (Chroma) en helderheid (Tone). In tegenstelling tot HSL/HSV garandeert HCT dat alle gegenereerde tinten een gespecificeerd contrast hebben op witte en zwarte achtergrond. Google Material Guidelines (2024) raadt aan om alleen tonale varianten van het hoofdpalet te gebruiken voor tekst, surface-tinten voor achtergronden en primary-container voor accentoppervlakken.

De gebruiker kan kiezen uit 4 personalisatieschema’s: TonalSpot (hoofdkleur uit het achtergrond), Vibrant (meest verzadigde kleur), Expressive (extra felle kleuren), Neutral (monochrome gamma). Material Theme Builder (material-foundation.github.io) maakt het mogelijk om een Material 3-thema te exporteren naar XML, Compose Theme, CSS en zelfs een Figma-plugin.

Material Components voor Android: implementatie via XML en Compose

Material Components voor Android (MDC-Android) — de officiële Google-bibliotheek die kant-en-klare View-componenten biedt die voldoen aan de Material Design-richtlijnen. Voor XML-lay-outs is de bibliotheek beschikbaar via de afhankelijkheid com.google.android.material:material, huidige versie per 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>

Het voorbeeld toont een Material-scherm met MaterialToolbar (TopAppBar), MaterialCardView met aangepaste marges en omranding, TextInputLayout met een vervolgkeuzelijst en MaterialButton in Material3-stijl. FAB is verankerd aan de Toolbar — het standaardschema voor master-detail-interfaces.

@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("Stad") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Verzenden")
            }
        }
    }
}

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

De code demonstreert het Material You-thema in Compose: dynamicLightColorScheme() genereert automatisch een kleurenschema op basis van het apparaatachtergrond. Scaffold biedt een standaard raamwerk met TopAppBar en FAB. OutlinedTextField en Button zijn Material 3-componenten waarvan de kleuren uit de dynamische colorScheme komen. Bij het wijzigen van het achtergrond worden alle kleuren van de app automatisch bijgewerkt — personalisatie zonder codeaanpassingen.

Material Design op iOS: Material Components voor iOS

Material Components voor iOS (MDC-iOS) — een bibliotheek die native UIKit-componenten biedt die Material Design op iOS implementeren. Omdat iOS zijn eigen ontwerpsysteem (Human Interface Guidelines) heeft, worden Material-componenten op iOS minder vaak gebruikt, maar ze zijn nodig in cross-platform apps waar een uniforme visuele stijl tussen Android en iOS vereist is.

MDC-iOS omvat AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs en TextFields in Material Design-stijl. De bibliotheek is beschikbaar via CocoaPods (pod 'MaterialComponents') en Swift Package Manager. Apple Human Interface Guidelines (2024) raadt niet aan om native UIKit-componenten volledig te vervangen door Material-equivalenten, maar staat het gebruik van Material-componenten voor aangepaste interfaces toe op voorwaarde dat native navigatie (NavigationStack, UITabBarController) behouden blijft.

Bij IT Sectr gebruiken we Material Components op iOS alleen voor apps die vanuit Android worden overgezet (cross-platform projecten met Flutter of Kotlin Multiplatform). Voor native iOS-apps volgen we HIG en gebruiken we UIKit/SwiftUI met aangepaste styling onder het merk van de klant. Volgens een enquête van Swift Community (2024) gebruikt 8% van de ontwikkelaars Material Components voor iOS, voornamelijk in hybride projecten.

Material Design vergeleken met andere ontwerpsystemen

Material Design — is niet het enige ontwerpsysteem op de markt. De grootste concurrenten: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Elk systeem is geoptimaliseerd voor zijn platform: Material Design — voor Android, HIG — voor iOS, Fluent — voor Windows. De keuze van het ontwerpsysteem wordt bepaald door het doelplatform en ecosysteem.

Het belangrijkste voordeel van Material Design is de openheid en cross-platform ondersteuning. Richtlijnen, componenten en tools (Material Theme Builder) zijn gratis beschikbaar, wat het systeem populair maakt onder startups en onafhankelijke ontwikkelaars. Apple HIG is nauw verbonden met het Apple-ecosysteem, maar biedt de beste aansluiting bij de platformverwachtingen van gebruikers. Voor cross-platform projecten is Material Design de optimale keuze dankzij Flutter en Jetpack Compose Multiplatform.