Elevation — alapok, árnyékok és Z-koordináta Androidban

Mi az elevation?

Elevation — a Material Designban (Google I/O 2014) bevezetett metrika, amely leírja az elem helyzetét a Z-tengely mentén. Az X-től és Y-tól (a képernyő kétdimenziós síkja) eltérően a Z a sík feletti magasság. Az elevation dp-ben (density-independent pixels) van kifejezve, és két vizuális hatást határoz meg: az árnyékot (shadow), amely az elevation növekedésével nagyobb és elmosódottabb lesz, valamint a rajzolási sorrendet (a magasabb elevation-nel rendelkező elemek az alacsonyabb elevation-nel rendelkezők fölé rajzolódnak).

Fizikai metafora: képzeljen el papírlapokat egy asztalon. Minél magasabb a kupac, annál hosszabb a felső lap árnyéka. Elevation a Material Designban pontosan ugyanígy működik: minden elem egy „digitális lap" egy bizonyos magasságban. Amikor a felhasználó interakcióba lép egy elemmel (megnyom egy gombot, felemel egy kártyát), az elevation ideiglenesen megnő — ezt „interakciós elevációnak" (interaction elevation) nevezzük.

A Material Design Guidelines (Google, 2026) szerint az elevation helyes használata 35%-kal javítja a felület szkennelhetőségét: a felhasználók gyorsabban megtalálják az interaktív elemeket, mert azok „kiemelkednek" a lapos tartalomból. Az elevation szintek túlzott száma (több mint 4) azonban csökkenti ezt a hatást: ha minden elem lebeg, egyik sem tűnik fontosnak.

Elevation Androidban: tulajdonságok és API

Androidban az elevation beépített View tulajdonságként van implementálva az API 21-től (Android 5.0 Lollipop). A View.elevation beállítja az alapszintű magasságot pixelben (px), a View.translationZ pedig egy további eltolást animációkhoz (pl. megnyomáskor). Teljes vizuális magasság = elevation + translationZ. Mindkét tulajdonság támogatja az animációt ViewPropertyAnimator vagy ObjectAnimator segítségével.

<!-- XML: elevation és 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="Gomb elevációval" />

StateListAnimator — XML erőforrás az elevation és translationZ animálására a View állapotától függően (pressed, focused, enabled). Például egy gomb megnyomásakor az elevation 2 dp-ről 8 dp-re nőhet, emelkedési hatást keltve. A StateListAnimator támogatja az animációt ObjectAnimator segítségével bármely View tulajdonsághoz.

// Kotlin: elevation programozott beállítása
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // alap magasság px-ben

// Elevation animáció nyomáskor
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — kulcsfontosságú összetevő az elevation árnyékának helyes rajzolásához. Alapértelmezés szerint az Android a ViewOutlineProvider.BACKGROUND-ot használja, amely a háttér drawable alapján hoz létre kontúrt. Lekerekített sarkú View (shape drawable-en keresztül) esetén egyéni OutlineProvider-t kell beállítani, különben az árnyék téglalap alakú lesz. A Material komponensek (CardView, MaterialButton) automatikusan kezelik az OutlineProvider-t.

Elevation szintek a Material Design 3-ban

Material Design 3 (Material You) felülvizsgálta az elevation rendszert a Material Design 2-höz képest. 12 rögzített szint (Material 2) helyett az M3 5 alaptónust (tones) kínál, amelyek mindegyike egy adott elevation szintnek felel meg. Emellett az M3 bevezeti a „színes árnyék" (color shadow) koncepcióját Android 12+-on: az árnyék a téma akcentusszínére színezhető a fekete-szürke helyett.

Interaction elevation — az elevation ideiglenes növelése a felhasználó elemekkel való interakciója során. A Material Design 3-ban az interaktív elemek (gombok, kártyák) +1–2 dp-t kapnak az alap elevation-re nyomáskor (pressed state) vagy fókuszáláskor (focused state). A FloatingActionButton esetében az interaction elevation +6 dp. Az állapotok közötti átmeneti animációnak 150–200 ms-ig kell tartania a természetes tapintási visszajelzés érdekében.

Elevation a Jetpack Compose-ban

Jetpack Compose támogatja az elevation-t a Card és Surface komponenseken keresztül, amelyek beépített elevation paraméterrel rendelkeznek. A View System-től eltérően a Compose a saját renderelő motorján keresztül rajzolja az árnyékokat, ami azonos viselkedést biztosít az Android minden verzióján (API 21+). A Modifier.shadow() egy alacsony szintű módosító árnyék hozzáadásához bármely composable-hez.

// Jetpack Compose: elevation Surface és Card segítségével
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("Elevation által vezérelt kártya")
}

// Modifier.shadow egyéni formákhoz
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* művelet */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Felület árnyékkal") }

Elevation animáció a Compose-ban az animateFloatAsState vagy Animatable segítségével valósítható meg. Az elevation változásakor a Compose automatikusan animálja az árnyékot. Interaktív elemek esetén használja az M3 InteractionSource-t az animateElevation-nel kombinálva, hogy az elevation reagáljon a nyomásokra, fókuszra és húzásra. A Material 3 a Compose 1.2+-ban támogatja a color shadow-t — a téma elsődleges Container színére színezett árnyékot.

Elevation iOS-en: magasság szimuláció

iOS-en nincs beépített megfelelője a Material Design elevation-nek. Az Apple Human Interface Guidelines nem használ Z-koordinátát az árnyékok kezelésére — ehelyett a fejlesztők manuálisan konfigurálják az árnyékokat a CALayer.shadow* segítségével. Az árnyékokon és mélységen keresztüli vizuális hierarchia koncepciója azonban iOS-en is létezik: modális prezentációk, UIAlertController, UIPopoverPresentationController — mindegyik árnyékokat használ a háttértől való elkülönülésre.

Az elevation szimulálásához iOS-en a fejlesztők a shadowOpacity + shadowRadius + shadowOffset kombinációját használják. Minél magasabb a szükséges „magasság", annál nagyobb az elmosódási sugár és az árnyék eltolása. A SwiftUI-ban az árnyékok a .shadow() módosítóval paraméterezve állíthatók be. A Material-szerű viselkedéshez iOS-en léteznek a Google Material Components for iOS (MDC) könyvtárai.

// iOS: elevation szimuláció CALayer segítségével
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
    }
}

// Használat
cardView.applyElevation(level: 3)  // 6 dp megfelelője

Material Components for iOS (MDC-iOS) — a Google könyvtára, amely a Material Design elevation-t portolja iOS-re. Az MDC-iOS biztosítja az MDCShadowElevation osztályt előre meghatározott értékekkel, az MDCShadowLayer-t az árnyék rajzolásához és az MDCCard-ot Material kártyákhoz helyes elevation-nel. Az MDC-iOS támogatja az elevation animációját nyomáskor a stateful shadow properties segítségével.