Creating a custom drawable selector?

Question

I wanted to create some custom drawable selectors for some radio buttons I wanted to have. Below is an example of how I would want my drawable selectors I would want. They are the Public and the Followers selectors as shown below:

The issue is I am having trouble styling my selectors in this manner and I can't seem to figure out why I cant get an outline of grey with a background of white on non-selected radio buttons.

This was my attempt:

privacy_toggle_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
    <RadioGroup
    android:layout_margin="16dp"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:checkedButton="@+id/offer"
        android:id="@+id/privacy_toggle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/pick_out_line"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/public_toggle"
            android:background="@drawable/toggle_widget_background"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="@string/publicString"
            android:textAllCaps="true"
            android:textSize="18sp"
            android:textColor="@color/white" />

        <RadioButton
            android:id="@+id/followers_toggle"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/toggle_widget_background"
            android:button="@null"
            android:gravity="center"
            android:text="@string/followers"
            android:checked="true"
            android:textSize="18sp"
            android:textAllCaps="true"
            android:textColor="@color/white" />
    </RadioGroup>

drawable/pick_out_line.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="2dp" />
    <solid android:color="@color/teal" />
    <stroke
        android:width="5dp"
        android:color="@color/material_color_grey_400" />
</shape>

toggle_widget_background.xml:

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

I thought in pick_out_line.xml, setting the stroke to 5dp should make the border grey but it does not show up as grey on the RadioButton. Furthermore, I can't seem to figure out how to make the non-selected RadioButton with a white background with grey text. If anyone could help me out that'd be great. Thanks.

Answer 1

You have it wrong. There should be no background for the group. Make 2 versions of pick_out_line.xml, one pick_out_line_selected, and one pick_out_line_unselected.xml. Design each one how you want it in that state. Then edit your toggle_widget_background.xml file, and the android:drawable should be the 2 above files, not the colors. Set this file as the background of your toggle.