Search code examples
javaandroidandroid-cardview

How to select one Cardview out of many Cardviews


I want to select Gender from 3 card views and user cannot choose multiple card views user only can select one card view like this:

image shown below

I know I can also use spinner for this work but I want to know how to do with card view

Edited

.......................
<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="select Gender"
    android:textColor="@color/black"
    android:textSize="30sp"
    android:textStyle="bold" />

<androidx.cardview.widget.CardView
    android:id="@+id/maleCardView"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:layout_margin="16dp"
    android:elevation="6dp"
    app:cardElevation="6dp">
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Male"
        android:textStyle="bold"
        android:textColor="@color/black"
        android:layout_gravity="center"
        android:textSize="22sp"/>
    
    
</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
    android:id="@+id/femaleCardView"
    android:layout_width="0dp"
    android:layout_height="70dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Female"/>

</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
    android:id="@+id/otherCardView"
    android:layout_width="0dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Other"/>
    
</androidx.cardview.widget.CardView>
.............

Solution

  • Output

    Output

    Using RadioButton inside CardView doesn't work with RadioGroup you have to individually add each radio button in CardView and handle the check selection and de-selection manually. Try below code :

    Main Layout:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/radioGrpGender"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_centerInParent="true"
        android:layout_marginTop="30dp"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/txtGender"
            android:layout_width="match_parent"
            android:text=""
            android:gravity="center"
            android:layout_height="wrap_content"/>
        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_margin="5dp"
            app:cardCornerRadius="50dp"
            app:cardElevation="7dp"
            android:layout_height="50dp">
            <RadioButton
                android:id="@+id/radioMale"
                android:text="Male"
                android:paddingStart="10dp"
                android:background="@drawable/radio_flat_selector"
                android:button="@android:color/transparent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </androidx.cardview.widget.CardView>
        <androidx.cardview.widget.CardView
    
            android:layout_width="match_parent"
            android:layout_margin="5dp"
            app:cardCornerRadius="50dp"
            android:layout_height="50dp">
            <RadioButton
                android:id="@+id/radioFemale"
                android:text="Female"
                android:paddingStart="10dp"
                android:background="@drawable/radio_flat_selector"
                android:button="@android:color/transparent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </androidx.cardview.widget.CardView>
        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_margin="5dp"
            app:cardCornerRadius="50dp"
            android:layout_height="50dp">
            <RadioButton
                android:id="@+id/radioOther"
                android:text="Other"
                android:paddingStart="10dp"
                android:background="@drawable/radio_flat_selector"
                android:button="@android:color/transparent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </androidx.cardview.widget.CardView>
    </LinearLayout>
    

    radio_flat_selector.xml

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

    radio_flat_selected.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle">
      <corners android:radius="1dp" />
      <solid android:color="#D2FFDF" />
    </shape>
    

    radio_flat_regular.xml

    <?xml version="1.0" encoding="utf-8"?>
     <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
       <solid android:color="#ffffff" />
     </shape>
    

    Main Java Code:

    public class YourActivityName extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {
    
    
    private RadioButton radioMale;
    private RadioButton radioFemale;
    private RadioButton radioOther;
    private TextView txtGender;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.your_layout_nanme);
    
        radioMale = findViewById(R.id.radioMale);
        radioFemale = findViewById(R.id.radioFemale);
        radioOther = findViewById(R.id.radioOther);
        txtGender = findViewById(R.id.txtGender);
    
        radioMale.setOnCheckedChangeListener(this);
        radioFemale.setOnCheckedChangeListener(this);
        radioOther.setOnCheckedChangeListener(this);
    
    }
    
    
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    
        if (isChecked) {
            txtGender.setText(buttonView.getText().toString());
            if (R.id.radioMale == buttonView.getId()) {
                radioFemale.setChecked(false);
                radioOther.setChecked(false);
            } else if (R.id.radioFemale == buttonView.getId()) {
                radioMale.setChecked(false);
                radioOther.setChecked(false);
            } else {
                radioFemale.setChecked(false);
                radioMale.setChecked(false);
            }
        }
      }
    }