Elevation — conceptos básicos, sombras y coordenada Z en Android

¿Qué es elevation?

Elevation es una métrica introducida en Material Design (Google I/O 2014) que describe la posición de un elemento a lo largo del eje z. A diferencia de x e y (el plano bidimensional de la pantalla), z es la altura sobre el plano. Elevation se expresa en dp (píxeles independientes de densidad) y determina dos efectos visuales: la sombra, que se vuelve más grande y borrosa a medida que aumenta la elevation, y el orden de dibujo (los elementos con mayor elevation se dibujan sobre los de menor elevation).

Metáfora física: imagine hojas de papel sobre una mesa. Cuanto más alta sea la pila, más larga será la sombra de la hoja superior. Elevation en Material Design funciona exactamente igual: cada elemento es una “hoja digital” a una altura determinada. Cuando un usuario interactúa con un elemento (presiona un botón, levanta una tarjeta), la elevation aumenta temporalmente — esto se llama “elevación de interacción.”

Según las Material Design Guidelines (Google, 2026), el uso adecuado de elevation mejora la escaneabilidad de la interfaz en un 35%: los usuarios encuentran los elementos interactivos más rápido porque “sobresalen” del contenido plano. Sin embargo, una cantidad excesiva de niveles de elevation (más de 4) reduce este efecto — si todo flota, nada parece importante.

Elevation en Android: propiedades y API

En Android, elevation está implementada como una propiedad integrada de View desde API 21 (Android 5.0 Lollipop). View.elevation establece la altura base en píxeles (px), y View.translationZ proporciona un desplazamiento adicional para animaciones (por ejemplo, al presionar). La altura visual total = elevation + translationZ. Ambas propiedades admiten animación mediante ViewPropertyAnimator u ObjectAnimator.

<!-- XML: elevation y 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ón con elevación" />

StateListAnimator — un recurso XML para animar elevation y translationZ según el estado de la View (presionado, enfocado, habilitado). Por ejemplo, al presionar un botón, la elevation puede aumentar de 2 dp a 8 dp, creando un efecto de elevación. StateListAnimator admite animación mediante ObjectAnimator para cualquier propiedad de View.

// Kotlin: configuración programática de elevation
import android.animation.ObjectAnimator
import android.view.View

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

// Animación de elevation al presionar
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — un componente clave para el renderizado correcto de la sombra de elevation. De forma predeterminada, Android usa ViewOutlineProvider.BACKGROUND, que crea un contorno basado en el drawable de fondo. Para Views con esquinas redondeadas (mediante shape drawable), se debe establecer un OutlineProvider personalizado; de lo contrario, la sombra será rectangular. Los componentes Material (CardView, MaterialButton) gestionan OutlineProvider automáticamente.

Niveles de elevation en Material Design 3

Material Design 3 (Material You) revisó el sistema de elevation en comparación con Material Design 2. En lugar de 12 niveles fijos (Material 2), M3 ofrece 5 tonos básicos, cada uno correspondiente a un nivel de elevation específico. Además, M3 introduce el concepto de “sombra de color” en Android 12+: la sombra puede teñirse con el color de acento del tema en lugar de ser negro-grisácea.

Elevación de interacción — un aumento temporal de la elevation durante la interacción del usuario con un elemento. En Material Design 3, los elementos interactivos (botones, tarjetas) ganan +1–2 dp a su elevation base al presionarlos (estado pressed) o al enfocarlos (estado focused). Para FloatingActionButton, la elevación de interacción es de +6 dp. La animación de transición entre estados debe durar entre 150 y 200 ms para una respuesta táctil natural.

Elevation en Jetpack Compose

Jetpack Compose admite elevation mediante los componentes Card y Surface, que tienen un parámetro de elevation integrado. A diferencia del sistema View, Compose renderiza las sombras a través de su propio motor de renderizado, lo que garantiza un comportamiento consistente en todas las versiones de Android (API 21+). Modifier.shadow() es un modificador de bajo nivel para agregar sombras a cualquier composable.

// Jetpack Compose: elevation mediante Surface y 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("Tarjeta controlada por elevation")
}

// Modifier.shadow para formas personalizadas
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* acción */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Superficie con sombra") }

Animación de elevation en Compose se implementa mediante animateFloatAsState o Animatable. Cuando cambia la elevation, Compose anima automáticamente la sombra. Para elementos interactivos, use M3 InteractionSource en combinación con animateElevation para que la elevation responda a presiones, enfoque y arrastre. Material 3 en Compose 1.2+ admite sombra de color — una sombra teñida con el color primary Container del tema.

Elevation en iOS: simulación de altura

En iOS, no existe un análogo integrado de elevation de Material Design. Las Human Interface Guidelines de Apple no utilizan coordenadas z para gestionar sombras — en su lugar, los desarrolladores configuran las sombras manualmente mediante CALayer.shadow*. Sin embargo, el concepto de jerarquía visual mediante sombras y profundidad también existe en iOS: las presentaciones modales, UIAlertController, UIPopoverPresentationController — todos usan sombras para separarse del fondo.

Para simular elevation en iOS, los desarrolladores utilizan una combinación de shadowOpacity + shadowRadius + shadowOffset. Cuanto mayor sea la “altura” requerida, mayor será el radio de desenfoque y el desplazamiento de la sombra. En SwiftUI, las sombras se configuran mediante el modificador .shadow() con parámetros. Para un comportamiento similar a Material en iOS, existen bibliotecas como Material Components for iOS (MDC) de Google.

// iOS: simulación de elevation mediante 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) — una biblioteca de Google que traslada la elevation de Material Design a iOS. MDC-iOS proporciona la clase MDCShadowElevation con valores predefinidos, MDCShadowLayer para el renderizado de sombras y MDCCard para tarjetas Material con elevation adecuada. MDC-iOS admite animación de elevation al presionar mediante propiedades de sombra con estado.