Elevation — основи, тіні та z-координата в Android

Що таке elevation?

Elevation — це метрика, введена в Material Design (Google I/O 2014), яка описує положення елемента вздовж z-осі. На відміну від x та y (двовимірна площина екрана), z — це висота над площиною. Elevation виражається в dp (незалежних від щільності пікселях) і визначає два візуальні ефекти: тінь, яка стає більшою та розмитішою зі зростанням elevation, і порядок відображення (елементи з більшим elevation малюються поверх елементів із меншим elevation).

Фізична метафора: уявіть аркуші паперу на столі. Чим вища стопка, тим довша тінь від верхнього аркуша. Elevation в Material Design працює так само — кожен елемент це «цифровий аркуш» на певній висоті. Коли користувач взаємодіє з елементом (натискає кнопку, піднімає картку), elevation тимчасово збільшується — це називається «елевація при взаємодії» (interaction elevation).

За даними Material Design Guidelines (Google, 2026), правильне використання elevation покращує сканованість інтерфейсу на 35%: користувачі швидше знаходять інтерактивні елементи, тому що вони «виступають» над пласким контентом. Однак надмірна кількість рівнів elevation (більше 4) знижує цей ефект — якщо всі елементи плавають, жоден не здається важливим.

Elevation в Android: властивості та API

В Android elevation реалізована як вбудована властивість View починаючи з API 21 (Android 5.0 Lollipop). View.elevation задає базову висоту в пікселях (px), а View.translationZ — додаткове зміщення для анімацій (наприклад, при натисканні). Сумарна візуальна висота = elevation + translationZ. Обидві властивості підтримують анімацію через ViewPropertyAnimator або ObjectAnimator.

<!-- XML: elevation та 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="Кнопка з елевацією" />

StateListAnimator — XML-ресурс для анімації elevation та translationZ залежно від стану View (pressed, focused, enabled). Наприклад, при натисканні на кнопку elevation може збільшуватися з 2 dp до 8 dp, створюючи ефект підйому. StateListAnimator підтримує анімацію через ObjectAnimator для будь-яких властивостей View.

// Kotlin: програмне налаштування elevation
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // базова висота в px

// Анімація elevation при натисканні
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — ключовий компонент для правильного відображення тіні від elevation. За замовчуванням Android використовує ViewOutlineProvider.BACKGROUND, який створює контур на основі фонового drawable. Для View зі заокругленими кутами (через shape drawable) потрібно встановити кастомний OutlineProvider, інакше тінь буде прямокутною. Material-компоненти (CardView, MaterialButton) керують OutlineProvider автоматично.

Рівні elevation в Material Design 3

Material Design 3 (Material You) переглянув систему elevation порівняно з Material Design 2. Замість 12 фіксованих рівнів (Material 2) M3 пропонує 5 базових тонів, кожен з яких відповідає певному рівню elevation. Крім того, M3 вводить концепцію «кольорової тіні» (color shadow) на Android 12+: тінь може забарвлюватися в акцентний колір теми, а не бути чорно-сірою.

Interaction elevation — тимчасове збільшення elevation при взаємодії користувача з елементом. У Material Design 3 інтерактивні елементи (кнопки, картки) отримують +1–2 dp до базової elevation при натисканні (pressed state) або фокусуванні (focused state). Для FloatingActionButton interaction elevation становить +6 dp. Анімація переходу між станами повинна тривати 150–200 мс для природного тактильного відгуку.

Elevation в Jetpack Compose

Jetpack Compose підтримує elevation через компоненти Card та Surface, які мають вбудований параметр elevation. На відміну від View System, Compose відображає тіні через власний рендер-двигун, що забезпечує однакову поведінку на всіх версіях Android (API 21+). Modifier.shadow() — низькорівневий модифікатор для додавання тіні до будь-якого composable.

// Jetpack Compose: elevation через Surface та 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-керована картка")
}

// Modifier.shadow для кастомних форм
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* действие */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Поверхня з тінню") }

Анімація elevation в Compose реалізується через animateFloatAsState або Animatable. При зміні elevation Compose автоматично анімує тінь. Для інтерактивних елементів використовуйте M3 InteractionSource у комбінації з animateElevation, щоб elevation реагувала на натискання, фокус та перетягування. Material 3 в Compose 1.2+ підтримує color shadow — тінь, забарвлену в колір primary Container теми.

Elevation на iOS: симуляція висоти

На iOS немає вбудованого аналога elevation з Material Design. Human Interface Guidelines від Apple не використовують z-координату для керування тінями — натомість розробники налаштовують тіні вручну через CALayer.shadow*. Однак концепція візуальної ієрархії через тіні та глибину існує і в iOS: модальні презентації, UIAlertController, UIPopoverPresentationController — всі вони використовують тіні для відділення від фону.

Для симуляції elevation на iOS розробники використовують комбінацію shadowOpacity + shadowRadius + shadowOffset. Чим вища потрібна «висота», тим більший радіус розмиття та зміщення тіні. У SwiftUI тіні задаються через модифікатор .shadow() з параметрами. Для поведінки, подібної до Material на iOS, існують бібліотеки Material Components for iOS (MDC) від Google.

// iOS: симуляція elevation через 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
    }
}

// Використання
cardView.applyElevation(level: 3)  // еквівалент 6 dp

Material Components for iOS (MDC-iOS) — бібліотека Google, яка портує Material Design elevation на iOS. MDC-iOS надає клас MDCShadowElevation з попередньо визначеними значеннями, MDCShadowLayer для відображення тіні та MDCCard для Material-карток з правильною elevation. MDC-iOS підтримує анімацію elevation при натисканні через stateful shadow properties.