Android custom radiobutton

问题

I want to make custom radio button.I have created a drawable for normal(radio_normal) state.But I find it difficult to create a shape for checked state(radio_pressed).I have tried creating my desired way.But didn't work out well.I don't know if I have done it the right way.For checked state the shape should look like this.The outer border and the inner circle must be white in color.Can anybody help me with that?

radio_normal:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:useLevel="false">
    <solid
        android:color="#2196f3"></solid>

</shape>

radio_pressed:

 <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
    <shape android:shape="oval"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <solid
            android:color="@android:color/transparent">
        </solid>
        <size
             android:height="60dp"
            android:width="60dp">
       </size>
      <stroke
          android:color="#ffffff"
          android:width="1dp"
          >
    </stroke>
    </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid
                    android:color="#ffffff">
                </solid>
            </shape>
            <size
                android:height="30dp"
                android:width="30dp">
    </size>
        </item>
    </layer-list>

radio_bg:

<?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/radio_pressed"
    >
</item>
    <item
        android:state_checked="false"
        android:drawable="@drawable/radio_normal"
        >
    </item>
</selector>

activity_main:

<RadioButton
        android:id="@+id/radio"
        android:layout_centerInParent="true"
        android:layout_width="10dp"
        android:button="@drawable/radio_bg"
        android:layout_marginTop="100dp"
        android:layout_height="10dp"
        />

回答1:

This is about as close as I can get you, hope it works on your side and that it helps :)

radio_normal:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:useLevel="false">
    <solid android:color="#2196f3" />
    <size
        android:width="25dp"
        android:height="25dp" />
</shape>

radio_pressed:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:padding="3dp">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="ring"
            android:useLevel="false">
            <solid android:color="@android:color/white" />
            <size
                android:width="25dp"
                android:height="25dp" />
        </shape>
    </item>
    <item
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp">
        <shape
            android:shape="oval"
            android:useLevel="false">

            <solid android:color="@android:color/white" />
        </shape>
    </item>
</layer-list>

radio_bg:

<?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/radio_pressed"
        >
    </item>
    <item
        android:state_checked="false"
        android:drawable="@drawable/radio_normal"
        >
    </item>
</selector>

activity_main:

<RadioButton
    android:id="@+id/radio"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="100dp"
    android:button="@drawable/radio_bg"/>

Let me know if this worked for you :)

回答2:

Is this maybe what you were looking for ?

radio_pressed:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="ring"
            android:useLevel="false">
            <solid android:color="@android:color/white" />
            <size
                android:width="10dp"
                android:height="10dp" />
        </shape>
    </item>
    <item
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp"
        android:top="3dp">
        <shape
            android:shape="oval"
            android:useLevel="false">

            <solid android:color="@android:color/white" />
        </shape>
    </item>
</layer-list>

Reaction to comment:

The code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="ring"
            android:useLevel="false">
            <solid android:color="@android:color/white" />
            <size
                android:width="150dp"
                android:height="150dp" />
        </shape>
    </item>
    <item
        android:bottom="50dp"
        android:left="50dp"
        android:right="50dp"
        android:top="50dp">
        <shape
            android:shape="oval"
            android:useLevel="false">

            <solid android:color="@android:color/white" />
        </shape>
    </item>
</layer-list>

Note: The only changes made was in the sizes to accomodate your imageview of 150dp X 150dp. When using it for your radio button I highly reccomend using the 10x10dp sizes

来源：https://stackoverflow.com/questions/46533219/android-custom-radiobutton