How to create a custom radio button Android

Question

I'm trying to make a custom radio button... I'm trying to guide myself in some tutorials here in the community but I'm not successful...

Below I'll leave an image of how I want my radio button to be checked/unchecked.

and then I'll leave my code as it is so far:

<RadioButton
            android:id="@+id/btn_language_english_us"
            android:layout_width="match_parent"
            android:layout_height="34dp"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:button="@drawable/radio_bg"
            android:fontFamily="@font/sansation"
            android:text="@string/us_english"
            android:textColor="@color/white"
            android:textSize="16sp" />

radio_bg.xml

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

@drawable/circle_indicator_blue and @drawable/circle_indicator_white are Vector assets

and here is the uncked/checked result

could someone help me where I'm doing wrong? my intention is to leave as the first image mentioned above.

Answer 1

Instead using vector asset you may use selector item . Chane your circle_indicator_blue.xml code as below .

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <stroke android:width="5dp" android:color="@android:color/white"/>
            <size android:width="24dp" android:height="24dp" />
            <solid android:color="@android:color/holo_blue_light" />
        </shape>
    </item>
</selector>

And circle_indicator_white.xml as below -

   <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval" android:tint="@android:color/white">
            <size android:width="24dp" android:height="24dp"/>
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="20dp"/>
        </shape>
    </item>
</selector>

Output-