Cách tạo Status Bar và Action Bar trong suốt trong Android

Giới thiệu

Ví dụ này minh họa cách làm trong suốt (transparent) cả Status Bar và Action Bar (Toolbar) trong Android, cho phép nội dung nội dung kéo dài lên dưới các thanh hệ thống.

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

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

Mở Android Studio, chọn File → New Project.

Bước 2: Thiết kế giao diện (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#222222">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

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

package com.app.sample;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Bước 4: Định nghĩa Style (res/values/styles.xml)

<resources>
    <!-- Theme gốc -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <!-- Theme cho Activity có ActionBar trong suốt -->
    <style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
        <item name="android:windowContentOverlay">@null</item>
        <item name="windowActionBarOverlay">true</item>
        <item name="colorPrimary">@android:color/transparent</item>
    </style>
</resources>

Bước 5: Áp dụng Theme cho Activity (AndroidManifest.xml)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.app.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"
            android:theme="@style/AppTheme.ActionBar.Transparent">
            <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. ActionBar và Status Bar sẽ trong suốt, nền Activity hiển thị trọn vẹn.

Giải thích các thuộc tính quan trọng

• windowActionBarOverlay=true: Cho phép nội dung layout vẽ đè lên Action Bar.
• colorPrimary=@android:color/transparent: Làm nền Action Bar trong suốt.
• android:windowContentOverlay=@null: Xóa bóng đổ (shadow) dưới Action Bar.

Cách hiện đại (Android 11+ / API 30+)

Sử dụng WindowInsetsControllerCompat và theme Theme.MaterialComponents.DayNight.NoActionBar kết hợp Toolbar tùy chỉnh:

// Trong onCreate Activity
WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
WindowInsetsControllerCompat insetsController = WindowCompat.getInsetsController(getWindow(), getWindow().getDecorView());
insetsController.setAppearanceLightStatusBars(true); // hoặc false cho text sáng
insetsController.setAppearanceLightNavigationBars(true);

// Toolbar trong layout XML
<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@android:color/transparent"
    app:titleTextColor="@android:color/white" />

Cách này linh hoạt hơn, hỗ trợ edge-to-edge content tốt hơn trên Android 11+.