Android中实现半透明状态栏与Toolbar的技术求助

我尝试了多种方法，始终无法实现半透明状态栏搭配Toolbar的效果，目标是达到下图红框标注的样式：

以下是我的布局文件和样式文件代码，恳请帮忙解决：

布局文件 #

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layout"
    android:orientation="vertical"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:minHeight="?attr/actionBarSize"
        android:background="@android:color/transparent">
    </androidx.appcompat.widget.Toolbar>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="24dp"
        android:background="@null"
        app:tabSelectedTextColor="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tabIndicator="@drawable/custom_tab_indicator"
        app:tabIndicatorColor="#FF5722"
        app:tabIndicatorFullWidth="false" />

</LinearLayout>

样式文件 #

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Tab" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <!-- Customize your theme here. -->
    </style>

</resources>

解决步骤 #

1. 调整样式文件
   移除android:windowTranslucentStatus，改用半透明色设置android:statusBarColor，同时添加属性确保系统栏背景正常绘制：

   <style name="Theme.Tab" parent="Theme.MaterialComponents.DayNight.NoActionBar">
       <!-- 保留原有品牌颜色属性 -->
       <!-- 状态栏设置 -->
       <item name="android:statusBarColor">#80000000</item> <!-- 半透明黑色，可按需调整透明度 -->
       <item name="android:windowDrawsSystemBarBackgrounds">true</item>
       <item name="android:windowTranslucentNavigation">true</item>
       <!-- Android 10+ 若背景偏暗，设置状态栏图标为浅色 -->
       <item name="android:windowLightStatusBar">false</item>
   </style>
   

2. 修改布局文件

   • 移除根布局的android:fitsSystemWindows="true"，让Toolbar延伸至状态栏下方：

     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
         xmlns:tools="http://schemas.android.com/tools"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:id="@+id/layout"
         android:orientation="vertical"
         tools:context=".MainActivity">
     

   • 给Toolbar添加上内边距，避免内容被状态栏遮挡：

     <androidx.appcompat.widget.Toolbar
         android:id="@+id/toolbar"
         app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
         android:layout_width="match_parent"
         android:layout_height="50dp"
         android:minHeight="?attr/actionBarSize"
         android:background="@android:color/transparent"
         android:paddingTop="?attr/statusBarHeight">
     

3. 代码中绑定Toolbar（可选）
   在MainActivity的onCreate方法中完成Toolbar的设置：

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
       val toolbar = findViewById<Toolbar>(R.id.toolbar)
       setSupportActionBar(toolbar)
   }
   

内容的提问来源于stack exchange，提问作者Taki