如何消除折叠Toolbar收起时背后的白色矩形背景

问题分析 #

你遇到的白色矩形，大概率是以下两个原因导致：

1. AppBarLayout在CoordinatorLayout中错误使用了ConstraintLayout的约束属性，导致布局计算异常出现空白；
2. Toolbar背景使用了透明渐变，露出了下层CoordinatorLayout的默认白色背景。

解决方案 #

方案1：移除AppBarLayout上多余的约束属性

AppBarLayout作为CoordinatorLayout的直接子View，不需要设置ConstraintLayout相关的约束属性（layout_constraintEnd_toEndOf等），这些属性会干扰CoordinatorLayout的布局逻辑。

修改activity_home.xml中的AppBarLayout部分：

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent">
    <!-- 去掉以下三行约束属性 -->
    <!-- app:layout_constraintEnd_toEndOf="parent" -->
    <!-- app:layout_constraintStart_toStartOf="parent" -->
    <!-- app:layout_constraintTop_toTopOf="parent" -->
    
    <!-- 内部CollapsingToolbarLayout代码不变 -->
</com.google.android.material.appbar.AppBarLayout>

方案2：调整Toolbar背景渐变，消除透明区域

你的Toolbar背景渐变结束色为透明，会露出下层白色背景。将渐变结束色改为和AppBar一致的纯色，即可解决白色矩形问题，同时保证状态栏与Toolbar颜色平滑过渡。

修改gradient.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="120"
        android:endColor="#3BB1EC" <!-- 从透明改为和起始色一致 -->
        android:startColor="#3BB1EC" />
</shape>

方案3：给CoordinatorLayout设置背景色

如果希望保留Toolbar的透明渐变，可给CoordinatorLayout设置和页面内容一致的背景色，避免露出默认白色：

修改activity_home.xml中的CoordinatorLayout：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    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:background="@color/white" <!-- 添加这行 -->
    tools:context=".HomeActivity">
    
    <!-- 内部代码不变 -->
</androidx.coordinatorlayout.widget.CoordinatorLayout>

额外优化（保证状态栏与Toolbar平滑过渡） #

在styles.xml中设置状态栏颜色与Toolbar起始色一致：

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- 其他属性不变 -->
    <item name="android:statusBarColor">#3BB1EC</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

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