Elevation — основе, сенке и Z-координата у Android-у

Шта је elevation?

Elevation — је метрика уведена у Material Design (Google I/O 2014) која описује положај елемента дуж Z-осе. За разлику од X и Y (дводимензионална раван екрана), Z представља висину изнад равни. Elevation се изражава у dp (density-independent pixels) и одређује два визуелна ефекта: сенку (shadow) која постаје већа и замућенија са порастом 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 основних тонова (tones), од којих сваки одговара одређеном нивоу 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 ms за природан тактилни одговор.

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.