Elevation — basi, ombre e coordinata Z in Android

Cos'è elevation?

Elevation è una metrica introdotta in Material Design (Google I/O 2014) che descrive la posizione di un elemento lungo l'asse z. A differenza di x e y (il piano bidimensionale dello schermo), z è l'altezza sopra il piano. L'elevation è espressa in dp (pixel indipendenti dalla densità) e determina due effetti visivi: l'ombra, che diventa più grande e sfocata all'aumentare dell'elevation, e l'ordine di disegno (gli elementi con elevation maggiore vengono disegnati sopra quelli con elevation minore).

Metafora fisica: immaginate fogli di carta su un tavolo. Più alta è la pila, più lunga è l'ombra del foglio superiore. Elevation in Material Design funziona esattamente allo stesso modo — ogni elemento è un “foglio digitale” a una determinata altezza. Quando un utente interagisce con un elemento (preme un pulsante, solleva una scheda), l'elevation aumenta temporaneamente — questo si chiama “elevation di interazione.”

Secondo le Material Design Guidelines (Google, 2026), l'uso corretto dell'elevation migliora la scansione dell'interfaccia del 35%: gli utenti trovano più velocemente gli elementi interattivi perché “sporgono” sopra il contenuto piatto. Tuttavia, un numero eccessivo di livelli di elevation (più di 4) riduce questo effetto — se tutto galleggia, nulla sembra importante.

Elevation in Android: proprietà e API

In Android, l'elevation è implementata come proprietà integrata di View dall'API 21 (Android 5.0 Lollipop). View.elevation imposta l'altezza base in pixel (px), e View.translationZ fornisce un offset aggiuntivo per le animazioni (ad esempio, alla pressione). L'altezza visiva totale = elevation + translationZ. Entrambe le proprietà supportano l'animazione tramite ViewPropertyAnimator o ObjectAnimator.

<!-- XML: elevation e 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="Pulsante con elevation" />

StateListAnimator — una risorsa XML per animare elevation e translationZ in base allo stato della View (premuto, focalizzato, abilitato). Ad esempio, quando si preme un pulsante, l'elevation può aumentare da 2 dp a 8 dp, creando un effetto di sollevamento. StateListAnimator supporta l'animazione tramite ObjectAnimator per qualsiasi proprietà della View.

// Kotlin: configurazione programmatica di elevation
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // altezza base in px

// Animazione di elevation alla pressione
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — un componente chiave per il corretto rendering dell'ombra di elevation. Per impostazione predefinita, Android utilizza ViewOutlineProvider.BACKGROUND, che crea un contorno basato sul drawable di sfondo. Per le Views con angoli arrotondati (tramite shape drawable), è necessario impostare un OutlineProvider personalizzato, altrimenti l'ombra sarà rettangolare. I componenti Material (CardView, MaterialButton) gestiscono OutlineProvider automaticamente.

Livelli di elevation in Material Design 3

Material Design 3 (Material You) ha rivisto il sistema di elevation rispetto a Material Design 2. Invece di 12 livelli fissi (Material 2), M3 offre 5 toni base, ciascuno corrispondente a un livello di elevation specifico. Inoltre, M3 introduce il concetto di “ombra colorata” su Android 12+: l'ombra può essere tinta con il colore di accento del tema invece di essere nero-grigia.

Elevation di interazione — un aumento temporaneo dell'elevation durante l'interazione dell'utente con un elemento. In Material Design 3, gli elementi interattivi (pulsanti, schede) guadagnano +1–2 dp alla loro elevation base quando premuti (stato pressed) o focalizzati (stato focused). Per FloatingActionButton, l'elevation di interazione è di +6 dp. L'animazione di transizione tra gli stati dovrebbe durare 150–200 ms per un feedback tattile naturale.

Elevation in Jetpack Compose

Jetpack Compose supporta l'elevation tramite i componenti Card e Surface, che hanno un parametro di elevation integrato. A differenza del sistema View, Compose renderizza le ombre attraverso il proprio motore di rendering, garantendo un comportamento coerente su tutte le versioni di Android (API 21+). Modifier.shadow() è un modificatore di basso livello per aggiungere ombre a qualsiasi composable.

// Jetpack Compose: elevation tramite Surface e 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("Scheda controllata da elevation")
}

// Modifier.shadow per forme personalizzate
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* azione */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Superficie con ombra") }

Animazione di elevation in Compose è implementata tramite animateFloatAsState o Animatable. Quando l'elevation cambia, Compose anima automaticamente l'ombra. Per gli elementi interattivi, utilizzare M3 InteractionSource in combinazione con animateElevation in modo che l'elevation risponda a pressioni, focus e trascinamento. Material 3 in Compose 1.2+ supporta l'ombra colorata — un'ombra tinta con il colore primary Container del tema.

Elevation su iOS: simulazione dell'altezza

Su iOS, non esiste un analogo integrato di elevation da Material Design. Le Human Interface Guidelines di Apple non utilizzano coordinate z per la gestione delle ombre — invece, gli sviluppatori configurano le ombre manualmente tramite CALayer.shadow*. Tuttavia, il concetto di gerarchia visiva attraverso ombre e profondità esiste anche su iOS: presentazioni modali, UIAlertController, UIPopoverPresentationController — tutti utilizzano ombre per separarsi dallo sfondo.

Per simulare elevation su iOS, gli sviluppatori utilizzano una combinazione di shadowOpacity + shadowRadius + shadowOffset. Maggiore è l'“altezza” richiesta, maggiore è il raggio di sfocatura e l'offset dell'ombra. In SwiftUI, le ombre vengono impostate tramite il modificatore .shadow() con parametri. Per un comportamento simile a Material su iOS, esistono librerie come Material Components for iOS (MDC) di Google.

// iOS: simulazione di elevation tramite 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
    }
}

// Utilizzo
cardView.applyElevation(level: 3)  // equivalente a 6 dp

Material Components for iOS (MDC-iOS) — una libreria Google che porta l'elevation di Material Design su iOS. MDC-iOS fornisce la classe MDCShadowElevation con valori predefiniti, MDCShadowLayer per il rendering delle ombre e MDCCard per schede Material con elevation corretta. MDC-iOS supporta l'animazione di elevation alla pressione tramite proprietà di ombra con stato.