Android Studio CheckBox Animation

Question

I am currently trying to add a settings page with custom checkboxes. The checkboxes extend the entire width of the screen, however the default click animation of these checkboxes makes it look extremely awkward:

I have tried to enclose the checkbox in a linear layout but it does not restrict this animation. Do I need to create a custom animation for this checkbox? If so, how do I restrict the click animation to just the container of the checkbox? Posted below is a portion of the code.

                  <TextView
                        android:id="@+id/emailField"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="10dp"
                        android:layout_marginTop="10dp"
                        android:text="@string/pref_header_push_notifications"
                        android:textColor="@color/settingsText"
                        android:textSize="20sp"/>
                    <View
                        android:layout_width="fill_parent"
                        android:layout_height="1dp"
                        android:layout_marginBottom="15dp"
                        android:layout_marginTop="15dp"
                        android:background="@color/lightgray" />
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:weightSum="9">

                        <CheckBox
                            android:id="@+id/receipts"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_alignParentEnd="true"
                            android:layout_alignParentLeft="true"
                            android:layout_alignParentRight="true"
                            android:layout_alignParentStart="true"
                            android:layout_alignParentTop="true"
                            android:button="@null"
                            android:drawableRight="?android:attr/listChoiceIndicatorMultiple"
                            android:text="@string/pref_title_receipts" />
                    </LinearLayout>


                    <CheckBox
                        android:id="@+id/offers"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentStart="true"
                        android:layout_alignParentTop="true"
                        android:button="@null"
                        android:drawableRight="?android:attr/listChoiceIndicatorMultiple"
                        android:text="@string/pref_title_offers"
                        android:checked="false"
                        android:layout_marginTop="20dp"
                        android:layout_marginBottom="20dp" />


                    <CheckBox
                        android:id="@+id/messages"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentStart="true"
                        android:layout_alignParentTop="true"
                        android:button="@null"
                        android:drawableRight="?android:attr/listChoiceIndicatorMultiple"
                        android:text="@string/pref_title_messages" />
                    <View
                        android:id="@id/separator"
                        android:layout_width="fill_parent"
                        android:layout_height="1dp"
                        android:layout_marginBottom="10dp"
                        android:layout_marginTop="15dp"
                        android:background="@color/lightgray" />

Thank you very much.

EDIT

This is my ripple drawable file

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:exitFadeDuration="@android:integer/config_shortAnimTime"
    android:color="@color/lightgray" >

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_green_light" />
        </shape>
    </item>
</ripple>

and have applied the attribute in as android:src="@drawable/checkbox_ripple_effect"

Still not working, am I doing anything wrong here?

Answer 1

UPDATE: For those who are wondering, I ended up creating a layerlist instead of using a ripple drawable.

checkbox_ripple_element.xml:

<?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="rectangle">
            <solid android:color="@android:color/white" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <item android:drawable="?android:selectableItemBackground" />
</layer-list>

and then in activity_main.xml:

....
android:background="@drawable/checkbox_ripple_effect"
....