Elevation — Grundlagen, Schatten und Z-Koordinate in Android

Was ist Elevation?

Elevation ist eine in Material Design (Google I/O 2014) eingeführte Metrik, die die Position eines Elements entlang der z-Achse beschreibt. Anders als x und y (die zweidimensionale Ebene des Bildschirms) ist z die Höhe über der Ebene. Elevation wird in dp (dichteunabhängigen Pixeln) ausgedrückt und bestimmt zwei visuelle Effekte: den Schatten, der mit zunehmender Elevation größer und unschärfer wird, und die Zeichenreihenfolge (Elemente mit höherer Elevation werden über Elementen mit niedrigerer Elevation gezeichnet).

Physikalische Metapher: Stellen Sie sich Blätter Papier auf einem Tisch vor. Je höher der Stapel, desto länger der Schatten des obersten Blattes. Elevation in Material Design funktioniert genauso — jedes Element ist ein „digitales Blatt“ in einer bestimmten Höhe. Wenn ein Benutzer mit einem Element interagiert (einen Knopf drückt, eine Karte anhebt), erhöht sich die Elevation vorübergehend — dies nennt man „Interaktionselevation.“

Laut den Material Design Guidelines (Google, 2026) verbessert die richtige Verwendung von Elevation die Scanbarkeit der Benutzeroberfläche um 35%: Benutzer finden interaktive Elemente schneller, weil sie über dem flachen Inhalt „hervorstechen“. Eine übermäßige Anzahl von Elevationsstufen (mehr als 4) verringert diesen Effekt jedoch — wenn alles schwebt, scheint nichts wichtig.

Elevation in Android: Eigenschaften und API

In Android ist Elevation als integrierte View-Eigenschaft seit API 21 (Android 5.0 Lollipop) implementiert. View.elevation legt die Basishöhe in Pixeln (px) fest, und View.translationZ bietet einen zusätzlichen Versatz für Animationen (z. B. beim Drücken). Die gesamte visuelle Höhe = elevation + translationZ. Beide Eigenschaften unterstützen Animation über ViewPropertyAnimator oder ObjectAnimator.

<!-- XML: elevation und 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="Button mit Elevation" />

StateListAnimator — eine XML-Ressource zum Animieren von Elevation und translationZ basierend auf dem View-Zustand (gedrückt, fokussiert, aktiviert). Wenn zum Beispiel ein Knopf gedrückt wird, kann die Elevation von 2 dp auf 8 dp ansteigen, was einen Anhebeeffekt erzeugt. StateListAnimator unterstützt Animation über ObjectAnimator für beliebige View-Eigenschaften.

// Kotlin: programmatische Elevation-Einrichtung
import android.animation.ObjectAnimator
import android.view.View

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

// Elevationsanimation beim Drücken
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — eine Schlüsselkomponente für das korrekte Rendern des Elevationschattens. Standardmäßig verwendet Android ViewOutlineProvider.BACKGROUND, der eine Kontur basierend auf dem Hintergrund-Drawable erstellt. Für Views mit abgerundeten Ecken (über Shape-Drawable) muss ein benutzerdefinierter OutlineProvider festgelegt werden, sonst wird der Schatten rechteckig. Material-Komponenten (CardView, MaterialButton) verwalten den OutlineProvider automatisch.

Elevationsstufen in Material Design 3

Material Design 3 (Material You) hat das Elevationssystem im Vergleich zu Material Design 2 überarbeitet. Anstelle von 12 festen Stufen (Material 2) bietet M3 5 grundlegende Töne, die jeweils einer bestimmten Elevationsstufe entsprechen. Darüber hinaus führt M3 das Konzept des „farbigen Schattens“ auf Android 12+ ein: Der Schatten kann mit der Akzentfarbe des Designs eingefärbt werden, anstatt schwarz-grau zu sein.

Interaktionselevation — eine vorübergehende Erhöhung der Elevation während der Benutzerinteraktion mit einem Element. In Material Design 3 erhalten interaktive Elemente (Knöpfe, Karten) beim Drücken (gedrückter Zustand) oder Fokussieren (fokussierter Zustand) +1–2 dp zu ihrer Basiselevation. Für FloatingActionButton beträgt die Interaktionselevation +6 dp. Die Übergangsanimation zwischen Zuständen sollte 150–200 ms dauern, um eine natürliche taktile Rückmeldung zu gewährleisten.

Elevation in Jetpack Compose

Jetpack Compose unterstützt Elevation über die Komponenten Card und Surface, die einen integrierten Elevationsparameter haben. Anders als das View-System rendert Compose Schatten über seine eigene Rendering-Engine, was ein konsistentes Verhalten auf allen Android-Versionen (API 21+) gewährleistet. Modifier.shadow() ist ein Low-Level-Modifikator zum Hinzufügen von Schatten zu jedem Composable.

// Jetpack Compose: Elevation über Surface und 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("Elevationsgesteuerte Karte")
}

// Modifier.shadow für benutzerdefinierte Formen
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* Aktion */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Oberfläche mit Schatten") }

Elevationsanimation in Compose wird über animateFloatAsState oder Animatable implementiert. Wenn sich die Elevation ändert, animiert Compose automatisch den Schatten. Für interaktive Elemente verwenden Sie M3 InteractionSource in Kombination mit animateElevation, damit die Elevation auf Drücken, Fokus und Ziehen reagiert. Material 3 in Compose 1.2+ unterstützt farbige Schatten — einen Schatten, der mit der primary Container-Farbe des Designs eingefärbt ist.

Elevation auf iOS: Höhensimulation

Auf iOS gibt es kein eingebautes Analogon zur Elevation aus Material Design. Apples Human Interface Guidelines verwenden keine z-Koordinaten für die Schattenverwaltung — stattdessen konfigurieren Entwickler Schatten manuell über CALayer.shadow*. Das Konzept der visuellen Hierarchie durch Schatten und Tiefe existiert jedoch auch auf iOS: modale Präsentationen, UIAlertController, UIPopoverPresentationController — alle verwenden Schatten, um sich vom Hintergrund abzuheben.

Zur Simulation von Elevation auf iOS verwenden Entwickler eine Kombination aus shadowOpacity + shadowRadius + shadowOffset. Je höher die erforderliche „Höhe“, desto größer der Unschärferadius und der Schattenversatz. In SwiftUI werden Schatten über den .shadow()-Modifikator mit Parametern festgelegt. Für ein Material-ähnliches Verhalten auf iOS gibt es Bibliotheken wie Material Components for iOS (MDC) von Google.

// iOS: Elevationssimulation über 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
    }
}

// Verwendung
cardView.applyElevation(level: 3)  // entspricht 6 dp

Material Components for iOS (MDC-iOS) — eine Google-Bibliothek, die Material Design Elevation auf iOS portiert. MDC-iOS bietet die Klasse MDCShadowElevation mit vordefinierten Werten, MDCShadowLayer zum Rendern von Schatten und MDCCard für Material-Karten mit korrekter Elevation. MDC-iOS unterstützt Elevationsanimation beim Drücken über zustandsbehaftete Schatteneigenschaften.