Cách đổi màu Status Bar phù hợp với theme ứng dụng Android

Giới thiệu

Bài viết này hướng dẫn cách thay đổi màu thanh trạng thái (Status Bar) để phù hợp với màu theme của ứng dụng, tạo trải nghiệm liền mạch (seamless).

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

Bước 1: Tạo dự án mới

Khởi tạo project Android Studio mới.

Bước 2: Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginTop="30dp"
        android:text="Kiểm tra màu Status Bar"
        android:textAlignment="center"
        android:textSize="24sp"
        android:textStyle="bold" />

</RelativeLayout>

Bước 3: Code Java (src/MainActivity.java)

package app.com.sample;

import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        changeStatusBarColor();
    }

    private void changeStatusBarColor() {
        Window window = getWindow();

        // 1. Cho phép vẽ background lên system bar
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

        // 2. Bỏ flag translucent (nếu có)
        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

        // 3. Đặt màu status bar từ color resource
        window.setStatusBarColor(ContextCompat.getColor(this, R.color.colorAccent));

        // Tùy chọn: Đặt màu navigation bar (API 21+)
        // window.setNavigationBarColor(ContextCompat.getColor(this, R.color.colorPrimaryDark));
    }
}

Giải thích các flag:

• FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS: Cho phép app vẽ background cho status/navigation bar
• FLAG_TRANSLUCENT_STATUS: Làm status bar trong suốt (cần tắt để set màu solid)
• setStatusBarColor(int color): Đặt màu cụ thể (API 21+)

Bước 4: Manifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

Cách 2: Thay đổi qua Theme/Style (Khuyên dùng cho toàn app)

res/values/styles.xml

<resources>
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <!-- Status Bar color (API 21+) -->
        <item name="android:statusBarColor">@color/colorPrimaryDark</item>

        <!-- Navigation Bar color (API 21+) -->
        <item name="android:navigationBarColor">@color/colorPrimaryDark</item>

        <!-- Light/Dark status bar icons (API 23+) -->
        <item name="android:windowLightStatusBar">false</item> <!-- true = icons đen, false = icons trắng -->
    </style>
</resources>

res/values-v23/styles.xml (để override windowLightStatusBar cho API 23+)

<resources>
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <item name="android:statusBarColor">@color/colorPrimaryDark</item>
        <item name="android:windowLightStatusBar">true</item> <!-- Icons đen cho status bar sáng -->
    </style>
</resources>

Chạy ứng dụng

Chạy app, Status bar sẽ có màu colorAccent (mặc định hồng đỏ của Material).

Lưu ý quan trọng

• Chỉ hoạt động trên API 21 (Lollipop) trở lên
• Màu status bar nên có độ tương phản với icon (trắng/đen) - dùng windowLightStatusBar
• Trên Android 10+, gesture navigation có thể làm navigation bar trong suốt tự động
• Khi dùng FLAG_TRANSLUCENT_STATUS, content sẽ trôi lên dưới status bar - cần padding top = status bar height

Lấy chiều cao Status Bar để padding

int statusBarHeight = 0;
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
    statusBarHeight = getResources().getDimensionPixelSize(resourceId);
}
// Áp dụng padding cho view root
findViewById(android.R.id.content).setPadding(0, statusBarHeight, 0, 0);