我的浮动操作按钮未正确显示

Question

我正在使用带有View Pager的TAB LAYOUT和带有底部导航浮动操作按钮的BOTTOM APP BAR，但我认为我的浮动操作按钮显示在View Pager下，所以看起来像是从上面剪切的。。。。请帮我修这个

这是我的XML代码。。。。

<androidx.constraintlayout.widget.ConstraintLayout 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="@drawable/ic_main_bg"
tools:context=".home.HomeActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bottom_navigation_bg"
app:fabCradleRoundedCornerRadius="0dp"
app:backgroundTint="@color/color_primary"
/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="@color/color_primary"
app:srcCompat="@drawable/ic_plus"
app:layout_anchor="@id/bottomAppBar"
android:contentDescription="@string/add_item_to_this_destination" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/color_primary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicatorColor="@color/color_secondary"
app:tabSelectedTextColor="@color/color_secondary"
app:tabTextColor="@color/color_secondary" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/view_pager_2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/coordinator_layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tab_layout">
</androidx.viewpager2.widget.ViewPager2>
</androidx.constraintlayout.widget.ConstraintLayout>

这是的样子

输入图像描述

Answer 1

问题是因为CoordinaterLayout

解决方案1：添加

android:clipToPadding="false"
android:clipChildren="false"

在CoordinatorLayout 中

解决方案2：将CoordinatorLayout作为父布局，并将所有子布局放在其中。

解决方案3：

在view_pager_2中添加

android:layout_marginBottom="?actionBarSize"

解决方案4：将此行添加到您的晶圆厂

android:elevation="10dp"

Answer 2

在BootomAppBar标签中添加以下代码：

app:fabAlignmentMode="center"
app:fabCradleMargin="8dp"

因此它将变成：

<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bottom_navigation_bg"
app:fabCradleRoundedCornerRadius="0dp"
app:backgroundTint="@color/color_primary"
app:fabAlignmentMode="center"
app:fabCradleMargin="8dp"
/>