How to fix custom switch appearance on Android 4

Question

I have a custom switch element which looks great on Android 5 and 6. But there is a problem with Android 4. The question is how to keep shape of the toggle circular?

Android 5,6. Picture 1

Android 4. Picture 2

Here is my code:

<Switch
            android:id="@+id/row_device_switch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:textOn="ON"
            android:thumb="@drawable/customswitchselector"
            android:track="@drawable/custom_track"
            android:textOff="OFF"
            android:layout_marginRight="14dp"
            android:switchMinWidth="@dimen/custom_switcher_track_width"
            />

custom_track.xml

    <?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="rectangle"
            android:visible="true"
            android:dither="true"
            android:useLevel="false"
            >
            <corners
                android:radius="@dimen/cutsom_switcher_track_radius"/>
            <size
                android:width="@dimen/custom_switcher_track_width"
                android:height="@dimen/custom_switcher_track_height" />
            <stroke
                android:width="@dimen/custom_switcher_stroke_thickness"
                android:color="@android:color/white"
                />
        </shape>
    </item>
    <item
        android:left="@dimen/custom_switcher_track_line_horizontal_margin"
        android:right="@dimen/custom_switcher_track_line_horizontal_margin"
        >
        <shape
            android:shape="line"
            >
            <stroke
                android:width="@dimen/custom_switcher_екфсл_thickness"
                android:color="@android:color/white"
                />
        </shape>
    </item>
</layer-list>

customswitchselector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true">
        <layer-list>
            <item>
                <shape
                    android:shape="oval"
                    android:visible="true"
                    android:dither="true"
                    android:useLevel="false"
                    >
                    <solid
                        android:color="@color/colorListEnd"
                        />
                    <size
                        android:width="@dimen/custom_switcher_circle_size"
                        android:height="@dimen/custom_switcher_circle_size" />
                    <stroke
                        android:width="@dimen/custom_switcher_stroke_thickness"
                        android:color="@android:color/white"/>
                </shape>
            </item>
            <item
                android:left="@dimen/custom_switcher_between_circles_margin"
                android:right="@dimen/custom_switcher_between_circles_margin"
                android:top="@dimen/custom_switcher_between_circles_margin"
                android:bottom="@dimen/custom_switcher_between_circles_margin"
                >
                <shape
                    android:shape="oval"
                    >
                    <size
                        android:width="@dimen/custom_switcher_inner_circle_size"
                        android:height="@dimen/custom_switcher_inner_circle_size" />
                    <solid
                        android:color="@android:color/white"/>
                </shape>
            </item>
        </layer-list>
    </item>
    <item android:state_checked="false">
        <layer-list>
            <item>
                <shape
                    android:shape="oval"
                    android:visible="true"
                    android:dither="true"
                    android:useLevel="false">

                    <solid
                        android:color="@color/colorListEnd"
                        />
                    <size
                        android:width="@dimen/custom_switcher_circle_size"
                        android:height="@dimen/custom_switcher_circle_size" />
                    <stroke
                        android:width="@dimen/custom_switcher_stroke_thickness"
                        android:color="@android:color/white"/>
                </shape>
            </item>
            <item
                android:left="@dimen/custom_switcher_between_circles_margin"
                android:right="@dimen/custom_switcher_between_circles_margin"
                android:top="@dimen/custom_switcher_between_circles_margin"
                android:bottom="@dimen/custom_switcher_between_circles_margin"
                >
                <shape
                    android:shape="oval">
                    <size
                        android:width="@dimen/custom_switcher_inner_circle_size"
                        android:height="@dimen/custom_switcher_inner_circle_size"
                        />
                    <stroke
                        android:width="@dimen/custom_switcher_stroke_thickness"
                        android:color="@android:color/white"
                        />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Answer 1

There are several small issues with Switch making it not work uniformly. In your case you need to use android:textOff and android:textOn with value "". Otherwise the width of the track and of the thumbs will be adjusted to hold the text. Also you need to define android:thumbTextPadding to assure the size of the thumb. The drawable is just a background and doesn't effect it directly.

<Switch
    android:id="@+id/row_device_switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_marginRight="14dp"
    android:switchMinWidth="@dimen/custom_switcher_circle_radius"
    android:textOff=""
    android:textOn=""
    android:thumb="@drawable/customswitchselector"
    android:thumbTextPadding="@dimen/switch_thumb_radius"
    android:track="@drawable/custom_track" />

The @dimen/custom_switcher_circle_radius should have a value of half of the @dimen/custom_switcher_circle_size dimension.