Elevation — conceitos básicos, sombras e coordenada Z no Android

O que é elevation?

Elevation é uma métrica introduzida no Material Design (Google I/O 2014) que descreve a posição de um elemento ao longo do eixo z. Ao contrário de x e y (o plano bidimensional da tela), z é a altura acima do plano. Elevation é expressa em dp (pixels independentes de densidade) e determina dois efeitos visuais: a sombra, que se torna maior e mais desfocada à medida que a elevation aumenta, e a ordem de desenho (elementos com elevation maior são desenhados sobre elementos com elevation menor).

Metáfora física: imagine folhas de papel sobre uma mesa. Quanto mais alta a pilha, mais longa a sombra da folha superior. Elevation no Material Design funciona exatamente da mesma forma — cada elemento é uma “folha digital” a uma determinada altura. Quando um usuário interage com um elemento (pressiona um botão, levanta um cartão), a elevation aumenta temporariamente — isso é chamado de “elevação de interação.”

De acordo com as Material Design Guidelines (Google, 2026), o uso adequado de elevation melhora a escaneabilidade da interface em 35%: os usuários encontram elementos interativos mais rapidamente porque eles “destacam” acima do conteúdo plano. No entanto, uma quantidade excessiva de níveis de elevation (mais de 4) reduz esse efeito — se tudo flutua, nada parece importante.

Elevation no Android: propriedades e API

No Android, elevation é implementada como uma propriedade integrada da View desde a API 21 (Android 5.0 Lollipop). View.elevation define a altura base em pixels (px), e View.translationZ fornece um deslocamento adicional para animações (por exemplo, ao pressionar). A altura visual total = elevation + translationZ. Ambas as propriedades suportam animação via ViewPropertyAnimator ou 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="Botão com elevação" />

StateListAnimator — um recurso XML para animar elevation e translationZ com base no estado da View (pressionado, focado, habilitado). Por exemplo, ao pressionar um botão, a elevation pode aumentar de 2 dp para 8 dp, criando um efeito de elevação. StateListAnimator suporta animação via ObjectAnimator para qualquer propriedade da View.

// Kotlin: configuração programática de elevation
import android.animation.ObjectAnimator
import android.view.View

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

// Animação de elevation ao pressionar
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — um componente chave para a renderização correta da sombra de elevation. Por padrão, o Android usa ViewOutlineProvider.BACKGROUND, que cria um contorno com base no drawable de fundo. Para Views com cantos arredondados (via shape drawable), um OutlineProvider personalizado deve ser definido, caso contrário a sombra será retangular. Os componentes Material (CardView, MaterialButton) gerenciam o OutlineProvider automaticamente.

Níveis de elevation no Material Design 3

Material Design 3 (Material You) revisou o sistema de elevation em comparação com o Material Design 2. Em vez de 12 níveis fixos (Material 2), o M3 oferece 5 tons básicos, cada um correspondendo a um nível de elevation específico. Além disso, o M3 introduz o conceito de “sombra colorida” no Android 12+: a sombra pode ser tingida com a cor de destaque do tema em vez de ser preto-e-cinza.

Elevação de interação — um aumento temporário na elevation durante a interação do usuário com um elemento. No Material Design 3, elementos interativos (botões, cartões) ganham +1–2 dp à sua elevation base quando pressionados (estado pressed) ou focados (estado focused). Para FloatingActionButton, a elevação de interação é de +6 dp. A animação de transição entre estados deve durar de 150 a 200 ms para uma resposta tátil natural.

Elevation no Jetpack Compose

Jetpack Compose suporta elevation através dos componentes Card e Surface, que possuem um parâmetro de elevation integrado. Ao contrário do sistema View, o Compose renderiza sombras através de seu próprio motor de renderização, garantindo comportamento consistente em todas as versões do Android (API 21+). Modifier.shadow() é um modificador de baixo nível para adicionar sombras a qualquer composable.

// Jetpack Compose: elevation através de 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("Cartão controlado por elevation")
}

// Modifier.shadow para formas personalizadas
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* ação */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Superfície com sombra") }

Animação de elevation no Compose é implementada via animateFloatAsState ou Animatable. Quando a elevation muda, o Compose anima automaticamente a sombra. Para elementos interativos, use M3 InteractionSource em combinação com animateElevation para que a elevation responda a pressionamentos, foco e arrasto. Material 3 no Compose 1.2+ suporta sombra colorida — uma sombra tingida com a cor primary Container do tema.

Elevation no iOS: simulação de altura

No iOS, não existe um análogo integrado de elevation do Material Design. As Human Interface Guidelines da Apple não usam coordenadas z para gerenciamento de sombras — em vez disso, os desenvolvedores configuram as sombras manualmente via CALayer.shadow*. No entanto, o conceito de hierarquia visual através de sombras e profundidade também existe no iOS: apresentações modais, UIAlertController, UIPopoverPresentationController — todos usam sombras para se separar do fundo.

Para simular elevation no iOS, os desenvolvedores usam uma combinação de shadowOpacity + shadowRadius + shadowOffset. Quanto maior a “altura” necessária, maior o raio de desfoque e o deslocamento da sombra. No SwiftUI, as sombras são definidas através do modificador .shadow() com parâmetros. Para comportamento semelhante ao Material no iOS, existem bibliotecas como Material Components for iOS (MDC) do Google.

// iOS: simulação de elevation através de 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
    }
}

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

Material Components for iOS (MDC-iOS) — uma biblioteca do Google que porta a elevation do Material Design para o iOS. O MDC-iOS fornece a classe MDCShadowElevation com valores predefinidos, MDCShadowLayer para renderização de sombras e MDCCard para cartões Material com elevation adequada. O MDC-iOS suporta animação de elevation ao pressionar através de propriedades de sombra com estado.