SwitchCompat on pre lollipop devices

Question

I am trying to implement SwitchCompat from AppCompat but it looks different on different version devices. On Lollipop & Froyo it looks good but on Gingerbread to KitKat it doesn't look like a switch.

Code:

<android.support.v7.widget.SwitchCompat
        android:id="@+id/label_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff="No"
        android:textOn="Yes"
        android:checked="false" />

Can I make these switches look the same across all versions or at least make them look like a switch?

Answer 1

Min sdk of my application was GingerBread and I had the same problem, finally I found the solution. In order to make SwitchCompat consistent in all android versions I used two drawable at res/drawable folders, one for thumb and one for track. and assign them to SwitchCompat in java code not in xml. Here is the code you should use.

SwitchCopmat widget:

    <android.support.v7.widget.SwitchCompat
android:id="@+id/label_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

drawable for thumb, switch_compat_thumb.xml

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:bottom="@dimen/switch_compat_thumb_margin"
    android:left="@dimen/switch_compat_thumb_margin"
    android:right="@dimen/switch_compat_thumb_margin"
    android:top="@dimen/switch_compat_thumb_margin">

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true">
            <shape android:shape="oval">
                <size
                    android:width="@dimen/switch_compat_thumb_size"
                    android:height="@dimen/switch_compat_thumb_size"/>
                <solid android:color="@android:color/red"/>
            </shape>
        </item>

        <item>
            <shape android:shape="oval">
                <size
                    android:width="@dimen/switch_compat_thumb_size"
                    android:height="@dimen/switch_compat_thumb_size"/>
                <stroke
                    android:width="@dimen/switch_compat_thumb_stroke_width"
                    android:color="@android:color/red"/>
                <solid android:color="@android:color/transparent" />
            </shape>
        </item>
    </selector>
</item>

drawable for track, switch_compat_track.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="@dimen/switch_compat_track_radius"/>
<stroke
    android:width="@dimen/switch_compat_track_stroke_width"
    android:color="@android:color/red"/>
<solid android:color="@android:color/transparent" />

and then, after finding it in java, assign thumb and track to SwitchCompat in java code:

  final SwitchCopmat switchCompat = (SwitchCopmat) findViewById(R.id.label_switch);

    //add thumb and track drawable in java since it doesn't work on xml for gingerbread
    switchCompat.setThumbDrawable(getResources().getDrawable(R.drawable.switch_compat_thumb));
    switchCompat.setTrackDrawable(getResources().getDrawable(R.drawable.switch_compat_track));