Elevation — khái niệm cơ bản, đổ bóng và tọa độ Z trong Android

Elevation là gì?

Elevation là một số liệu được giới thiệu trong Material Design (Google I/O 2014) mô tả vị trí của phần tử dọc theo trục z. Không giống như x và y (mặt phẳng hai chiều của màn hình), z là chiều cao phía trên mặt phẳng. Elevation được biểu thị bằng dp (pixel độc lập mật độ) và xác định hai hiệu ứng trực quan: bóng, trở nên lớn hơn và mờ hơn khi elevation tăng và thứ tự vẽ (các phần tử có elevation cao hơn được vẽ lên trên các phần tử có elevation thấp hơn).

Phép ẩn dụ vật lý: hãy tưởng tượng những tờ giấy trên bàn. Chồng giấy càng cao, bóng của tờ trên cùng càng dài. Elevation trong Material Design hoạt động giống hệt như vậy — mỗi phần tử là một “tờ giấy kỹ thuật số” ở một độ cao nhất định. Khi người dùng tương tác với phần tử (nhấn nút, nâng thẻ), elevation tăng tạm thời — điều này được gọi là “elevation tương tác.”

Theo Material Design Guidelines (Google, 2026), việc sử dụng elevation đúng cách cải thiện khả năng quét giao diện lên 35%: người dùng tìm thấy các phần tử tương tác nhanh hơn vì chúng “nổi bật” trên nội dung phẳng. Tuy nhiên, số lượng cấp độ elevation quá nhiều (hơn 4) làm giảm hiệu ứng này — nếu mọi thứ đều trôi nổi, không có gì có vẻ quan trọng.

Elevation trong Android: thuộc tính và API

Trong Android, elevation được triển khai như một thuộc tính View tích hợp từ API 21 (Android 5.0 Lollipop). View.elevation đặt chiều cao cơ sở bằng pixel (px), và View.translationZ cung cấp độ lệch bổ sung cho hoạt ảnh (ví dụ: khi nhấn). Tổng chiều cao trực quan = elevation + translationZ. Cả hai thuộc tính đều hỗ trợ hoạt ảnh qua ViewPropertyAnimator hoặc ObjectAnimator.

<!-- XML: elevation và 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="Nút có elevation" />

StateListAnimator — một tài nguyên XML để tạo hoạt ảnh cho elevation và translationZ dựa trên trạng thái View (được nhấn, được focus, được bật). Ví dụ: khi nhấn nút, elevation có thể tăng từ 2 dp lên 8 dp, tạo hiệu ứng nâng lên. StateListAnimator hỗ trợ hoạt ảnh qua ObjectAnimator cho bất kỳ thuộc tính View nào.

// Kotlin: thiết lập elevation theo chương trình
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // chiều cao cơ sở bằng px

// Hoạt ảnh elevation khi nhấn
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — một thành phần chính để hiển thị bóng elevation chính xác. Theo mặc định, Android sử dụng ViewOutlineProvider.BACKGROUND, tạo đường viền dựa trên drawable nền. Đối với Views có góc bo tròn (qua shape drawable), phải đặt OutlineProvider tùy chỉnh, nếu không bóng sẽ là hình chữ nhật. Các thành phần Material (CardView, MaterialButton) tự động quản lý OutlineProvider.

Cấp độ elevation trong Material Design 3

Material Design 3 (Material You) đã sửa đổi hệ thống elevation so với Material Design 2. Thay vì 12 cấp độ cố định (Material 2), M3 cung cấp 5 tông màu cơ bản, mỗi tông tương ứng với một cấp độ elevation cụ thể. Ngoài ra, M3 giới thiệu khái niệm “bóng màu” trên Android 12+: bóng có thể được tô màu bằng màu nhấn của chủ đề thay vì màu đen-xám.

Elevation tương tác — sự gia tăng tạm thời của elevation trong quá trình người dùng tương tác với phần tử. Trong Material Design 3, các phần tử tương tác (nút, thẻ) nhận thêm +1–2 dp vào elevation cơ sở khi được nhấn (trạng thái pressed) hoặc focus (trạng thái focused). Đối với FloatingActionButton, elevation tương tác là +6 dp. Hoạt ảnh chuyển tiếp giữa các trạng thái nên kéo dài 150–200 ms để có phản hồi xúc giác tự nhiên.

Elevation trong Jetpack Compose

Jetpack Compose hỗ trợ elevation thông qua các thành phần Card và Surface, có tham số elevation tích hợp. Không giống như Hệ thống View, Compose hiển thị bóng thông qua công cụ kết xuất của riêng nó, đảm bảo hành vi nhất quán trên tất cả các phiên bản Android (API 21+). Modifier.shadow() là một bổ ngữ cấp thấp để thêm bóng vào bất kỳ composable nào.

// Jetpack Compose: elevation qua Surface và 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("Thẻ được điều khiển bằng elevation")
}

// Modifier.shadow cho hình dạng tùy chỉnh
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* hành động */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Bề mặt có bóng") }

Hoạt ảnh elevation trong Compose được triển khai qua animateFloatAsState hoặc Animatable. Khi elevation thay đổi, Compose tự động tạo hoạt ảnh cho bóng. Đối với các phần tử tương tác, hãy sử dụng M3 InteractionSource kết hợp với animateElevation để elevation phản ứng với thao tác nhấn, focus và kéo. Material 3 trong Compose 1.2+ hỗ trợ bóng màu — bóng được tô màu bằng màu primary Container của chủ đề.

Elevation trên iOS: mô phỏng chiều cao

Trên iOS, không có đối tượng tương tự tích hợp cho elevation từ Material Design. Nguyên tắc Human Interface của Apple không sử dụng tọa độ z để quản lý bóng — thay vào đó, các nhà phát triển cấu hình bóng thủ công qua CALayer.shadow*. Tuy nhiên, khái niệm phân cấp trực quan thông qua bóng và độ sâu cũng tồn tại trên iOS: các bản trình bày phương thức, UIAlertController, UIPopoverPresentationController — tất cả đều sử dụng bóng để tách khỏi nền.

Để mô phỏng elevation trên iOS, các nhà phát triển sử dụng kết hợp shadowOpacity + shadowRadius + shadowOffset. “Chiều cao” yêu cầu càng cao, bán kính làm mờ và độ lệch bóng càng lớn. Trong SwiftUI, bóng được đặt thông qua bổ ngữ .shadow() với các tham số. Để có hành vi giống Material trên iOS, có các thư viện như Material Components for iOS (MDC) của Google.

// iOS: mô phỏng elevation qua 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
    }
}

// Cách sử dụng
cardView.applyElevation(level: 3)  // tương đương 6 dp

Material Components for iOS (MDC-iOS) — một thư viện của Google chuyển elevation của Material Design sang iOS. MDC-iOS cung cấp lớp MDCShadowElevation với các giá trị được xác định trước, MDCShadowLayer để hiển thị bóng và MDCCard cho thẻ Material với elevation chính xác. MDC-iOS hỗ trợ hoạt ảnh elevation khi nhấn thông qua các thuộc tính bóng có trạng thái.