Android嵌套ViewPager2顶部灰色覆盖层问题求助

问题原因 #

迁移到ViewPager2后出现的顶部灰色覆盖层，大概率是ViewPager2默认启用的滚动边缘渐变效果（overscroll fade提示）在嵌套场景下的异常显示，触摸后触发重绘导致消失；也可能是嵌套滚动容器的布局层级或背景配置问题。

解决方案 #

1. 禁用滚动边缘渐变效果 #

直接在父、子ViewPager2的布局中添加属性，关闭默认的边缘渐变和滚动指示器：

android:overScrollMode="never"
android:scrollIndicators="none"

示例修改父ViewPager2：

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:visibility="visible"
    android:overScrollMode="never"
    android:scrollIndicators="none"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/view3">
</androidx.viewpager2.widget.ViewPager2>

子ViewPager2需同步添加上述两个属性。

2. 修正嵌套容器的背景配置 #

子ViewPager2外层的NestedScrollableHost可能因未明确设置背景，导致默认半透明灰色显示，给它添加明确背景色：

<com.mydesq.mywealth.utils.NestedScrollableHost
    android:id="@+id/viewPager2rl"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/pager_dots"
    android:layout_below="@+id/view1"
    android:background="@color/white"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

3. 代码层面强制触发重绘 #

若布局修改无效，可在FragmentA的onViewCreated中给子ViewPager2添加触摸监听，触发即时重绘：

viewPager2.setOnTouchListener { _, _ ->
    viewPager2.invalidate()
    false
}

或在父ViewPager2的页面切换回调中，针对FragmentA页面触发重绘：

parentViewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        super.onPageSelected(position)
        if (position == 0) { // 假设FragmentA是第1个页面
            val fragmentA = supportFragmentManager.findFragmentByTag("f$position") as? FragmentA
            fragmentA?.view?.invalidate()
        }
    }
})

4. 检查主题配置 #

查看应用主题是否设置了滚动边缘颜色，若存在灰色配置，可改为透明：

<item name="android:edgeEffectColor">@android:color/transparent</item>

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