Single choice checkable cardView

Question

I have implement a checkable CardView by following https://medium.com/@AlbinPoignot/checkable-cardview-in-all-android-versions-7124ca6df1ab

However, I need to let the user select just one option. To clarify, if one is already checked, and the user select other, I need to deselect the previous option.

Furthermore, I need to when return the selected CardView keeps the checked state.

Could someone help me with this 2 tasks? Below is my implementation:

    public class CheckableCardView extends CardView implements Checkable {

        private static final int[] CHECKED_STATE_SET = {
                android.R.attr.state_checked
        };

        private boolean isChecked;
        private TextView itemText;

        public CheckableCardView(Context context) {
            super(context);
            init(null);
        }

        public CheckableCardView(Context context, AttributeSet attrs) {
            super(context, attrs);
            init(attrs);
        }

        public CheckableCardView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init(attrs);
        }

        private void init(AttributeSet attrs) {
            LayoutInflater.from(getContext()).inflate(R.layout.checkable_card_view, this, true);

            setClickable(true);
            setChecked(false);

            setCardBackgroundColor(ContextCompat.getColorStateList(getContext(), R.color.selector_card_view_background));

            if (attrs != null) {
                TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.CheckableCardView, 0, 0);
                try {
                    String text = ta.getString(R.styleable.CheckableCardView_card_text);
                    itemText = (TextView) findViewById(R.id.text);

                    if (text != null) {
                        setText(text);
                    }

                } finally {
                    ta.recycle();
                }
            }
        }

        public void setText(String text){
            itemText.setText(text);
        }

        @Override
        protected int[] onCreateDrawableState(int extraSpace) {
            final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);
            if (isChecked()) {
                mergeDrawableStates(drawableState, CHECKED_STATE_SET);
            }
            return drawableState;
        }

        @Override
        public boolean performClick() {
            toggle();
            return super.performClick();
        }

        @Override
        public void setChecked(boolean checked) {
            this.isChecked = checked;
        }

        @Override
        public boolean isChecked() {
            return isChecked;
        }

        @Override
        public void toggle() {
            setChecked(!this.isChecked);
        }
    }

Answer 1

You can also use the MaterialCard provided by the Material Components Library.
This card implement a Checkable interface by default.

Just use the android:checkable attribute in the xml:

   <com.google.android.material.card.MaterialCardView
        android:checkable="true"
        ..>

or setCheckable(true) in your code.

A way of switching to checked state is:

final MaterialCardView cardView = findViewById(R.id.card);
cardView.setOnClickListener(new View.OnClickListener() {
  @Override public void onClick(View view) {
    //cardView.setChecked(!cardView.isChecked());
    cardView.toggle();
  }
});

Answer 2

For those who are looking for an easy solution to this problem, here is the code:

    cardONE.setOnClickListener {
        cardONE.isChecked = true // set the current card to checked
        cardTWO.isChecked = false // set the other card to unchecked
    }

    cardTWO.setOnClickListener {
        cardTWO.isChecked = true
        cardONE.isChecked = false
    }

Or the function:

fun setChecked(checkCard: MaterialCardView, uncheckCard: MaterialCardView){
    checkCard.isChecked = true
    uncheckCard.isChecked = false
}

cardONE.setOnClickListener {
    setChecked(it as MaterialCardView, cardTWO)
}

It's maybe not the most "elegant" way, but it works like a charm.

Needed Dependencies

implementation "com.google.android.material:material:1.2.0"

XML File

<com.google.android.material.card.MaterialCardView
        android:id="@+id/cardONE"
        <!-- THIS IS NEEDED -->
        android:checkable="true"
        android:clickable="true"
        android:focusable="true" />