Android Studio中Button设置drawableLeft后如何让文本居中显示

原生Button配置drawableLeft属性时，默认布局逻辑会把「左侧图标+文本」视作一个整体计算居中位置。你看到文本不在按钮中线，就是因为左侧图标占用了宽度，把整个组合块挤向了右侧。单独配置android:textAlignment="center"只能让这个组合块居中，无法让文本本身独立居中。

方案1：负drawablePadding偏移（零依赖，改动最小） #

给Button添加android:drawablePadding属性，值设为左侧图标宽度的负数，把文本往回拉对应图标宽度的距离，刚好抵消图标带来的位置偏移，你原来配置的android:paddingLeft="10dp"会给图标留出显示空间，不会造成图标截断。
示例代码（假设你的谷歌图标宽度为24dp，替换成实际尺寸即可）：

<Button
        android:layout_marginTop="80dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:background="@drawable/rectangle_round_white"
        android:drawableLeft="@drawable/icon_google"
        android:drawablePadding="-24dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:elevation="5dp"
        android:text="start with google"
        android:textAlignment="center"
        android:textSize="11dp"/>

*注意：这个方案需要提前确定图标的固定宽度，适合图标尺寸不变的场景。

方案2：使用MaterialButton替代原生Button（官方组件推荐） #

如果项目已经引入Android Material Components依赖，直接替换原生Button为MaterialButton，通过自带的icon属性配置图标，不需要手动计算偏移：

<com.google.android.material.button.MaterialButton
        android:layout_marginTop="80dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:background="@drawable/rectangle_round_white"
        app:icon="@drawable/icon_google"
        app:iconGravity="start"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:elevation="5dp"
        android:text="start with google"
        android:textAlignment="center"
        android:textSize="11dp"/>

配置app:iconGravity="start"后，图标会固定在按钮左侧边缘位置，文本会独立居中，不需要手动计算尺寸，适配性更好。

方案3：自定义组合布局（适配性最强） #

如果不想用数值偏移或者Material依赖，直接用ViewGroup套一层，分开摆放图标和文本即可，逻辑最直观，不会出现适配问题。以ConstraintLayout为例：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="80dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:background="@drawable/rectangle_round_white"
    android:elevation="5dp"
    android:paddingVertical="12dp">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:src="@drawable/icon_google"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="start with google"
        android:textSize="11dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

这个方案唯一的缺点是会多一层布局层级，对性能影响可以忽略。

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