如何创建带有图标和文本的切换按钮

Question

在 android 中构建切换按钮的最佳方法是什么，如下图所示。 我花的时间比我想承认的要多，但到目前为止似乎不可能同时获得圆形背景和图标。

我的布局

            <ToggleButton
            android:id="@+id/addButton"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="@drawable/button_bg_rounded_corners"
            android:button="@drawable/check"

查看

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/app_checkmark"
        android:state_checked="true" />
    <item android:drawable="@drawable/app_close"
        android:state_checked="false"/>
    </selector>

BG

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">

        <shape android:shape="rectangle" >
            <solid android:color="@color/appcolor_yellow" />
            <corners android:radius="20dp" />
        </shape>
    </item>
    <item android:state_checked="false" >
        <shape android:shape="rectangle" >
            <solid android:color="@color/appcolor_green"/>
            <corners android:radius="20dp" />
        </shape>
    </item>
</selector>

我得到了什么

Answer 1

您可以将MaterialButton与android:checkable="true"一起使用：

   <com.google.android.material.button.MaterialButton
        android:checkable="true"
        app:backgroundTint="@drawable/btn_toggle_background"
        app:iconGravity="start"
        app:icon="@drawable/..."
        app:cornerRadius="20dp"
        ../>

其中btn_toggle_background是一个选择器

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:color="@color/..." />
    <item android:state_checked="true" android:color="@color/..." />
</selector>

和：

    button.addOnCheckedChangeListener { button, isChecked ->
        if (isChecked){
            button.icon = ContextCompat.getDrawable(this,R.drawable.xxx)
        } else {
            button.icon = ContextCompat.getDrawable(this,R.drawable.xxx)
        }
    }