Elevation — notions de base, ombres et coordonnée Z dans Android

Qu'est-ce que l'elevation ?

Elevation est une métrique introduite dans Material Design (Google I/O 2014) qui décrit la position d'un élément le long de l'axe z. Contrairement à x et y (le plan bidimensionnel de l'écran), z est la hauteur au-dessus du plan. L'elevation s'exprime en dp (pixels indépendants de la densité) et détermine deux effets visuels : l'ombre, qui devient plus grande et plus floue à mesure que l'elevation augmente, et l'ordre de dessin (les éléments avec une elevation plus élevée sont dessinés au-dessus des éléments avec une elevation plus faible).

Métaphore physique : imaginez des feuilles de papier sur une table. Plus la pile est haute, plus l'ombre de la feuille supérieure est longue. Elevation dans Material Design fonctionne exactement de la même manière — chaque élément est une « feuille numérique » à une hauteur déterminée. Lorsqu'un utilisateur interagit avec un élément (appuie sur un bouton, soulève une carte), l'elevation augmente temporairement — on appelle cela l'« elevation d'interaction. »

Selon les Material Design Guidelines (Google, 2026), une utilisation appropriée de l'elevation améliore la scannabilité de l'interface de 35 % : les utilisateurs trouvent plus rapidement les éléments interactifs car ils « se démarquent » du contenu plat. Cependant, un nombre excessif de niveaux d'elevation (plus de 4) réduit cet effet — si tout flotte, rien ne semble important.

Elevation dans Android : propriétés et API

Dans Android, l'elevation est implémentée comme une propriété intégrée de View depuis l'API 21 (Android 5.0 Lollipop). View.elevation définit la hauteur de base en pixels (px), et View.translationZ fournit un décalage supplémentaire pour les animations (par exemple, lors d'une pression). La hauteur visuelle totale = elevation + translationZ. Les deux propriétés prennent en charge l'animation via ViewPropertyAnimator ou ObjectAnimator.

<!-- XML : elevation et 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="Bouton avec elevation" />

StateListAnimator — une ressource XML pour animer l'elevation et translationZ en fonction de l'état de la View (pressé, focus, activé). Par exemple, lorsqu'un bouton est pressé, l'elevation peut passer de 2 dp à 8 dp, créant un effet de soulèvement. StateListAnimator prend en charge l'animation via ObjectAnimator pour toutes les propriétés de View.

// Kotlin : configuration programmatique de elevation
import android.animation.ObjectAnimator
import android.view.View

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

// Animation d'elevation lors de la pression
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — un composant clé pour le rendu correct de l'ombre d'elevation. Par défaut, Android utilise ViewOutlineProvider.BACKGROUND, qui crée un contour basé sur le drawable d'arrière-plan. Pour les Views avec des coins arrondis (via shape drawable), un OutlineProvider personnalisé doit être défini, sinon l'ombre sera rectangulaire. Les composants Material (CardView, MaterialButton) gèrent OutlineProvider automatiquement.

Niveaux d'elevation dans Material Design 3

Material Design 3 (Material You) a révisé le système d'elevation par rapport à Material Design 2. Au lieu de 12 niveaux fixes (Material 2), M3 propose 5 tons de base, chacun correspondant à un niveau d'elevation spécifique. De plus, M3 introduit le concept d'« ombre colorée » sur Android 12+ : l'ombre peut être teintée avec la couleur d'accentuation du thème au lieu d'être noir-gris.

Elevation d'interaction — une augmentation temporaire de l'elevation lors de l'interaction de l'utilisateur avec un élément. Dans Material Design 3, les éléments interactifs (boutons, cartes) gagnent +1–2 dp à leur elevation de base lorsqu'ils sont pressés (état pressed) ou focus (état focused). Pour FloatingActionButton, l'elevation d'interaction est de +6 dp. L'animation de transition entre les états doit durer 150–200 ms pour une réponse tactile naturelle.

Elevation dans Jetpack Compose

Jetpack Compose prend en charge l'elevation via les composants Card et Surface, qui disposent d'un paramètre d'elevation intégré. Contrairement au système View, Compose rend les ombres via son propre moteur de rendu, garantissant un comportement cohérent sur toutes les versions d'Android (API 21+). Modifier.shadow() est un modificateur de bas niveau pour ajouter des ombres à n'importe quel composable.

// Jetpack Compose : elevation via Surface et 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("Carte contrôlée par elevation")
}

// Modifier.shadow pour les formes personnalisées
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* action */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Surface avec ombre") }

Animation d'elevation dans Compose est implémentée via animateFloatAsState ou Animatable. Lorsque l'elevation change, Compose anime automatiquement l'ombre. Pour les éléments interactifs, utilisez M3 InteractionSource en combinaison avec animateElevation pour que l'elevation réponde aux pressions, au focus et au glissement. Material 3 dans Compose 1.2+ prend en charge l'ombre colorée — une ombre teintée avec la couleur primary Container du thème.

Elevation sur iOS : simulation de hauteur

Sur iOS, il n'existe pas d'analogue intégré de l'elevation de Material Design. Les Human Interface Guidelines d'Apple n'utilisent pas de coordonnées z pour la gestion des ombres — à la place, les développeurs configurent les ombres manuellement via CALayer.shadow*. Cependant, le concept de hiérarchie visuelle via les ombres et la profondeur existe également sur iOS : les présentations modales, UIAlertController, UIPopoverPresentationController — tous utilisent des ombres pour se détacher du fond.

Pour simuler l'elevation sur iOS, les développeurs utilisent une combinaison de shadowOpacity + shadowRadius + shadowOffset. Plus la « hauteur » requise est élevée, plus le rayon de flou et le décalage de l'ombre sont importants. Dans SwiftUI, les ombres sont définies via le modificateur .shadow() avec des paramètres. Pour un comportement similaire à Material sur iOS, il existe des bibliothèques comme Material Components for iOS (MDC) de Google.

// iOS : simulation d'elevation via 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
    }
}

// Utilisation
cardView.applyElevation(level: 3)  // équivalent à 6 dp

Material Components for iOS (MDC-iOS) — une bibliothèque Google qui porte l'elevation de Material Design sur iOS. MDC-iOS fournit la classe MDCShadowElevation avec des valeurs prédéfinies, MDCShadowLayer pour le rendu des ombres et MDCCard pour les cartes Material avec une elevation correcte. MDC-iOS prend en charge l'animation d'elevation lors de la pression via des propriétés d'ombre avec état.