RadioButton focus background shape

Question

I want to add focus ripple effect to whole RadioButton, but there is something strange is happening to it when I try to use ripple effect with highlight. In the picture, left is what I get and right is what I want:

background_drawable:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorAccent">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</ripple>

styles.xml

<style name="RadioButtonStyle" parent="Widget.AppCompat.CompoundButton.RadioButton">
        <item name="android:background">@drawable/radio_button_background</item>
    </style>

This happens only If I try to use ripple effect and not if I try to use only shape with selector and state_focused=true as background. For now my workaround is to use warpper View class for RadioButton and set background into it. Is there any way to get background as in the picture but without any additional code? Thanks.

Answer 1

The solution is to set the button attribute to null and set the drawableStart attribute in styles for the radio button:

<style name="RadioButtonStyle" parent="Widget.AppCompat.CompoundButton.RadioButton">
        <item name="android:button">@null</item>
        <item name="android:drawableStart">@drawable/radio_button_selector</item>
        <item name="android:drawablePadding">4dp</item>
        <item name="android:background">@drawable/radio_button_background</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:paddingStart">8dp</item>
        <item name="android:paddingEnd">8dp</item>
        <item name="android:paddingTop">11dp</item>
        <item name="android:paddingBottom">11dp</item>
    </style>

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="radioButtonStyle">@style/RadioButtonStyle</item>
        <item name="android:radioButtonStyle">@style/RadioButtonStyle</item>
    </style>

After that focus works as aspected and You can add background to the radio button as You want