Elevation — bazele, umbrele și coordonata Z în Android

Ce este elevation?

Elevation — este o metrică introdusă în Material Design (Google I/O 2014) care descrie poziția unui element de-a lungul axei Z. Spre deosebire de X și Y (planul bidimensional al ecranului), Z reprezintă înălțimea deasupra planului. Elevation se exprimă în dp (pixeli independenți de densitate) și determină două efecte vizuale: umbra (shadow) care devine mai mare și mai estompată pe măsură ce elevation crește, și ordinea de desenare (elementele cu elevation mai mare se desenează deasupra elementelor cu elevation mai mică).

Metafora fizică: imaginați-vă foi de hârtie pe o masă. Cu cât teancul este mai înalt, cu atât umbra de pe foaia de sus este mai lungă. Elevation în Material Design funcționează exact la fel: fiecare element este o „foaie digitală" la o anumită înălțime. Când utilizatorul interacționează cu un element (apasă un buton, ridică un card), elevation crește temporar — aceasta se numește „elevație la interacțiune" (interaction elevation).

Conform Material Design Guidelines (Google, 2026), utilizarea corectă a elevation îmbunătățește scanabilitatea interfeței cu 35%: utilizatorii găsesc mai repede elementele interactive deoarece acestea „ies în evidență" deasupra conținutului plat. Cu toate acestea, un număr excesiv de niveluri de elevation (mai mult de 4) reduce acest efect: dacă toate elementele plutesc, niciunul nu pare important.

Elevation în Android: proprietăți și API

În Android elevation este implementată ca o proprietate încorporată View începând cu API 21 (Android 5.0 Lollipop). View.elevation setează înălțimea de bază în pixeli (px), iar View.translationZ — o deplasare suplimentară pentru animații (de exemplu, la apăsare). Înălțimea vizuală totală = elevation + translationZ. Ambele proprietăți suportă animația prin ViewPropertyAnimator sau 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="Buton cu elevație" />

StateListAnimator — o resursă XML pentru animația elevation și translationZ în funcție de starea View (pressed, focused, enabled). De exemplu, la apăsarea unui buton, elevation poate crește de la 2 dp la 8 dp, creând un efect de ridicare. StateListAnimator suportă animația prin ObjectAnimator pentru orice proprietăți View.

// Kotlin: configurarea programatică a elevation
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // înălțimea de bază în px

// Animația elevation la apăsare
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — componenta cheie pentru desenarea corectă a umbrei de la elevation. În mod implicit, Android folosește ViewOutlineProvider.BACKGROUND, care creează un contur pe baza drawable-ului de fundal. Pentru View cu colțuri rotunjite (prin shape drawable) trebuie setat un OutlineProvider personalizat, altfel umbra va fi dreptunghiulară. Componentele Material (CardView, MaterialButton) gestionează OutlineProvider automat.

Niveluri de elevation în Material Design 3

Material Design 3 (Material You) a revizuit sistemul de elevation în comparație cu Material Design 2. În loc de 12 niveluri fixe (Material 2), M3 oferă 5 tonuri de bază (tones), fiecare corespunzând unui anumit nivel de elevation. În plus, M3 introduce conceptul de „umbră colorată" (color shadow) pe Android 12+: umbra poate fi colorată în culoarea de accent a temei, în loc să fie neagru-gri.

Interaction elevation — creșterea temporară a elevation la interacțiunea utilizatorului cu elementul. În Material Design 3, elementele interactive (butoane, carduri) primesc +1–2 dp la elevation de bază la apăsare (pressed state) sau focalizare (focused state). Pentru FloatingActionButton, interaction elevation este de +6 dp. Animația de tranziție între stări ar trebui să dureze 150–200 ms pentru un răspuns tactil natural.

Elevation în Jetpack Compose

Jetpack Compose suportă elevation prin componentele Card și Surface, care au un parametru elevation încorporat. Spre deosebire de View System, Compose desenează umbrele prin propriul motor de randare, ceea ce asigură un comportament identic pe toate versiunile de Android (API 21+). Modifier.shadow() — un modificator de nivel scăzut pentru adăugarea de umbre la orice composable.

// Jetpack Compose: elevation prin 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("Card gestionat de elevation")
}

// Modifier.shadow pentru forme personalizate
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* acțiune */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Suprafață cu umbră") }

Animația elevation în Compose se realizează prin animateFloatAsState sau Animatable. La modificarea elevation, Compose animează automat umbra. Pentru elemente interactive, utilizați M3 InteractionSource în combinație cu animateElevation pentru ca elevation să reacționeze la apăsări, focalizare și glisare. Material 3 în Compose 1.2+ suportă color shadow — umbra colorată în culoarea primary Container a temei.

Elevation pe iOS: simularea înălțimii

Pe iOS nu există un analog încorporat al elevation din Material Design. Human Interface Guidelines Apple nu utilizează coordonata Z pentru gestionarea umbrelor — în schimb, dezvoltatorii configurează umbrele manual prin CALayer.shadow*. Cu toate acestea, conceptul de ierarhie vizuală prin umbre și profunzime există și în iOS: prezentările modale, UIAlertController, UIPopoverPresentationController — toate folosesc umbre pentru a se separa de fundal.

Pentru simularea elevation pe iOS, dezvoltatorii folosesc o combinație de shadowOpacity + shadowRadius + shadowOffset. Cu cât „înălțimea" necesară este mai mare, cu atât raza de estompare și deplasarea umbrei sunt mai mari. În SwiftUI, umbrele se setează prin modificatorul .shadow() cu parametri. Pentru un comportament asemănător Material pe iOS, există biblioteci Material Components for iOS (MDC) de la Google.

// iOS: simularea elevation prin 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
    }
}

// Utilizare
cardView.applyElevation(level: 3)  // echivalentul a 6 dp

Material Components for iOS (MDC-iOS) — biblioteca Google care portă Material Design elevation pe iOS. MDC-iOS oferă clasa MDCShadowElevation cu valori predefinite, MDCShadowLayer pentru desenarea umbrei și MDCCard pentru carduri Material cu elevation corectă. MDC-iOS suportă animația elevation la apăsare prin stateful shadow properties.