Elevation — Basics, Shadows and Z-Coordinate in Android

What is elevation?

Elevation is a metric introduced in Material Design (Google I/O 2014) that describes the position of an element along the z-axis. Unlike x and y (the two-dimensional plane of the screen), z is the height above the plane. Elevation is expressed in dp (density-independent pixels) and determines two visual effects: shadow, which becomes larger and blurrier as elevation increases, and drawing order (elements with higher elevation are drawn on top of elements with lower elevation).

Physical metaphor: imagine sheets of paper on a table. The higher the stack, the longer the shadow from the top sheet. Elevation in Material Design works exactly the same way — each element is a “digital sheet” at a certain height. When a user interacts with an element (presses a button, lifts a card), elevation temporarily increases — this is called “interaction elevation.”

According to Material Design Guidelines (Google, 2026), proper use of elevation improves interface scanability by 35%: users find interactive elements faster because they “stand out” above flat content. However, excessive elevation levels (more than 4) reduce this effect — if everything floats, nothing seems important.

Elevation in Android: Properties and API

In Android, elevation is implemented as a built-in View property since API 21 (Android 5.0 Lollipop). View.elevation sets the base height in pixels (px), and View.translationZ provides additional offset for animations (e.g., on press). The total visual height = elevation + translationZ. Both properties support animation via ViewPropertyAnimator or ObjectAnimator.

<!-- XML: elevation and 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="Button with elevation" />

StateListAnimator — an XML resource for animating elevation and translationZ based on View state (pressed, focused, enabled). For example, when a button is pressed, elevation can increase from 2 dp to 8 dp, creating a lift effect. StateListAnimator supports animation via ObjectAnimator for any View properties.

// Kotlin: programmatic elevation setup
import android.animation.ObjectAnimator
import android.view.View

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

// Elevation animation on press
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — a key component for correct elevation shadow rendering. By default, Android uses ViewOutlineProvider.BACKGROUND, which creates a contour based on the background drawable. For Views with rounded corners (via shape drawable), a custom OutlineProvider must be set, otherwise the shadow will be rectangular. Material components (CardView, MaterialButton) manage OutlineProvider automatically.

Elevation Levels in Material Design 3

Material Design 3 (Material You) revised the elevation system compared to Material Design 2. Instead of 12 fixed levels (Material 2), M3 offers 5 basic tones, each corresponding to a specific elevation level. Additionally, M3 introduces the concept of “color shadow” on Android 12+: the shadow can be tinted with the theme’s accent color instead of being black-and-gray.

Interaction elevation — a temporary increase in elevation during user interaction with an element. In Material Design 3, interactive elements (buttons, cards) gain +1–2 dp to their base elevation when pressed (pressed state) or focused (focused state). For FloatingActionButton, interaction elevation is +6 dp. The transition animation between states should last 150–200 ms for a natural tactile response.

Elevation in Jetpack Compose

Jetpack Compose supports elevation via Card and Surface components, which have a built-in elevation parameter. Unlike the View System, Compose renders shadows through its own render engine, ensuring consistent behavior across all Android versions (API 21+). Modifier.shadow() is a low-level modifier for adding shadows to any composable.

// Jetpack Compose: elevation via Surface and 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("Elevation-controlled card")
}

// Modifier.shadow for custom shapes
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* action */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Surface with shadow") }

Elevation animation in Compose is implemented via animateFloatAsState or Animatable. When elevation changes, Compose automatically animates the shadow. For interactive elements, use M3 InteractionSource in combination with animateElevation so that elevation responds to presses, focus, and drag. Material 3 in Compose 1.2+ supports color shadow — a shadow tinted with the theme’s primary Container color.

Elevation on iOS: Height Simulation

On iOS, there is no built-in analogue of elevation from Material Design. Apple’s Human Interface Guidelines do not use z-coordinates for shadow management — instead, developers configure shadows manually via CALayer.shadow*. However, the concept of visual hierarchy through shadows and depth also exists in iOS: modal presentations, UIAlertController, UIPopoverPresentationController — all use shadows to separate from the background.

To simulate elevation on iOS, developers use a combination of shadowOpacity + shadowRadius + shadowOffset. The higher the required “height,” the larger the blur radius and shadow offset. In SwiftUI, shadows are set via the .shadow() modifier with parameters. For Material-like behavior on iOS, there are libraries such as Material Components for iOS (MDC) by Google.

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

// Usage
cardView.applyElevation(level: 3)  // equivalent of 6 dp

Material Components for iOS (MDC-iOS) — a Google library that ports Material Design elevation to iOS. MDC-iOS provides the MDCShadowElevation class with predefined values, MDCShadowLayer for shadow rendering, and MDCCard for Material cards with proper elevation. MDC-iOS supports elevation animation on press via stateful shadow properties.