Android应用如何创建图标居中、自定义背景色的圆形小按钮？

我来给你捋捋这两个需求的实现方式，都是实际项目里常用的方案，亲测好使～

一、自定义背景+图标居中的按钮 #

你遇到的图标无法居中问题，大概率是默认Button的内边距或drawable布局属性没调好，推荐用Material Design的MaterialButton来实现，比原生Button灵活太多：

方式1：使用MaterialButton（推荐） #

只需在布局里配置几个属性就能搞定，代码示例：

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="#FF6200EE" <!-- 自定义背景色 -->
    app:icon="@drawable/your_icon" <!-- 设置你的图标 -->
    app:iconGravity="center" <!-- 核心：让图标居中 -->
    app:iconPadding="0dp" <!-- 去掉图标和文字的间距（如果不需要文字） -->
    android:minWidth="72dp" <!-- 保证按钮有足够空间容纳图标 -->
    android:minHeight="72dp"
    android:text="" /> <!-- 不需要文字就留空 -->

如果需要带文字，只要把android:text填上，iconGravity可以设为textStart或者保持center，根据需求调整就行。

方式2：原生Button兼容方案 #

如果你不想引入Material组件，也可以用原生Button，通过调整gravity和drawable属性实现：

<Button
    android:layout_width="72dp"
    android:layout_height="72dp"
    android:background="@drawable/custom_button_bg" <!-- 自定义背景drawable，比如圆角矩形 -->
    android:drawableTop="@drawable/your_icon" <!-- 把图标放在顶部 -->
    android:gravity="center" <!-- 让图标和文字整体居中 -->
    android:drawablePadding="4dp" <!-- 调整图标和文字的间距（无文字则设为0） -->
    android:text="" />

这里的custom_button_bg可以是你自己定义的shape drawable，比如：

<!-- res/drawable/custom_button_bg.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FF6200EE"/>
    <corners android:radius="8dp"/> <!-- 圆角大小 -->
</shape>

二、图标居中的圆形小按钮 #

圆形按钮的实现也分两种方式，同样推荐用Material组件，省心又符合设计规范：

方式1：MaterialButton实现圆形按钮 #

利用MaterialButton的shapeAppearance属性快速实现圆形，代码示例：

<com.google.android.material.button.MaterialButton
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:backgroundTint="#FF00BFA5" <!-- 自定义圆形背景色 -->
    app:icon="@drawable/your_small_icon" <!-- 小图标 -->
    app:iconGravity="center" <!-- 图标居中 -->
    app:iconSize="24dp" <!-- 调整图标大小适配圆形 -->
    app:shapeAppearance="@style/ShapeAppearance.App.Circle" <!-- 关键：圆形样式 -->
    android:insetLeft="0dp"
    android:insetTop="0dp"
    android:insetRight="0dp"
    android:insetBottom="0dp" /> <!-- 去掉默认内边距，保证圆形完整 -->

然后在res/values/styles.xml里定义圆形样式：

<style name="ShapeAppearance.App.Circle" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item> <!-- 50%圆角就是圆形 -->
</style>

方式2：自定义Drawable实现圆形按钮 #

如果不想用Material组件，自己写个圆形背景drawable也很简单：
首先创建res/drawable/circle_button_bg.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#FF00BFA5"/> <!-- 圆形背景色 -->
    <size android:width="48dp" android:height="48dp"/> <!-- 圆形大小 -->
</shape>

然后用ImageView作为按钮（因为只有图标，ImageView更轻量）：

<ImageView
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/your_small_icon"
    android:background="@drawable/circle_button_bg"
    android:clickable="true" <!-- 开启点击事件 -->
    android:focusable="true" <!-- 支持焦点，比如按键导航 -->
    android:scaleType="center" <!-- 图标居中显示 -->
    android:padding="8dp" /> <!-- 让图标和圆形边缘留些空隙，更美观 -->

最后提醒一下，如果用MaterialButton，需要在你的app模块的build.gradle（或者build.gradle.kts）里添加依赖：

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

版本可以根据你用的Android Studio版本调整最新的就行。

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