在 ToggleButton 上添加 BackgroundTint 会弄乱背景本身答案

【问题标题】：Adding a BackgroundTint on a ToggleButton messes the Background itself在 ToggleButton 上添加 BackgroundTint 会弄乱背景本身
【发布时间】：2021-01-08 20:23:04
【问题描述】：

我有一个带有多个 ToggleButtons 的布局和自定义布局。它们中的每一个都必须有不同的颜色。

为了实现这一点，我为选中和未选中状态创建了一个包含 2 个项目的选择器。已检查的项目内部有一个可绘制对象。所以我有这样的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"/>

选择器按钮颜色：

<?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 上应用背景色调时，我在 Checked 状态下看不到可绘制对象。

我想知道是否有一种方法可以选择每个ToggleButton 的背景颜色，而不会将背景本身与drawable 混淆。否则我将不得不为每个ToggleButton 创建一个自定义背景。

非常感谢！

【问题讨论】：

我猜背景色调同时为椭圆形和刻度着色。

标签： android android-studio android-drawable android-button togglebutton

【解决方案1】：

为了解决这个问题，我创建了一个带有圆圈和检查的 SVG。这样就行了！

【讨论】：

【解决方案2】：

你可以使用类似的东西：

<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>

【讨论】：