在 MaterialCardView 的中心设置自定义图标答案

【问题标题】：Set custom icon in the center of MaterialCardView在 MaterialCardView 的中心设置自定义图标
【发布时间】：2020-02-26 14:29:38
【问题描述】：

我无法在 MaterialCardView 的中心设置自定义图标。这是我的 xml 布局

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/cardPaymentContainer"
    android:layout_width="0dp"
    android:layout_height="200dp"
    android:layout_margin="@dimen/default_margin"
    android:layout_marginStart="@dimen/button_margin"
    android:layout_marginEnd="@dimen/button_margin"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/toolBarContainer">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/cardPaymentCardView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:checkable="true"
        android:clickable="true"
        android:focusable="true"
        app:cardCornerRadius="@dimen/card_view_cornder_radius"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

处理点击活动：

dataBinding =
            DataBindingUtil.setContentView<PaymentActivityBinding>(this, R.layout.payment_activity)
        dataBinding.setHandler(this)
        dataBinding.cardPaymentCardView.setOnClickListener({
            Debug.d(TAG, "cardPaymentCardView: onClick")
            dataBinding.cardPaymentCardView.isChecked = !dataBinding.cardPaymentCardView.isChecked
        })

这里的结果：

未点击：

然后点击：

但我需要将自定义图标放在 CardView 的中心。像这样：

我将 SVG 转换为 xml（通过 Android Studio）

我试试这个，但图标不显示，也没有显示在 cardView 的中心：

 <com.google.android.material.card.MaterialCardView
                android:id="@+id/cardPaymentCardView"
                style="@style/cardViewStyle"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:checkable="true"
                android:clickable="true"
                android:focusable="true"
                app:cardCornerRadius="@dimen/card_view_cornder_radius"
                app:checkedIcon="@drawable/ic_credit_card_outline_select"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

            </com.google.android.material.card.MaterialCardView>

【问题讨论】：

标签： android material-design android-cardview material-components material-components-android

【解决方案1】：

简而言之，您无法使用组件提供的标准checkedIcon 来实现它。您必须在 Card 中添加一个可绘制/视图。

使用 1.1.0、1.2.1 版本 您可以：

使用 app:checkedIcon 属性定义自定义图标
使用 app:checkedIconTint 属性为图标定义颜色选择器

盯着 1.3.0-alpha03 你也可以定义：

app:checkedIconSize：图标大小（默认24dp）
app:checkedIconMargin：图标的边距（默认8dp）

要在 1.2.x 和 1.1.0 版本中实现相同的行为，您可以执行以下操作（（但我建议您避免这种解决方法）：

覆盖dimens.xml中添加的选中图标使用的边距：

    <!-- Margin between the checked icon and the card -->
    <dimen name="mtrl_card_checked_icon_margin">xxdp</dimen>

覆盖dimens.xml中添加的选中图标使用的大小：

    <!-- Size of the icon to be placed when the card is checked -->
    <dimen name="mtrl_card_checked_icon_size">xxdp</dimen>

【讨论】：

非常感谢，@Gabriele。我在这个问题上花了几个小时，你的回答帮助了我。我什至在 Github 上发布了一个错误报告，github.com/material-components/material-components-android/…。
谢谢@Gabriele。自定义尺寸是我一直在寻找的。这应该在按钮的公共 API 上。不幸的是，这个 hack 是我们拥有的最好的自动取款机。

【解决方案2】：

尝试使用类似这样的<selector>：

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

【讨论】：

这是我的解决方案stackoverflow.com/questions/58640448/…。这是自定义 MaterialCardView 的正确方法吗？

【解决方案3】：

试试app:checkedIconMargin

<com.google.android.material.card.MaterialCardView
    android:id="@+id/cardPaymentCardView"
    style="@style/cardViewStyle"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:checkable="true"
    android:clickable="true"
    android:focusable="true"
    app:cardCornerRadius="@dimen/card_view_cornder_radius"
    app:checkedIcon="@drawable/ic_credit_card_outline_select"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"

    app:checkedIconMargin="10dp"

    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

</com.google.android.material.card.MaterialCardView>

【讨论】：