TabLayout绑定ViewPager时elevation阴影被裁剪问题解决方案

• TabLayout的elevation阴影向上投射，但你给ViewPager设置了android:layout_above="@id/tabLayout"，该属性会将ViewPager的下边界严格限制在TabLayout的上边缘位置，阴影刚好落在ViewPager的布局边界外，即使开启clipChildren/clipToPadding，RelativeLayout在布局测量阶段已经划定了ViewPager的绘制范围，阴影没有可绘制的承载空间。
• 原生elevation阴影在控件背景为半透明时，会因系统渲染优化出现不绘制的问题，且没有预留阴影空间的情况下，阴影会被父布局直接裁剪。
• BottomSheet默认Z轴值高于底部TabLayout，因此弹出时会覆盖在TabLayout上方，不符合预期层级。

• 调整布局边界预留阴影空间
  移除ViewPager的android:layout_above="@id/tabLayout"属性，改为给ViewPager设置android:paddingBottom，值为「TabLayout高度 + elevation阴影高度」，同时保留android:clipToPadding="false"配置。这样ViewPager的内容可以延伸到TabLayout下方，滚动时不会被硬切割，TabLayout的阴影也有足够空间叠在ViewPager内容上层。
  核心布局代码参考：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/paper_transparent"
    android:clipToPadding="false"
    android:clipChildren="false">

    <components.NonSwipableViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="64dp" <!-- 按实际tab高度+elevation调整，例：56dp tab高度 + 8dp 阴影 = 64dp -->
        android:clipChildren="false"
        android:clipToPadding="false"
        android:overScrollMode="never"/>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:clipToPadding="false"
        android:clipChildren="false"
        android:outlineProvider="bounds"
        android:translationZ="16dp"
        style="@style/main_tab">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout="@layout/main_tab_layout" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout="@layout/main_tab_layout"/>

    </com.google.android.material.tabs.TabLayout>

</RelativeLayout>

• 修复阴影显示问题
  1. 将style中android:elevation替换为app:elevation，兼容低版本系统的Material阴影渲染；
  2. 为了实现更自然的底部渐变淡出效果，避免半透明背景下原生阴影丢失，建议替换TabLayout的背景为带顶部渐变的layer-list，可控性远高于原生elevation阴影：

<!-- drawable/tab_layout_bg.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="top">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:startColor="#1F000000"
                android:endColor="@android:color/transparent"/>
            <size android:height="@dimen/padding_large"/>
        </shape>
    </item>
    <item android:top="@dimen/padding_large">
        <color android:color="@color/paper_transparent"/>
    </item>
</layer-list>

将style中android:background的值替换为@drawable/tab_layout_bg即可，渐变阴影会自然叠加在ViewPager内容上，滚动时不会出现硬边界。

• 配置BottomSheet层级
  TabLayout设置android:translationZ="16dp"后，Z值高于默认BottomSheet的8dp，弹出时会自然从TabLayout后方探出。如果自定义了BottomSheet的Z值，只要保证其translationZ小于TabLayout即可，不需要额外修改其他逻辑。

ViewPager内的列表、滚动控件不需要额外适配，clipToPadding="false"配置会让内容滚动到底部时自然滑入TabLayout的渐变阴影区域，实现自然淡出效果。

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