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?

possible duplicate of [Switchcompat not displaying the Switch](http://stackoverflow.com/questions/26563986/switchcompat-not-displaying-the-switch) — C--, Apr 02 '15 at 17:17
Accepted answer there is to use `Theme.AppCompat` as parent, But I use that only `Theme.AppCompat.NoActionBar`(using toolbar). — user3677365, Apr 02 '15 at 17:28
How about copying the 9patch and other files into the project and make it work? Only if your project doesn't have any issues doing that. — C--, Apr 03 '15 at 12:50
Yes I added them(2 missing 9 patch png's) in drawable-hdpi, but doesn't work. Is this because I tested in emulator with 3.4 inch screen? Do I need to specify something after copying images? — user3677365, Apr 03 '15 at 13:53

Sherry · Answer 1 · 2015-06-28T22:59:21.897

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));

That almost works for me, but can you include definitions from dimens? Margina, width etc. Thanks — shtolik, Sep 23 '15 at 10:49
@shtolik in switch_compat_thumb.xml the item(button, left, top, right) has 4dp, then the first oval shape has 8dp( for width and height) and strock has 4dp width. the second oval shape has again 8dp (for width and height) and 2dp for stroke width. and in switch_compat_track.xml the rectangle shape has corners with radius 7dp and stroke with 2dp width — Sherry, Sep 24 '15 at 18:21

SwitchCompat on pre lollipop devices

1 Answers1