making switch from Check Box with xml in android

i would like to make my CheckBox switch like so i made 2 drawables with simple xml and selector , but i don't see anything in my checkbox , i guess it is the big dp i use in my drawable , how can i make it scale nicely ?

this is my on switch (the off is the same just changed the second layer from right to left ):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://ift.tt/nIICcg">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/gray" />
            <corners android:radius="99dp" />
        </shape>
    </item>

    <item android:right="150dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/green" />
            <size android:width="50dp" />
            <corners android:radius="99dp" />
        </shape>
    </item>
</layer-list>

this is my selector :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://ift.tt/nIICcg">
    <item android:drawable="@drawable/toggle_on" android:state_checked="true" />
    <item android:drawable="@drawable/toggle_off" android:state_checked="false" />
</selector>

is this is my checkbox

    <CheckBox
        android:id="@+id/alert_promo_toggle_button"
        android:layout_width="50dp"
        android:button="@drawable/toggle_selector"
        android:layout_height="30dp"
        android:checked="true" />

in the preview of my checkbox i see nothing , but in the preview of my drawable is see the draw as i wish .