Elevation — základy, stíny a Z-souřadnice v Androidu

Co je elevation?

Elevation — je metrika zavedená v Material Design (Google I/O 2014), která popisuje polohu prvku podél osy Z. Na rozdíl od X a Y (dvojrozměrná rovina obrazovky) je Z výška nad rovinou. Elevation se vyjadřuje v dp (density-independent pixels) a určuje dva vizuální efekty: stín (shadow), který se s rostoucí elevation zvětšuje a je více rozmazaný, a pořadí vykreslování (prvky s vyšší elevation se vykreslují nad prvky s nižší elevation).

Fyzická metafora: představte si listy papíru na stole. Čím vyšší hromádka, tím delší stín z horního listu. Elevation v Material Design funguje úplně stejně: každý prvek je „digitální list" v určité výšce. Když uživatel interaguje s prvkem (stiskne tlačítko, zvedne kartu), elevation se dočasně zvýší — tomu se říká „elevace při interakci" (interaction elevation).

Podle Material Design Guidelines (Google, 2026) správné použití elevation zlepšuje skenovatelnost rozhraní o 35%: uživatelé rychleji nacházejí interaktivní prvky, protože „vyčnívají" nad plochým obsahem. Nadměrný počet úrovní elevation (více než 4) však tento efekt snižuje: pokud všechny prvky plují, žádný se nezdá důležitý.

Elevation v Androidu: vlastnosti a API

V Androidu je elevation implementována jako vestavěná vlastnost View od API 21 (Android 5.0 Lollipop). View.elevation nastavuje základní výšku v pixelech (px) a View.translationZ — dodatečný posun pro animace (např. při stisknutí). Celková vizuální výška = elevation + translationZ. Obě vlastnosti podporují animaci prostřednictvím ViewPropertyAnimator nebo ObjectAnimator.

<!-- XML: elevation a 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="Tlačítko s elevací" />

StateListAnimator — XML zdroj pro animaci elevation a translationZ v závislosti na stavu View (pressed, focused, enabled). Například při stisknutí tlačítka se elevation může zvýšit z 2 dp na 8 dp, čímž vzniká efekt zvednutí. StateListAnimator podporuje animaci přes ObjectAnimator pro libovolné vlastnosti View.

// Kotlin: programové nastavení elevation
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // základní výška v px

// Animace elevation při stisknutí
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — klíčová komponenta pro správné vykreslování stínu z elevation. Ve výchozím nastavení Android používá ViewOutlineProvider.BACKGROUND, který vytváří konturu na základě drawable pozadí. Pro View se zaoblenými rohy (přes shape drawable) je třeba nastavit vlastní OutlineProvider, jinak bude stín obdélníkový. Material komponenty (CardView, MaterialButton) spravují OutlineProvider automaticky.

Úrovně elevation v Material Design 3

Material Design 3 (Material You) přepracoval systém elevation ve srovnání s Material Design 2. Místo 12 pevných úrovní (Material 2) M3 nabízí 5 základních tónů (tones), z nichž každý odpovídá určité úrovni elevation. Kromě toho M3 zavádí koncept „barevného stínu" (color shadow) na Androidu 12+: stín může být obarven akcentní barvou motivu, místo aby byl černo-šedý.

Interaction elevation — dočasné zvýšení elevation při interakci uživatele s prvkem. V Material Design 3 získávají interaktivní prvky (tlačítka, karty) +1–2 dp k základní elevation při stisknutí (pressed state) nebo zaostření (focused state). Pro FloatingActionButton činí interaction elevation +6 dp. Animace přechodu mezi stavy by měla trvat 150–200 ms pro přirozenou hmatovou odezvu.

Elevation v Jetpack Compose

Jetpack Compose podporuje elevation prostřednictvím komponent Card a Surface, které mají vestavěný parametr elevation. Na rozdíl od View System vykresluje Compose stíny prostřednictvím vlastního renderovacího enginu, což zajišťuje stejné chování na všech verzích Androidu (API 21+). Modifier.shadow() — nízkoúrovňový modifikátor pro přidání stínu k libovolnému composable.

// Jetpack Compose: elevation přes Surface a 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 řízená elevation")
}

// Modifier.shadow pro vlastní tvary
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* akce */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Povrch se stínem") }

Animace elevation v Compose se realizuje prostřednictvím animateFloatAsState nebo Animatable. Při změně elevation Compose automaticky animuje stín. Pro interaktivní prvky použijte M3 InteractionSource v kombinaci s animateElevation, aby elevation reagovala na stisky, fokus a přetahování. Material 3 v Compose 1.2+ podporuje color shadow — stín obarvený barvou primary Container motivu.

Elevation na iOS: simulace výšky

Na iOS neexistuje vestavěná obdoba elevation z Material Design. Human Interface Guidelines Apple nepoužívají Z-souřadnici pro správu stínů — místo toho vývojáři konfigurují stíny ručně přes CALayer.shadow*. Koncept vizuální hierarchie prostřednictvím stínů a hloubky však existuje i na iOS: modální prezentace, UIAlertController, UIPopoverPresentationController — všechny používají stíny k oddělení od pozadí.

Pro simulaci elevation na iOS používají vývojáři kombinaci shadowOpacity + shadowRadius + shadowOffset. Čím vyšší je požadovaná „výška", tím větší je poloměr rozmazání a posun stínu. V SwiftUI se stíny nastavují prostřednictvím modifikátoru .shadow() s parametry. Pro chování podobné Material na iOS existují knihovny Material Components for iOS (MDC) od Google.

// iOS: simulace elevation přes 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
    }
}

// Použití
cardView.applyElevation(level: 3)  // ekvivalent 6 dp

Material Components for iOS (MDC-iOS) — knihovna Google, která portuje Material Design elevation na iOS. MDC-iOS poskytuje třídu MDCShadowElevation s předdefinovanými hodnotami, MDCShadowLayer pro vykreslování stínu a MDCCard pro Material karty se správnou elevation. MDC-iOS podporuje animaci elevation při stisknutí prostřednictvím stateful shadow properties.