Cách lấy độ cao (elevation) của Status Bar/Action Bar trên Android

Giới thiệu

Bài viết hướng dẫn lấy giá trị elevation (độ cao/bóng đổ) của Action Bar/Toolbar qua getSupportActionBar().getElevation(). Elevation quyết định shadow depth trong Material Design.

Các bước thực hiện

Bước 1: Tạo project mới

Android Studio → File → New Project → Empty Activity.

Bước 2: Giao diện (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="16dp">

    <TextView
        android:id="@+id/tvElevation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Action Bar Elevation: "
        android:textSize="18sp" />

</LinearLayout>

Bước 3: Code (MainActivity.kt)

package com.example.actionbarelevation

import android.os.Build
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Lấy elevation hiện tại (mặc định thường là 4dp hoặc 0)
        val elevation = supportActionBar?.elevation ?: 0f
        tvElevation.text = "Action Bar Elevation: $elevation px (${pxToDp(elevation)} dp)"

        // Thay đổi elevation (ví dụ: 0 = flat, 8dp = elevated)
        supportActionBar?.elevation = 8f // 8dp
        // Hoặc 0 để flat design
        // supportActionBar?.elevation = 0f
    }

    private fun pxToDp(px: Float): Float {
        return px / resources.displayMetrics.density
    }
}

Giải thích Elevation trong Material Design

• Elevation (dp): Khoảng cách giả định giữa surface và background, quyết định shadow blur radius và offset.
• Mặc định Action Bar: 4dp (Material Design spec).
• AppBarLayout/Toolbar: Có thể set elevation tùy ý.

Cách set Elevation

1. Action Bar (AppCompat)

supportActionBar?.elevation = 8f // dp
// Hoặc
supportActionBar?.setElevation(8f)

2. Toolbar (Trong layout XML)

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="8dp"
    app:elevation="8dp" /> <!-- app:elevation cho AppCompat -->

3. AppBarLayout (CoordinatorLayout)

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="4dp"> <!-- Shadow cho cả AppBar -->

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />

</com.google.android.material.appbar.AppBarLayout>

4. Theme/Style (Global)

<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="actionBarElevation">0dp</item> <!-- Flat Action Bar -->
</style>

Lưu ý

• getElevation() trả về **pixel**, cần chia cho density để ra dp.
• Elevation = 0dp → Flat design (không shadow), phổ biến trong Material Design 3 (Material You).
• Trên Android 5.0+ (API 21), elevation được render bằng Outline + Shadow (hardware accelerated).
• Nếu dùng Window.setStatusBarColor() + Window.setNavigationBarColor(), elevation của Action Bar không ảnh hưởng đến status bar.
• CollapsingToolbarLayout: elevation thay đổi động khi scroll.

Status Bar Elevation (Khác biệt)

Status Bar không có elevation property. Để tạo shadow dưới status bar:

<View
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:background="@drawable/shadow_top" />

<!-- res/drawable/shadow_top.xml -->
<shape xmlns:android="https://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#33000000"
        android:endColor="#00000000"
        android:angle="270" />
</shape>