Android TabLayout与ViewPager2重叠及RecyclerView显示异常的布局适配问题

核心问题根因 #

• 约束逻辑错位：承载TabLayout与ViewPager2的容器内部存在反向约束、无效属性引用，导致布局尺寸计算异常（例如原代码中ViewPager设置layout_constraintBottom_toTopOf="parent"，本质是将视图底部对齐父布局顶部，完全违背约束逻辑）
• 尺寸设置错误：ViewPager2使用wrap_content作为高度，无法正确计算内部Fragment的可用显示区域，极易触发高度测量异常
• 无效属性适配：在ConstraintLayout体系下使用了仅适用于RelativeLayout的对齐属性layout_alignParentBottom，无实际作用且干扰测量逻辑
• 错误Behavior引用：无AppBarLayout联动的场景下给ViewPager2设置appbar_scrolling_view_behavior，会触发CoordinatorLayout的异常测量逻辑，直接让容器占满全屏，覆盖上层头像、封面区域

分步修复操作 #

主页面ProfileFragment布局调整 #

• 修正容器内的约束关系：将TabLayout固定在容器顶部，ViewPager2对齐在TabLayout下方，替换原有的反向约束
• 取消ViewPager2的wrap_content高度，改为0dp配合四向约束，让ViewPager2占满容器内除TabLayout外的全部可用空间
• 调整CoordinatorLayout锚点规则：让承载Tab+ViewPager的容器顶部对齐profile_photo的底部，避免覆盖头像区域
• 移除ViewPager2上无效的app:layout_behavior="@string/appbar_scrolling_view_behavior"

子Fragment布局调整 #

• 删除RecyclerView上仅适用于RelativeLayout的无效属性android:layout_alignParentBottom="true"
• 将RecyclerView的宽高从match_parent改为0dp，配合四向约束对齐父布局边界，让列表尺寸随父容器正确计算，消除和上层元素的重叠

修正后的参考代码 #

ProfileFragment 布局 #

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".view.ProfileFragment">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/myToolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:elevation="8dp"
            app:navigationIcon="?attr/homeAsUpIndicator"
            app:title="@string/profile" />

        <androidx.cardview.widget.CardView
            android:id="@+id/coverPhoto"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_margin="24dp"
            app:layout_anchor="@id/myToolbar"
            app:layout_anchorGravity="bottom|center_horizontal">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/ic_launcher_background" />

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/profile_photo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cardCornerRadius="29dp"
            app:layout_anchor="@id/coverPhoto"
            app:layout_anchorGravity="bottom|center">

            <ImageView
                android:layout_width="96dp"
                android:layout_height="96dp"
                android:src="@drawable/ic_baseline_person" />

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/iconChange"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cardBackgroundColor="@color/light_orange"
            app:cardCornerRadius="16dp"
            app:layout_anchor="@id/profile_photo"
            app:layout_anchorGravity="top|end">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:padding="5dp"
                android:src="@drawable/ic_round_camera"
                app:tint="@color/white" />

        </androidx.cardview.widget.CardView>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginTop="8dp"
            app:layout_anchor="@id/profile_photo"
            app:layout_anchorGravity="bottom|center_horizontal">

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <androidx.viewpager2.widget.ViewPager2
                android:id="@+id/viewPager"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/tabLayout" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>

子Fragment 布局 #

<layout 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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".view.PersonalProductFragment">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/personalProductsRecycler"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:fadingEdge="horizontal"
            android:fadingEdgeLength="25dp"
            android:requiresFadingEdge="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

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