Elevation — mga batayan, anino at Z-coordinate sa Android

Ano ang elevation?

Elevation — ay isang sukatan na ipinakilala sa Material Design (Google I/O 2014) na naglalarawan sa posisyon ng elemento sa kahabaan ng Z-axis. Hindi tulad ng X at Y (dalawang-dimensional na eroplano ng screen), ang Z ay ang taas sa itaas ng eroplano. Ang elevation ay ipinapahayag sa dp (density-independent pixels) at tumutukoy sa dalawang visual na epekto: anino (shadow) na nagiging mas malaki at mas malabo habang tumataas ang elevation, at pagkakasunud-sunod ng pagguhit (mga elemento na may mas mataas na elevation ay iginuhit sa itaas ng mga elemento na may mas mababang elevation).

Pisikal na metapora: isipin ang mga piraso ng papel sa isang mesa. Kung mas mataas ang tumpok, mas mahaba ang anino mula sa pinakamataas na piraso. Elevation sa Material Design ay gumagana nang eksaktong pareho: bawat elemento ay isang „digital na piraso" sa isang tiyak na taas. Kapag ang gumagamit ay nakikipag-ugnayan sa elemento (pumipindot ng buton, nag-angat ng card), ang elevation ay pansamantalang tumataas — ito ay tinatawag na „elevasyon sa interaksyon" (interaction elevation).

Ayon sa Material Design Guidelines (Google, 2026), ang tamang paggamit ng elevation ay nagpapabuti sa kakayahang i-scan ang interface ng 35%: mas mabilis na nahahanap ng mga gumagamit ang mga interactive na elemento dahil sila ay „lumalabas" sa itaas ng patag na nilalaman. Gayunpaman, ang labis na bilang ng mga antas ng elevation (higit sa 4) ay nagbabawas sa epektong ito: kung ang lahat ng elemento ay lumulutang, wala ni isa ang mukhang mahalaga.

Elevation sa Android: mga property at API

Sa Android ang elevation ay ipinatupad bilang isang built-in na property ng View mula API 21 (Android 5.0 Lollipop). Ang View.elevation ay nagtatakda ng batayang taas sa mga pixel (px), at View.translationZ — karagdagang paglilipat para sa mga animasyon (halimbawa, kapag pinindot). Kabuuang visual na taas = elevation + translationZ. Parehong property ay sumusuporta sa animasyon sa pamamagitan ng ViewPropertyAnimator o ObjectAnimator.

<!-- XML: elevation at 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 na may elevasyon" />

StateListAnimator — isang XML na mapagkukunan para sa pag-animate ng elevation at translationZ depende sa estado ng View (pressed, focused, enabled). Halimbawa, kapag pinindot ang isang buton, ang elevation ay maaaring tumaas mula 2 dp hanggang 8 dp, na lumilikha ng epekto ng pag-angat. Ang StateListAnimator ay sumusuporta sa animasyon sa pamamagitan ng ObjectAnimator para sa anumang mga property ng View.

// Kotlin: programatikong pagsasaayos ng elevation
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // batayang taas sa px

// Animasyon ng elevation kapag pinindot
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — pangunahing bahagi para sa tamang pagguhit ng anino mula sa elevation. Bilang default, ang Android ay gumagamit ng ViewOutlineProvider.BACKGROUND, na lumilikha ng contour batay sa background drawable. Para sa View na may bilugan na mga sulok (sa pamamagitan ng shape drawable) kailangan magtakda ng custom na OutlineProvider, kung hindi ang anino ay magiging parihaba. Ang mga bahagi ng Material (CardView, MaterialButton) ay awtomatikong namamahala ng OutlineProvider.

Mga antas ng elevation sa Material Design 3

Material Design 3 (Material You) ay binago ang sistema ng elevation kumpara sa Material Design 2. Sa halip na 12 nakapirming antas (Material 2) ang M3 ay nag-aalok ng 5 pangunahing tono (tones), na bawat isa ay tumutugma sa isang tiyak na antas ng elevation. Bilang karagdagan, ang M3 ay nagpapakilala ng konsepto ng „may kulay na anino" (color shadow) sa Android 12+: ang anino ay maaaring kulayan sa accent na kulay ng tema, sa halip na itim-kulay-abo.

Interaction elevation — pansamantalang pagtaas ng elevation sa pakikipag-ugnayan ng gumagamit sa elemento. Sa Material Design 3, ang mga interactive na elemento (mga buton, card) ay nakakakuha ng +1–2 dp sa batayang elevation kapag pinindot (pressed state) o nakatutok (focused state). Para sa FloatingActionButton, ang interaction elevation ay +6 dp. Ang animasyon ng paglipat sa pagitan ng mga estado ay dapat tumagal ng 150–200 ms para sa natural na tactile na tugon.

Elevation sa Jetpack Compose

Jetpack Compose ay sumusuporta sa elevation sa pamamagitan ng mga bahagi ng Card at Surface, na may built-in na parameter ng elevation. Hindi tulad ng View System, ang Compose ay gumuhit ng mga anino sa pamamagitan ng sarili nitong render engine, na tinitiyak ang parehong pag-uugali sa lahat ng bersyon ng Android (API 21+). Modifier.shadow() — isang mababang antas na modifier para sa pagdaragdag ng anino sa anumang composable.

// Jetpack Compose: elevation sa pamamagitan ng Surface at 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("Card na pinamamahalaan ng elevation")
}

// Modifier.shadow para sa mga custom na hugis
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* aksyon */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Ibabaw na may anino") }

Animasyon ng elevation sa Compose ay ipinatupad sa pamamagitan ng animateFloatAsState o Animatable. Kapag nagbago ang elevation, awtomatikong ina-animate ng Compose ang anino. Para sa mga interactive na elemento, gamitin ang M3 InteractionSource kasama ng animateElevation upang ang elevation ay tumugon sa mga pindot, focus, at pag-drag. Ang Material 3 sa Compose 1.2+ ay sumusuporta sa color shadow — anino na may kulay ng primary Container ng tema.

Elevation sa iOS: pagsasabay ng taas

Sa iOS walang built-in na analog ng elevation mula sa Material Design. Ang Human Interface Guidelines ng Apple ay hindi gumagamit ng Z-coordinate para sa pamamahala ng mga anino — sa halip, ang mga developer ay nagko-configure ng mga anino nang manu-mano sa pamamagitan ng CALayer.shadow*. Gayunpaman, ang konsepto ng visual na hierarchy sa pamamagitan ng mga anino at lalim ay umiiral din sa iOS: mga modal presentation, UIAlertController, UIPopoverPresentationController — lahat sila ay gumagamit ng mga anino para sa paghihiwalay mula sa background.

Para sa pagsasabay ng elevation sa iOS, ang mga developer ay gumagamit ng kombinasyon ng shadowOpacity + shadowRadius + shadowOffset. Kung mas mataas ang kinakailangang „taas", mas malaki ang radius ng paglabo at paglilipat ng anino. Sa SwiftUI, ang mga anino ay itinatakda sa pamamagitan ng modifier na .shadow() na may mga parameter. Para sa pag-uugaling tulad ng Material sa iOS, may mga library na Material Components for iOS (MDC) mula sa Google.

// iOS: pagsasabay ng elevation sa pamamagitan ng 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
    }
}

// Paggamit
cardView.applyElevation(level: 3)  // katumbas ng 6 dp

Material Components for iOS (MDC-iOS) — library ng Google na nagpo-port ng Material Design elevation sa iOS. Ang MDC-iOS ay nagbibigay ng klase na MDCShadowElevation na may mga paunang natukoy na halaga, MDCShadowLayer para sa pagguhit ng anino, at MDCCard para sa mga Material card na may tamang elevation. Ang MDC-iOS ay sumusuporta sa animasyon ng elevation kapag pinindot sa pamamagitan ng stateful shadow properties.