如何在Android侧边抽屉导航头部添加FAB实现指定设计效果

解决方案 #

你当前实现不了目标效果的核心原因是fabCradleMargin、fabCradleRoundedCornerRadius这类属性是BottomAppBar的专属属性，写在普通LinearLayout上不会生效，无法生成适配FAB的凹口效果。按以下步骤修改即可：

第一步：确认依赖配置 #

确保你的app模块build.gradle引入了1.2.0及以上版本的Material组件库，且应用全局主题继承自Theme.MaterialComponents系列主题：

implementation 'com.google.android.material:material:1.9.0'

第二步：修改布局代码 #

将原布局替换为以下代码，用ShapeableLinearLayout实现带FAB凹口的头部效果：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <com.google.android.material.shape.ShapeableLinearLayout
        android:id="@+id/ll_Nav_header_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/side_nav_bar"
        android:orientation="vertical"
        android:paddingVertical="@dimen/nav_header_vertical_spacing"
        app:shapeAppearanceOverlay="@style/HeaderShapeWithFabCradle">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/nav_header_desc"
            app:srcCompat="@mipmap/ic_launcher_round" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/nav_header_vertical_spacing"
            android:text="@string/nav_header_title"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/nav_header_subtitle" />
    </com.google.android.material.shape.ShapeableLinearLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="8dp"
        app:layout_anchor="@id/ll_Nav_header_main"
        app:layout_anchorGravity="end|center_vertical"
        android:layout_marginEnd="-28dp"
        app:borderWidth="0dp"
        app:tint="@android:color/white"
        app:backgroundTint="@color/teal_200"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout>

第三步：添加凹口样式 #

在res/values/styles.xml中添加头部凹口的样式配置：

<style name="HeaderShapeWithFabCradle" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="edgeTreatmentRight">@style/FabCradleEdgeTreatment</item>
</style>

<style name="FabCradleEdgeTreatment" parent="EdgeTreatment">
    <item name="cradleMargin">8dp</item>
    <item name="cradleRoundedCornerRadius">16dp</item>
    <item name="cradleVerticalOffset">0dp</item>
</style>

调整说明 #

• 把FAB的layout_marginEnd设为负值，是为了让FAB刚好嵌入到头部布局的凹口内，你可以根据FAB的实际大小微调这个值
• 样式里的cradleMargin、cradleRoundedCornerRadius可以根据你需要的凹口大小、圆角自行调整
• 删除了FAB多余的translationX、transformPivotX等冗余属性，避免布局错位

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