วิธีเปลี่ยนสี Status Bar ให้ตรงกับธีมแอปใน Android ด้วย Kotlin

ตัวอย่างนี้สาธิตวิธี เปลี่ยนสี Status Bar ให้ตรงกับสีธีมของแอป โดยใช้ Window.setStatusBarColor() (API 21+)

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

Android Studio → New Project → Empty Activity

ขั้นตอนที่ 2: 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_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="Status Bar Color Demo"
        android:textAlignment="center"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="24sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Check the Status Bar Color"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        android:textSize="18sp"
        android:textStyle="bold" />

</RelativeLayout>

ขั้นตอนที่ 3: ใส่สีใน res/values/colors.xml

<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
</resources>

ขั้นตอนที่ 4: โค้ดหลัก (MainActivity.kt)

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

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "Status Bar Color"

        val window: Window = window

        // 🔑 จุดสำคัญ 3 ขั้นตอน:
        // 1. บอกระบบว่าจะวาด Status Bar เอง
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)

        // 2. ปิด Translucent Status (โปร่งใส)
        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)

        // 3. ตั้งสี Status Bar
        window.statusBarColor = ContextCompat.getColor(this, R.color.colorPrimaryDark)
    }
}

🎨 วิธีอื่น: ผ่าน Theme (styles.xml) - แนะนำสำหรับทั้งแอป

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <!-- Status Bar -->
    <item name="colorAccent">@color/colorAccent</item>
</style>

แล้วใน Manifest: android:theme="@style/AppTheme"

🌙 รองรับ Dark Mode (API 29+)

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <!-- Light mode -->
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

    <!-- Dark mode (values-night/colors.xml) -->
    <item name="android:statusBarColor">@color/colorPrimaryDark</item>
</style>

🖼️ ทำ Status Bar โปร่งใส (Transparent) - สำหรับ Edge-to-Edge

// ใน onCreate() ก่อน setContentView
window.setFlags(
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
)
// หรือ
window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
window.statusBarColor = Color.TRANSPARENT

ขั้นตอนที่ 5: AndroidManifest.xml

Manifest มาตรฐาน

⚠️ ข้อควรระวัง

ทำงานได้เฉพาะ **API 21 (Android 5.0 Lollipop) ขึ้นไป**
หากใช้ Transparent Status Bar ต้องจัดการ Padding/View Insets ให้เนื้อหาไม่ไปซ้อน Status Bar
ใช้ ContextCompat.getColor() เพื่อรองรับทุก API Level

ทดสอบ

รันแอป → Status Bar จะเป็นสีม่วงเข้ม (colorPrimaryDark)
ลองเปลี่ยนเป็นสีอื่นใน colors.xml → Build และ Run ใหม่