Is the thumb switch skewed?

Question

The thumb for my toggle button seems to be distorted (for the on and off state). There were similar issues on github, but it was for people who make libraries support the Switch button in API 4.0 -

main contains a switch button, and an exhaust finger and track are applied to it.

This is what happens:

Here's how it should happen:

switch_track_on.png

main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<Switch
    android:id="@+id/switch1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="112dp"
    android:thumb="@drawable/switch_thumb_selector"
    android:track="@drawable/switch_track_selector"
    android:textOn=""
    android:textOff=""/>

</RelativeLayout>

switch_thumb_selector.xml

<selector>
<item android:drawable="@drawable/switch_thumb">
</item>
</selector>

switch_track_selector.xml

    <selector>
<item android:drawable="@drawable/switch_track_on" android:state_checked="true"/>
<item android:drawable="@drawable/switch_track_off" android:state_checked="false"/>
</selector> 

Answer 1

I had the same requirement. I checked the Android code and found that

• /, ( ).
• + .

.

, , , , .

Thumb:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <!--
        NOTE
        We want a thumb with padding around it inside the track.
        Sadly, a switch draws its track and thumb with the same height ignoring
        any padding of the drawable, so using a shape with padding does not work.
        To overcome, we apply a trick. We create layer list because the
        LayerListDrawable draws itself with taking the top, left, right, bottom
        values into account.
        -->
        <layer-list>
            <item
                android:top="@dimen/switch_thumb_padding"
                android:left="@dimen/switch_thumb_padding"
                android:right="@dimen/switch_thumb_padding"
                android:bottom="@dimen/switch_thumb_padding">
                <!--
                NOTE
                No need to specify size because:
                  - The thumb fills the track in height.
                  - The thumb width is determined from thumb max(on, off) text +
                    text padding + drawable padding.
                -->
                <shape android:shape="oval">
                    <solid android:color="@color/switch_thumb"/>
                    <!-- NOTE did not work, had to set Switch thumbTextPadding to the radius -->
                    <!--
                    <padding android:right="@dimen/switch_thumb_radius"
                             android:left="@dimen/switch_thumb_radius"/>
                    -->
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

( , " " ).

:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <size android:height="@dimen/switch_track_height"/>
            <corners android:radius="@dimen/switch_thumb_radius"/>
            <solid android:color="@color/switch_track_off"/>
        </shape>
    </item>
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <size android:height="@dimen/switch_track_height"/>
            <corners android:radius="@dimen/switch_thumb_radius"/>
            <solid android:color="@color/switch_track_on"/>
        </shape>
    </item>
</selector>

:

<style name="CustomSwitch">
    <!-- NOTE this way the switch will be as width as required minimally -->
    <item name="android:switchMinWidth">0dp</item>
    <item name="android:track">@drawable/switch_track</item>
    <item name="android:thumb">@drawable/switch_thumb</item>
    <item name="android:textOff">@string/switch_thumb_off</item>
    <item name="android:textOn">@string/switch_thumb_on</item>
    <!-- NOTE if set to 0dp, the thumb was not visible even with padding
              of the thumb drawable set to -->
    <item name="android:thumbTextPadding">@dimen/switch_thumb_radius</item>-->
    <!--<item name="android:thumbTextPadding">0dp</item>-->
</style>

, , :

<dimen name="switch_track_height">30dp</dimen>
<dimen name="switch_thumb_radius">15dp</dimen>
<dimen name="switch_thumb_padding">2dp</dimen>

, "" height = radius * 2.

Answer 2

Custom Switch ( IOS switch) :

track_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <solid android:color="#ca120f" />
            <corners android:radius="25dp" />
            <size android:width="2dp" android:height="18dp" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <solid android:color="#27170432" />
            <corners android:radius="25dp" />
            <size android:width="2dp" android:height="18dp" />
        </shape>
    </item>
</selector>

thumb_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <solid android:color="#ffffff" />
            <corners android:radius="100dp" />
            <size android:width="24dp" android:height="25dp" />
            <stroke android:width="4dp" android:color="#0000ffff" />
        </shape>
    </item>
</selector>

:

<Switch
    android:id="@+id/checkboxAttendanceSelector"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_centerVertical="true"
    android:thumb="@drawable/thumb_selector"
    app:track="@drawable/track_selector" />

.

Answer 3

, , , Switch . () , "match_parent", .

: , 'ON' 'OFF'. , , . Android

main.java

protected void onCreate(Bundle savedInstanceState) 
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.toggle_button);

    Switch sw = (Switch) findViewById(R.id.switch1);

            //Both of these need to be used to change the text color to white
            sw.setTextColor(Color.WHITE);
    sw.setSwitchTextAppearance(this, Color.WHITE);

            //Doing this would skew the circle
            //sw.setTextOn("  ");
    //sw.setTextOff("   ");
}

main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="70dp" >

    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:thumb="@drawable/switch_thumb_selector"
        android:track="@drawable/switch_track_selector" />
</LinearLayout>