Elevation — basisprincipes, schaduwen en Z-coördinaat in Android

Wat is elevation?

Elevation — is een metriek geïntroduceerd in Material Design (Google I/O 2014) die de positie van een element langs de Z-as beschrijft. In tegenstelling tot X en Y (het tweedimensionale vlak van het scherm), is Z de hoogte boven het vlak. Elevation wordt uitgedrukt in dp (density-independent pixels) en bepaalt twee visuele effecten: schaduw (shadow) die groter en vager wordt naarmate elevation toeneemt, en de tekenvolgorde (elementen met hogere elevation worden boven elementen met lagere elevation getekend).

Fysieke metafoor: stel u vellen papier op een tafel voor. Hoe hoger de stapel, hoe langer de schaduw van het bovenste vel. Elevation in Material Design werkt precies hetzelfde: elk element is een „digitaal vel" op een bepaalde hoogte. Wanneer een gebruiker met een element interageert (een knop indrukt, een kaart optilt), neemt elevation tijdelijk toe — dit wordt „elevatie bij interactie" (interaction elevation) genoemd.

Volgens Material Design Guidelines (Google, 2026) verbetert correct gebruik van elevation de scanbaarheid van de interface met 35%: gebruikers vinden interactieve elementen sneller omdat ze boven de platte inhoud „uitsteken". Een overmatig aantal elevation-niveaus (meer dan 4) vermindert dit effect echter: als alle elementen zweven, lijkt geen enkel element belangrijk.

Elevation in Android: eigenschappen en API

In Android is elevation geïmplementeerd als een ingebouwde View-eigenschap vanaf API 21 (Android 5.0 Lollipop). View.elevation stelt de basishoogte in pixels (px) in, en View.translationZ — een extra verschuiving voor animaties (bijvoorbeeld bij indrukken). Totale visuele hoogte = elevation + translationZ. Beide eigenschappen ondersteunen animatie via ViewPropertyAnimator of ObjectAnimator.

<!-- XML: elevation en translationZ -->
<Button
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="4dp"
    android:translationZ="2dp"
    android:stateListAnimator="@anim/button_elevation"
    android:text="Knop met elevatie" />

StateListAnimator — een XML-bron voor het animeren van elevation en translationZ afhankelijk van de View-status (pressed, focused, enabled). Bijvoorbeeld bij het indrukken van een knop kan elevation toenemen van 2 dp naar 8 dp, waardoor een hefeffect ontstaat. StateListAnimator ondersteunt animatie via ObjectAnimator voor alle View-eigenschappen.

// Kotlin: programmatische configuratie van elevation
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // basishoogte in px

// Elevatie-animatie bij indrukken
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — de belangrijkste component voor het correct tekenen van de schaduw van elevation. Standaard gebruikt Android ViewOutlineProvider.BACKGROUND, die een contour maakt op basis van de achtergrond-drawable. Voor View met afgeronde hoeken (via shape drawable) moet een aangepaste OutlineProvider worden ingesteld, anders wordt de schaduw rechthoekig. Material-componenten (CardView, MaterialButton) beheren OutlineProvider automatisch.

Elevation-niveaus in Material Design 3

Material Design 3 (Material You) heeft het elevation-systeem herzien in vergelijking met Material Design 2. In plaats van 12 vaste niveaus (Material 2) biedt M3 5 basistonen (tones), die elk overeenkomen met een specifiek elevation-niveau. Daarnaast introduceert M3 het concept van „gekleurde schaduw" (color shadow) op Android 12+: de schaduw kan worden gekleurd in de accentkleur van het thema, in plaats van zwart-grijs te zijn.

Interaction elevation — tijdelijke verhoging van elevation bij interactie van de gebruiker met een element. In Material Design 3 krijgen interactieve elementen (knoppen, kaarten) +1–2 dp bij de basis-elevation bij indrukken (pressed state) of focus (focused state). Voor FloatingActionButton is de interaction elevation +6 dp. De transitie-animatie tussen toestanden moet 150–200 ms duren voor een natuurlijke tactiele respons.

Elevation in Jetpack Compose

Jetpack Compose ondersteunt elevation via de componenten Card en Surface, die een ingebouwde elevation-parameter hebben. In tegenstelling tot View System tekent Compose schaduwen via zijn eigen render-engine, wat hetzelfde gedrag garandeert op alle Android-versies (API 21+). Modifier.shadow() — een laag-niveau modifier voor het toevoegen van schaduw aan elke composable.

// Jetpack Compose: elevation via Surface en Card
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Surface

Card(
    elevation = CardDefaults.cardElevation(
        defaultElevation = 4.dp,
        pressedElevation = 8.dp,
        focusedElevation = 6.dp
    ),
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.surface
    )
) {
    Text("Door elevation beheerde kaart")
}

// Modifier.shadow voor aangepaste vormen
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* actie */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Oppervlak met schaduw") }

Elevatie-animatie in Compose wordt geïmplementeerd via animateFloatAsState of Animatable. Bij wijziging van elevation animeert Compose automatisch de schaduw. Voor interactieve elementen gebruikt u M3 InteractionSource in combinatie met animateElevation zodat elevation reageert op indrukken, focus en slepen. Material 3 in Compose 1.2+ ondersteunt color shadow — schaduw gekleurd in de primaire Container-kleur van het thema.

Elevation op iOS: simulatie van hoogte

Op iOS is er geen ingebouwde analogie van elevation uit Material Design. Apple's Human Interface Guidelines gebruiken geen Z-coördinaat voor het beheren van schaduwen — in plaats daarvan configureren ontwikkelaars schaduwen handmatig via CALayer.shadow*. Het concept van visuele hiërarchie door schaduwen en diepte bestaat echter ook op iOS: modale presentaties, UIAlertController, UIPopoverPresentationController — ze gebruiken allemaal schaduwen om zich van de achtergrond te scheiden.

Voor simulatie van elevation op iOS gebruiken ontwikkelaars een combinatie van shadowOpacity + shadowRadius + shadowOffset. Hoe hoger de vereiste „hoogte", hoe groter de vervagingsradius en verschuiving van de schaduw. In SwiftUI worden schaduwen ingesteld via de modifier .shadow() met parameters. Voor Material-achtig gedrag op iOS bestaan er bibliotheken Material Components for iOS (MDC) van Google.

// iOS: simulatie van elevation via CALayer
import UIKit

extension UIView {
    func applyElevation(level: Int) {
        let elevationMap: [Int: (CGFloat, CGFloat, CGFloat)] = [
            1: (0.05, 1, 2),
            2: (0.08, 2, 4),
            3: (0.11, 4, 8),
            4: (0.12, 6, 12),
            5: (0.14, 8, 16),
            6: (0.15, 12, 24)
        ]
        let (opacity, offset, radius) = elevationMap[level] ?? (0.08, 2, 4)
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = Float(opacity)
        layer.shadowOffset = CGSize(width: 0, height: offset)
        layer.shadowRadius = radius
        layer.shouldRasterize = true
        layer.rasterizationScale = UIScreen.main.scale
    }
}

// Gebruik
cardView.applyElevation(level: 3)  // equivalent van 6 dp

Material Components for iOS (MDC-iOS) — de Google-bibliotheek die Material Design elevation naar iOS port. MDC-iOS biedt de klasse MDCShadowElevation met vooraf gedefinieerde waarden, MDCShadowLayer voor het tekenen van schaduwen en MDCCard voor Material-kaarten met correcte elevation. MDC-iOS ondersteunt elevatie-animatie bij indrukken via stateful shadow properties.