如何去除MaterialButton透明背景下的五边形波纹形状

使用如下布局代码：

<?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="match_parent">


    <androidx.camera.view.PreviewView
        android:id="@+id/viewFinder"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_image_select"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="20dp"
        app:icon="@drawable/baseline_photo_24"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        style="@style/MaterialIconButtonCircledDarkTransparentStyle"
        />


    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_image_capture"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_margin="20dp"
        app:strokeWidth="2dp"
        app:strokeColor="@color/white"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        style="@style/MaterialIconButtonCircledLightTransparentStyle"
        />


</androidx.constraintlayout.widget.ConstraintLayout>

搭配如下样式代码：

<style name="MaterialIconButtonCircledDarkTransparentStyle">
    <item name="android:insetLeft">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetRight">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="iconPadding">0dp</item>
    <item name="iconGravity">textStart</item>

    <item name="background">@color/BlackTransparent</item>
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlayMaterialIconButtonCircular</item>
</style>


<style name="MaterialIconButtonCircledLightTransparentStyle" parent="MaterialIconButtonCircledDarkTransparentStyle">
    <item name="android:backgroundTint">@color/LightGrayTransparent</item>
</style>

<style name="ShapeAppearanceOverlayMaterialIconButtonCircular" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

<color name="LightGrayTransparent">#80C0C0C0</color>
<color name="BlackTransparent">#6A000000</color>

设置透明背景后，按钮会显现出五边形轮廓，调整波纹颜色无法解决该问题，需要隐藏这个五边形形状。

问题根源在于直接使用纯色值作为background属性时，shapeAppearanceOverlay无法对纯色背景生效，导致MaterialButton默认的背景轮廓显现。可以通过以下两种方法解决：

方法一：使用自定义圆形Drawable作为背景 #

1. 在res/drawable目录下创建深色圆形背景文件circle_black_transparent.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/BlackTransparent" />
</shape>

2. 创建浅色版本的circle_light_gray_transparent.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/LightGrayTransparent" />
</shape>

3. 修改样式文件，替换原background和backgroundTint设置：

<style name="MaterialIconButtonCircledDarkTransparentStyle">
    <item name="android:insetLeft">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetRight">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="iconPadding">0dp</item>
    <item name="iconGravity">textStart</item>

    <item name="android:background">@drawable/circle_black_transparent</item>
</style>

<style name="MaterialIconButtonCircledLightTransparentStyle" parent="MaterialIconButtonCircledDarkTransparentStyle">
    <item name="android:background">@drawable/circle_light_gray_transparent</item>
</style>

方法二：正确使用MaterialButton的backgroundTint属性 #

MaterialButton的shapeAppearanceOverlay仅对其默认背景Drawable生效，因此不要直接设置background，改用backgroundTint：

<style name="MaterialIconButtonCircledDarkTransparentStyle">
    <item name="android:insetLeft">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetRight">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="iconPadding">0dp</item>
    <item name="iconGravity">textStart</item>

    <item name="backgroundTint">@color/BlackTransparent</item>
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlayMaterialIconButtonCircular</item>
    <!-- 可选：移除默认阴影动画，避免轮廓显现 -->
    <item name="android:stateListAnimator">@null</item>
</style>

<style name="MaterialIconButtonCircledLightTransparentStyle" parent="MaterialIconButtonCircledDarkTransparentStyle">
    <item name="backgroundTint">@color/LightGrayTransparent</item>
</style>

以上两种方法都能彻底消除五边形轮廓，让按钮保持透明圆形样式。

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