Android：如何让ChipGroup中的Chip背景填满指定布局区域？

我懂你现在的困扰——明明给每个Chip都设了固定的55dp宽度，可背景却只围着文本转，不肯填满整个方形空间，文本短的Chip背景就小，长的就大，完全没达到统一尺寸的效果。别着急，这是Material Chip默认的自适应行为在作祟，咱们用几个简单的调整就能搞定。

为什么会出现这个问题？ #

默认的Widget.MaterialComponents.Chip.Choice样式自带了几个约束：

• 它会根据文本内容自动调整背景drawable的大小，优先适配文本而不是布局宽度
• 内置了chipMinTouchTargetSize属性，强制背景保持最小触摸尺寸，哪怕你设了更小的布局宽度

具体解决方案 #

1. 自定义Chip样式，打破自适应约束 #

在你的res/values/styles.xml里添加以下自定义样式，强制背景填满整个布局：

<!-- 自定义填充式Choice Chip样式 -->
<style name="Custom.FullWidth.Chip.Choice" parent="Widget.MaterialComponents.Chip.Choice">
    <!-- 关闭默认的最小触摸尺寸限制，让背景完全跟随布局宽度 -->
    <item name="chipMinTouchTargetSize">0dp</item>
    <!-- 自定义背景色（替换成你需要的颜色） -->
    <item name="chipBackgroundColor">@color/gray_light</item>
    <!-- 设置Chip的形状，这里用圆角矩形，想方形就把cornerSize改成0dp -->
    <item name="shapeAppearance">@style/CustomChipShape</item>
    <!-- 确保文本居中显示，避免偏移 -->
    <item name="android:gravity">center</item>
    <item name="android:textAlignment">center</item>
    <!-- 移除Chip内部的默认内边距，让背景彻底铺满 -->
    <item name="chipPaddingHorizontal">0dp</item>
    <item name="chipPaddingVertical">4dp</item> <!-- 保留一点上下内边距避免文本贴边，可按需调整 -->
</style>

<!-- 自定义Chip的形状样式 -->
<style name="CustomChipShape" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerSize">8dp</item> <!-- 圆角大小，按需修改 -->
</style>

2. 在布局文件中替换为自定义样式 #

把原来Chip的style属性替换成咱们刚定义的Custom.FullWidth.Chip.Choice，保持固定宽度不变：

<com.google.android.material.chip.Chip
    style="@style/Custom.FullWidth.Chip.Choice"
    android:layout_width="55dp"
    android:layout_height="wrap_content"
    android:text="A" />

<com.google.android.material.chip.Chip
    style="@style/Custom.FullWidth.Chip.Choice"
    android:layout_width="55dp"
    android:layout_height="wrap_content"
    android:text="BBB" />

3. 验证效果 #

做完上面的调整后，不管Chip里的文本是1个字符还是多个，背景都会填满你设置的55dp宽度，所有Chip的背景尺寸完全统一，同时还保留了Choice Chip的选中状态切换效果。

如果还有细微的间距问题，可以再调整chipPaddingHorizontal或chipPaddingVertical的值，直到达到你想要的视觉效果。

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