如何将FAB从内嵌位置改为与BottomAppBar重叠，以及如何将左侧AppBar样式切换为右侧样式

没问题，我来给你一步步拆解这两个UI调整需求的实现方法，咱们分两部分来搞定：

假设你的目标AppBar是带有自定义导航图标、居中标题、右侧操作菜单的常见样式，具体实现步骤如下：

1. 布局文件调整 #

在你的布局中给AppBarLayout内的Toolbar添加自定义属性或子视图，实现匹配目标样式的结构：

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/Theme.YourApp.AppBarOverlay">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/Theme.YourApp.PopupOverlay"
        app:titleCentered="true"> <!-- 开启标题居中，Material Toolbar自带属性 -->

        <!-- 自定义导航图标（比如替换默认汉堡键为返回箭头） -->
        <ImageView
            android:id="@+id/nav_back_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_back_arrow"
            android:layout_marginStart="16dp"/>

    </androidx.appcompat.widget.Toolbar>

</com.google.android.material.appbar.AppBarLayout>

2. 代码逻辑配置 #

在Activity/Fragment中绑定Toolbar并配置导航、菜单逻辑：

// 绑定Toolbar并设置为支持ActionBar
val toolbar = findViewById<Toolbar>(R.id.toolbar)
setSupportActionBar(toolbar)
supportActionBar?.apply {
    // 隐藏默认标题（如果用自定义布局实现标题的话）
    setDisplayShowTitleEnabled(false)
}

// 给自定义导航图标添加点击事件（比如返回上一页）
toolbar.findViewById<ImageView>(R.id.nav_back_icon).setOnClickListener {
    onBackPressedDispatcher.onBackPressed()
}

// 加载右侧操作菜单
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menuInflater.inflate(R.menu.menu_main, menu)
    return true
}

// 处理菜单点击事件
override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when(item.itemId) {
        R.id.action_search -> {
            // 处理搜索按钮点击逻辑
            true
        }
        R.id.action_settings -> {
            // 处理设置按钮点击逻辑
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

3. 样式细节优化 #

如果需要调整AppBar的文字颜色、图标样式等，在styles.xml中定义主题：

<style name="Theme.YourApp.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
    <item name="android:textColorPrimary">@color/white</item>
    <item name="actionMenuTextColor">@color/white</item>
</style>

默认FAB是内嵌在BottomAppBar的缺口里，要改成重叠效果，只需要调整几个核心属性：

1. 布局文件配置 #

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottom_app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:fabAlignmentMode="end" <!-- 控制FAB的对齐方向，可选center/end -->
    app:fabCradleMargin="0dp" <!-- 取消缺口预留边距，让FAB完全贴合覆盖 -->
    app:fabCradleRoundedCornerRadius="0dp" <!-- 取消缺口圆角，实现直边重叠 -->
    app:fabCradleVerticalOffset="12dp"> <!-- 控制FAB向上偏移的距离，正数越大重叠越多 -->

    <!-- BottomAppBar内的底部导航菜单 -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:menu="@menu/bottom_nav_menu"/>

</com.google.android.material.bottomappbar.BottomAppBar>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/bottom_app_bar" <!-- 锚定到BottomAppBar，保证位置关联 -->
    app:srcCompat="@drawable/ic_add"/>

2. 关键属性说明 #

• app:fabCradleVerticalOffset：核心属性，设置FAB相对于BottomAppBar的垂直偏移量，正数表示向上偏移，数值（比如8dp-16dp）根据你的视觉需求调整即可。
• app:fabCradleMargin="0dp"：移除BottomAppBar为FAB预留的缺口边距，让FAB可以完全覆盖在Bar上。
• app:fabCradleRoundedCornerRadius="0dp"：如果不需要缺口的圆角效果，设置为0即可，让Bar的边缘保持平直。

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