Stylizing the radio buttons Using cardview in android

Question

I am using radio buttons in a radio group -It works perfectly

   <RadioGroup
    android:layout_below="@id/textview_question"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_marginTop="30dp"
    android:id="@+id/radgrp">
    <RadioButton
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="10dp"
        android:textSize="20dp"
        android:layout_weight="1"
        android:id="@+id/radiobutton_1"
        android:text="option"
        android:textStyle="italic"/>


    <RadioButton
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="10dp"
        android:textSize="20dp"
        android:layout_weight="1"
        android:id="@+id/radiobutton_2"
        android:text="option"
        android:textStyle="italic"/>

    <RadioButton
        android:id="@+id/radiobutton_3"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:text="option"
        android:textSize="20dp"
        android:textStyle="italic"
        />
    <RadioButton
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:textSize="20dp"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:id="@+id/radiobutton_4"
        android:text="option"/>

</RadioGroup>

But whenever I try to use some styling by surrounding the radio buttons by the cardview- The radio group loses all its functionality.. I am talking about the situation when I use the following code -

 <RadioGroup
    android:layout_below="@id/textview_question"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="30dp"
android:id="@+id/radgrp">
<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="10dp"
    app:cardCornerRadius="20dp"
    android:layout_marginRight="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginBottom="10dp">
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<RadioButton
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp"
    android:textSize="20dp"
    android:layout_weight="1"
    android:id="@+id/radiobutton_1"
    android:text="option"
    android:textStyle="italic"/>
    </LinearLayout>
</android.support.v7.widget.CardView>
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="10dp"
        app:cardCornerRadius="20dp"
        android:layout_marginRight="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginBottom="10dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
<RadioButton
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp"
    android:textSize="20dp"
    android:layout_weight="1"
    android:id="@+id/radiobutton_2"
    android:text="option"
    android:textStyle="italic"/>
    </LinearLayout>
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="10dp"
        app:cardCornerRadius="20dp"
        android:layout_marginRight="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginBottom="10dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <RadioButton
        android:id="@+id/radiobutton_3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:text="option"
        android:textSize="20dp"
        android:textStyle="italic"
        />
    </LinearLayout>
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="10dp"
        app:cardCornerRadius="20dp"
        android:layout_marginRight="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginBottom="10dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

<RadioButton
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textSize="20dp"
    android:layout_margin="10dp"
    android:layout_weight="1"
    android:id="@+id/radiobutton_4"
    android:text="option"/>
    </LinearLayout>
    </android.support.v7.widget.CardView>
</RadioGroup>

Now here is the problem how do I stylize the Radio buttons by giving them an aero feel like cardview..As the above code is crating problem in the functionality of the Radio group(erros includes- Non working of clearCheck() method and also multiple check occuring..etc). Please help me to style the radio buttons in my desired way (i.e. giving each radio button a card like feel)

Answer 1

Using different radio buttons of the same radio groups in different cardview layouts will not work. So your approach is wrong. Instead you can try placing textview along with a single radio button. And in the Java code you can check which one is checked and even disable other radio buttons. And this is only the simplest way you can achieve your goal following your approach.