MaterialCardView: customize MaterialCardView -> custom icon (svg->xml), when click change bg color and icon

问题

Android studio 3.6

I want when click on MaterialCardView to change custom icon (on the center of MaterialCardView ) and background color of MaterialCardView.

Here my solution:

xml layout:

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

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <View
                        android:id="@+id/cardPaymentViewContainer"
                        android:layout_width="72dp"
                        android:layout_height="72dp"
                        android:background="@drawable/card_payment_view_bg"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                </androidx.constraintlayout.widget.ConstraintLayout>

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


        </androidx.constraintlayout.widget.ConstraintLayout>

in styles/cardViewStyle.xml

<style name="cardViewStyle" parent="Widget.MaterialComponents.CardView">
        <item name="cardBackgroundColor">@color/card_view_bg</item>
    </style>

in res/color/card_view_bg.xml

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

in res/drawable/card_payment_view_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_credit_card_outline_not_select" android:state_selected="false" />
    <item android:drawable="@drawable/ic_credit_card_outline_select" />
</selector>

in my activity handle click:

  override fun onCreate(savedInstanceState: Bundle?) {      
        super.onCreate(savedInstanceState)

        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
            dataBinding.cardPaymentViewContainer.isSelected =
                !dataBinding.cardPaymentViewContainer.isSelected
        })
}

And here result:

and after click:

Nice. It's look good. That is what I need.

The question is: Is this a correct way to customize MaterialCardView ?

来源：https://stackoverflow.com/questions/58640448/materialcardview-customize-materialcardview-custom-icon-svg-xml-when-cli

标签

android

materialcardview