Material Components轮廓按钮背景色溢出问题解决方案咨询

你遇到的这个问题，核心原因是你用错了基础样式——TextButton并不是为带描边的场景设计的，它的默认内边距（inset）没有考虑描边宽度，导致描边外侧的背景色会“溢”出来。

最优解决方案：改用官方轮廓按钮样式 #

Material Design里的轮廓按钮本来就有对应的官方样式Widget.MaterialComponents.Button.OutlinedButton，它默认的内边距会自动适配描边宽度，完全不会出现背景色溢出的问题。直接替换样式即可：

<com.google.android.material.button.MaterialButton
    android:id="@+id/foo"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:backgroundTint="#CFFF"
    app:strokeColor="@color/colorAccent"
    app:strokeWidth="5dp" />

备选方案：给TextButton手动增加内边距 #

如果因为某些原因必须保留TextButton样式，你需要手动设置按钮的内边距，让内边距值至少等于描边宽度，这样描边的外侧就不会超出按钮的可视范围，背景色也就不会露出来了：

<android.support.design.button.MaterialButton
    android:id="@+id/foo"
    style="@style/Widget.MaterialComponents.Button.TextButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    android:insetLeft="5dp"
    android:insetRight="5dp"
    android:insetTop="5dp"
    android:insetBottom="5dp"
    app:backgroundTint="#CFFF"
    app:strokeColor="@color/colorAccent"
    app:strokeWidth="5dp" />

原理说明 #

MaterialButton的描边是绘制在按钮内容区域的边缘，描边的一半会延伸到内容区域之外。TextButton的默认内边距为0dp，这部分延伸出去的描边外侧区域会被backgroundTint填充，所以看起来像是背景色溢出。而OutlinedButton的默认内边距会自动匹配描边宽度，刚好容纳描边的外侧部分，自然就不会有这个问题。

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