如何创建带居中凸起圆形按钮的底部自定义布局？需XML代码

可以通过LayerList绘制带凸起的背景，再配合布局将圆形按钮定位在凸起位置，以下是完整实现代码：

1. 绘制带凸起的底部背景（drawable/bottom_bar_bg.xml） #

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 底部基础矩形背景 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
            <corners android:topLeftRadius="16dp" android:topRightRadius="16dp" />
            <padding android:bottom="20dp" /> <!-- 给凸起预留空间 -->
        </shape>
    </item>
    <!-- 中间的圆形凸起 -->
    <item
        android:width="60dp"
        android:height="60dp"
        android:gravity="top|center_horizontal"
        android:top="-30dp"> <!-- 向上偏移一半高度，形成凸起效果 -->
        <shape android:shape="oval">
            <solid android:color="#FFFFFF" />
            <stroke android:width="2dp" android:color="#E0E0E0" />
        </shape>
    </item>
</layer-list>

2. 主布局文件（layout/activity_main.xml） #

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
    android:background="#F5F5F5">

    <!-- 底部栏容器 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@drawable/bottom_bar_bg"
        android:orientation="horizontal"
        android:paddingHorizontal="20dp"
        android:gravity="center_vertical"
        app:layout_constraintBottom_toBottomOf="parent">

        <!-- 左侧占位图标 -->
        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/ic_home"
            android:layout_weight="1"
            android:layout_gravity="center" />

        <!-- 中间圆形按钮（覆盖在凸起上） -->
        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="@drawable/circle_button_bg"
            android:src="@drawable/ic_add"
            android:padding="16dp"
            android:layout_marginTop="-30dp" /> <!-- 向上偏移，嵌入凸起位置 -->

        <!-- 右侧占位图标 -->
        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/ic_profile"
            android:layout_weight="1"
            android:layout_gravity="center" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

3. 圆形按钮的背景（drawable/circle_button_bg.xml） #

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FF4081" />
    <stroke android:width="2dp" android:color="#FFFFFF" />
</shape>

关键说明 #

• LayerList通过上下两个Shape叠加，顶部圆形向上偏移一半高度，形成底部栏的凸起效果
• 中间按钮通过负margin向上偏移，刚好嵌入凸起位置，视觉上和背景融为一体
• 可根据需求调整凸起大小、颜色、圆角半径等参数

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