Hướng dẫn này minh họa cách thay đổi màu Status Bar (thanh trạng thái) để trùng khớp với màu chủ đạo của ứng dụng Android sử dụng Kotlin.
Bước 1: Tạo dự án mới
Mở Android Studio, chọn File → New Project và điền thông tin cần thiết.
Bước 2: Thiết kế giao diện (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="Tutorials Point"
android:textAlignment="center"
android:textColor="@android:color/holo_green_dark"
android:textSize="32sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Check the Color of the Status Bar"
android:textAlignment="center"
android:textColor="@color/colorAccent"
android:textSize="24sp"
android:textStyle="bold" />
</RelativeLayout>
Bước 3: Viết code 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 = "KotlinApp"
val window: Window = window
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
window.statusBarColor = ContextCompat.getColor(this, R.color.colorAccent)
}
}
Bước 4: Cấu hình màu trong res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#6200EE</color>
<color name="colorPrimaryDark">#3700B3</color>
<color name="colorAccent">#03DAC5</color>
</resources>
Bước 5: Cấu hình AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
package="com.example.q11">
<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>
Chạy ứng dụng
Kết nối thiết bị, nhấn Run. Status Bar sẽ chuyển màu thành colorAccent (xanh ngọc) thay vì màu mặc định.
Giải thích các flag
| Flag | Chức năng |
|---|---|
FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS | Cho phép app vẽ background cho system bars |
FLAG_TRANSLUCENT_STATUS | Làm status bar trong suốt (cần clear flag này) |
Cách thay đổi Navigation Bar (thanh điều hướng dưới)
window.navigationBarColor = ContextCompat.getColor(this, R.color.colorPrimaryDark)
Lưu ý về Theme
Đảm bảo theme trong styles.xml không set android:windowTranslucentStatus="true hoặc android:windowDrawsSystemBarBackgrounds="false":
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">false</item>
<item name="android:statusBarColor">@color/colorPrimaryDark</item>
</style>
Android 11+ (API 30+): Insets & WindowInsetsController
val insetsController = window.insetsController
insetsController?.systemBarsBehavior = WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
insetsController?.setSystemBarsAppearance(
WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS,
WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS
)