如何实现如下图所示的2个指定形状的自定义按钮？

实现方案 #

推荐优先使用ConstraintLayout作为容器实现，性能优于RelativeLayout，适配性更强，也可以根据需求选择RelativeLayout实现，两种方案代码如下：

通用背景配置 #

先创建按钮背景drawable文件bg_button.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="8dp"/>
    <stroke android:width="1dp" android:color="#E0E0E0"/>
</shape>

方案1：ConstraintLayout实现 #

<?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="wrap_content"
    android:background="@drawable/bg_button"
    android:paddingHorizontal="16dp"
    android:paddingVertical="12dp"
    android:foreground="?attr/selectableItemBackground">

    <!-- 左侧功能图标 -->
    <ImageView
        android:id="@+id/iv_left_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_your_target_icon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <!-- 中间文本 -->
    <TextView
        android:id="@+id/tv_btn_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="按钮文本"
        android:textSize="16sp"
        android:textColor="#333333"
        android:layout_marginStart="16dp"
        app:layout_constraintStart_toEndOf="@id/iv_left_icon"
        app:layout_constraintEnd_toStartOf="@id/iv_right_arrow"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <!-- 右侧箭头图标 -->
    <ImageView
        android:id="@+id/iv_right_arrow"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_chevron_right"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

方案2：RelativeLayout实现 #

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_button"
    android:paddingHorizontal="16dp"
    android:paddingVertical="12dp"
    android:foreground="?attr/selectableItemBackground">

    <!-- 左侧功能图标 -->
    <ImageView
        android:id="@+id/iv_left_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_your_target_icon"
        android:layout_centerVertical="true"
        android:layout_alignParentStart="true"/>

    <!-- 右侧箭头图标 -->
    <ImageView
        android:id="@+id/iv_right_arrow"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_chevron_right"
        android:layout_centerVertical="true"
        android:layout_alignParentEnd="true"/>

    <!-- 中间文本 -->
    <TextView
        android:id="@+id/tv_btn_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="按钮文本"
        android:textSize="16sp"
        android:textColor="#333333"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@id/iv_left_icon"
        android:layout_toStartOf="@id/iv_right_arrow"/>

</RelativeLayout>

注意事项 #

• 代码中的图标资源需要替换为项目内对应的实际资源
• 可根据设计需求调整内边距、圆角半径、文字大小、颜色等参数
• 根布局添加的foreground属性可实现系统自带的水波纹点击效果，不需要可删除

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