Elevation — podstawy, cienie i współrzędna Z w Androidzie

Czym jest elevation?

Elevation — to metryka wprowadzona w Material Design (Google I/O 2014), która opisuje położenie elementu wzdłuż osi Z. W przeciwieństwie do X i Y (dwuwymiarowa płaszczyzna ekranu), Z to wysokość nad płaszczyzną. Elevation wyraża się w dp (density-independent pixels) i określa dwa efekty wizualne: cień (shadow), który staje się większy i bardziej rozmyty wraz ze wzrostem elevation, oraz kolejność rysowania (elementy z wyższym elevation rysują się nad elementami z niższym).

Metafora fizyczna: wyobraź sobie kartki papieru na stole. Im wyższy stos, tym dłuższy cień rzuca górna kartka. Elevation w Material Design działa dokładnie tak samo: każdy element to „cyfrowa kartka" na określonej wysokości. Gdy użytkownik wchodzi w interakcję z elementem (naciska przycisk, podnosi kartę), elevation tymczasowo wzrasta — nazywa się to „elewacją przy interakcji" (interaction elevation).

Według Material Design Guidelines (Google, 2026), prawidłowe użycie elevation poprawia skanowalność interfejsu o 35%: użytkownicy szybciej znajdują interaktywne elementy, ponieważ „wystają" ponad płaską treść. Jednak nadmierna liczba poziomów elevation (powyżej 4) osłabia ten efekt: jeśli wszystkie elementy unoszą się, żaden nie wydaje się ważny.

Elevation w Androidzie: właściwości i API

W Androidzie elevation jest zaimplementowane jako wbudowana właściwość View od API 21 (Android 5.0 Lollipop). View.elevation ustawia podstawową wysokość w pikselach (px), a View.translationZ — dodatkowe przesunięcie do animacji (np. przy naciśnięciu). Całkowita wysokość wizualna = elevation + translationZ. Obie właściwości obsługują animację przez ViewPropertyAnimator lub ObjectAnimator.

<!-- XML: elevation i 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="Przycisk z elewacją" />

StateListAnimator — zasób XML do animacji elevation i translationZ w zależności od stanu View (pressed, focused, enabled). Na przykład przy naciśnięciu przycisku elevation może wzrosnąć z 2 dp do 8 dp, tworząc efekt uniesienia. StateListAnimator obsługuje animację przez ObjectAnimator dla dowolnych właściwości View.

// Kotlin: programowa konfiguracja elevation
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // podstawowa wysokość w px

// Animacja elevation przy naciśnięciu
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — kluczowy komponent do prawidłowego rysowania cienia od elevation. Domyślnie Android używa ViewOutlineProvider.BACKGROUND, który tworzy kontur na podstawie tła drawable. Dla View z zaokrąglonymi rogami (przez shape drawable) trzeba ustawić niestandardowy OutlineProvider, w przeciwnym razie cień będzie prostokątny. Komponenty Material (CardView, MaterialButton) zarządzają OutlineProvider automatycznie.

Poziomy elevation w Material Design 3

Material Design 3 (Material You) zmienił system elevation w porównaniu z Material Design 2. Zamiast 12 stałych poziomów (Material 2) M3 oferuje 5 podstawowych tonów (tones), z których każdy odpowiada określonemu poziomowi elevation. Ponadto M3 wprowadza koncepcję „kolorowego cienia" (color shadow) na Androidzie 12+: cień może być zabarwiony na akcentowy kolor motywu, zamiast być czarno-szarym.

Interaction elevation — tymczasowe zwiększenie elevation przy interakcji użytkownika z elementem. W Material Design 3 elementy interaktywne (przyciski, karty) otrzymują +1–2 dp do podstawowej elevation przy naciśnięciu (pressed state) lub fokucie (focused state). Dla FloatingActionButton interaction elevation wynosi +6 dp. Animacja przejścia między stanami powinna trwać 150–200 ms dla naturalnego odczucia dotykowego.

Elevation w Jetpack Compose

Jetpack Compose obsługuje elevation przez komponenty Card i Surface, które mają wbudowany parametr elevation. W przeciwieństwie do View System, Compose rysuje cienie przez własny silnik renderujący, co zapewnia jednakowe działanie na wszystkich wersjach Androida (API 21+). Modifier.shadow() — niskopoziomowy modyfikator do dodawania cienia do dowolnego composable.

// Jetpack Compose: elevation przez Surface i 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("Karta zarządzana przez elevation")
}

// Modifier.shadow dla niestandardowych kształtów
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* akcja */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Powierzchnia z cieniem") }

Animacja elevation w Compose jest realizowana przez animateFloatAsState lub Animatable. Przy zmianie elevation Compose automatycznie animuje cień. Dla elementów interaktywnych używaj M3 InteractionSource w kombinacji z animateElevation, aby elevation reagowała na naciśnięcia, fokus i przeciąganie. Material 3 w Compose 1.2+ obsługuje color shadow — cień zabarwiony na kolor primary Container motywu.

Elevation na iOS: symulacja wysokości

Na iOS nie ma wbudowanego odpowiednika elevation z Material Design. Human Interface Guidelines Apple nie używają współrzędnej Z do zarządzania cieniami — zamiast tego programiści konfigurują cienie ręcznie przez CALayer.shadow*. Jednak koncepcja hierarchii wizualnej przez cienie i głębię istnieje również w iOS: prezentacje modalne, UIAlertController, UIPopoverPresentationController — wszystkie używają cieni do oddzielenia od tła.

Do symulacji elevation na iOS programiści używają kombinacji shadowOpacity + shadowRadius + shadowOffset. Im wyższa wymagana „wysokość", tym większy promień rozmycia i przesunięcie cienia. W SwiftUI cienie są ustawiane przez modyfikator .shadow() z parametrami. Do zachowania podobnego do Material na iOS istnieją biblioteki Material Components for iOS (MDC) od Google.

// iOS: symulacja elevation przez 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
    }
}

// Użycie
cardView.applyElevation(level: 3)  // ekwiwalent 6 dp

Material Components for iOS (MDC-iOS) — biblioteka Google, która przenosi Material Design elevation na iOS. MDC-iOS udostępnia klasę MDCShadowElevation z predefiniowanymi wartościami, MDCShadowLayer do rysowania cienia i MDCCard dla kart Material z prawidłowym elevation. MDC-iOS obsługuje animację elevation przy naciśnięciu przez stateful shadow properties.