在ToggleButton上添加BackgroundTint会弄乱Background本身

如何解决在ToggleButton上添加BackgroundTint会弄乱Background本身

我有一个包含多个ToggleButtons和一个自定义布局的布局。它们每个必须具有不同的颜色。

为实现这一点，我创建了一个选择器，其中包含2个项目，分别用于检查和未检查状态。 che过的物品内部具有可绘制的内容。所以我有这样的xml：

<ToggleButton
        android:id="@+id/color_picker_btn_1"
        android:layout_width="38dp"
        android:layout_height="38dp"
        android:textOff=""
        android:textOn=""
        android:layout_marginEnd="12dp"
        android:checked="true"
        android:background="@drawable/selector_button_color"/>

selector_button_color：

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

shape_circle_checked：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval"
        android:visible="true">
        <solid android:color="@color/colorPrimary" />
    </shape>
  </item>
  <item android:drawable="@drawable/ic_check">
  </item>

问题在于，当我在ToggleButton上应用背景色时，在“已检查”状态下看不到可绘制对象。

我想知道是否有一种方法可以选择每个ToggleButton的背景色，而不会将背景本身与可绘制对象弄混。否则，我将必须为每个ToggleButton创建一个自定义背景。

非常感谢您！

解决方法

为了解决这个问题，我用圆圈和支票创建了一个SVG。这样就可以了！

,

您可以使用类似的内容：

<com.google.android.material.button.MaterialButton
    android:id="@+id/toogleButtton1"
    style="@style/circleButton.Green"
    android:layout_width="48dp"
    android:layout_height="48dp"
    />

<com.google.android.material.button.MaterialButton
    android:id="@+id/toogleButtton2"
    style="@style/circleButton.Red"
    android:layout_width="48dp"
    android:layout_height="48dp"
    />

<com.google.android.material.button.MaterialButton
    android:id="@+id/toogleButtton3"
    style="@style/circleButton"
    android:layout_width="48dp"
    android:layout_height="48dp"
    />

具有：

<style name="circleButton" parent="Widget.MaterialComponents.Button">
    <item name="shapeAppearanceOverlay">@style/circle</item>
    <item name="icon">@drawable/ic_add_24px</item>
    <item name="iconTint">@color/custom_button_icontint_selector</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="android:padding">12dp</item>
    <item name="android:checkable">true</item>
</style>

<style name="circleButton.Green">
    <item name="materialThemeOverlay">@style/ThemeOverlay.Green</item>
</style>

<style name="ThemeOverlay.Green" parent="">
    <item name="colorPrimary">@color/green500</item>
</style>

<style name="circleButton.Red">
    <item name="materialThemeOverlay">@style/ThemeOverlay.Red</item>
</style>

<style name="ThemeOverlay.Red" parent="">
    <item name="colorPrimary">@color/red600</item>
</style>

<!-- Circular ShapeAppearance -->
<style name="circle">
    <item name="cornerSize">50%</item>
</style>

<!-- custom selector for icon tint to hide the icon when unchecked -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="?attr/colorOnPrimary" android:state_checked="true"/>
    <item android:color="?attr/colorPrimary" android:state_checked="false"/>
</selector>