Android RadioButton select drawable

Setting page with RadioButton. The RadioButton extends the entire width of the screen. But it shows extremely awkward animation when i click it.

And here is my xml below:

<RadioGroup
    android:id="@+id/xxx"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RadioButton
        android:id="@+id/xxx"
        style="@style/Settings_group.Item"
        android:layout_marginRight="20dp"
        android:button="@null"
        android:drawableRight="?android:attr/listChoiceIndicatorSingle"
        android:text="xxx" />

    <include
        layout="@layout/layout_setting_item_divider"
        android:layout_width="match_parent"
        android:layout_height="0.5dp" />

    <RadioButton
        android:id="@+id/xxx"
        style="@style/Settings_group.Item"
        android:layout_marginRight="20dp"
        android:button="@null"
        android:drawableRight="?android:attr/listChoiceIndicatorSingle"
        android:text="xxx" />

</RadioGroup>

EDIT-1 I hope the ripple effect should shows at single line of RadioButton, but not at center of screen. Just like this

set the radioButton background to android:background="?selectableItemBackground" don't use android:background="?selectableItemBackgroundBorderless"