Swich background images stretching while customizing in android

Question

I am trying to customize Switch. I used xml files to achieve that switch_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/cd_filled_toggle_round_bg" android:state_checked="true"/>
<item android:drawable="@drawable/cd_filled_toggle_round_bg" android:state_checked="false"/>
<item android:drawable="@drawable/cd_filled_toggle_round_bg"/>
</selector>

and track_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/cd_filled_toggle_bg" android:state_checked="true"/>
<item android:drawable="@drawable/cd_filled_toggle_white_bg" android:state_checked="false"/>
<item android:drawable="@drawable/cd_filled_toggle_white_bg"/>
</selector>

and the code for switch is

<Switch
android:id="@+id/toggle_email_diss_invi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:textOff=""
android:textOn=""
android:thumb="@drawable/switch_bg_selector"
android:thumbTextPadding="25dp"
android:track="@drawable/track_bg_selector"
/>

the background image I used is sliced for all xxhdpi, xhdpi, hdpi and mdpi but the problem is that the images are getting stretched. I spent many hours to resolve this issue but didn't find appropriate solution. I am attaching the screenshot that how my switch is looking.

and how it should look like this

below are my drawable i am using

Answer 1

I was implementing the same switch button.I also end up with a streched background as yours.The reason for this streching is the fact that image of thumb is not compatible with track images. The thumb image in my case was having too much left and right padding.I also tried 9patch images but it didn't worked. I came up following solutions:

1. using drawables of very small size such that when switch track and thumb gets the image, it automatically looks like switch you asked for.
2. converted my track svg to vector drawable and using a png for my thumb. That also worked.

But finally I found the best solution and used it instead of above workarounds

copy these xml files into your drawable folder.

switch_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="25dp"
android:height="25dp"
android:viewportWidth="25"
android:viewportHeight="25">

<group
        android:translateX="-59.000000"
        android:translateY="-103.000000">
    <group
            android:translateX="40.000000"
            android:translateY="103.000000">
        <path
            android:fillColor="#FFFFFF"
            android:fillType="evenOdd"
            android:strokeWidth="1"
            android:pathData="M 31.5 4 C 36.1944203736 4 40 7.80557962644 40 12.5 C 40 17.1944203736 36.1944203736 21 31.5 21 C 26.8055796264 21 23 17.1944203736 23 12.5 C 23 7.80557962644 26.8055796264 4 31.5 4 Z" />
    </group>
</group>
</vector>

switch_thumb_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/switch_thumb">
    </item>
</selector>

switch_track_off.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="44dp"
android:height="25dp"
android:viewportWidth="44"
android:viewportHeight="25">

<group
        android:translateX="-40.000000"
        android:translateY="-103.000000">
    <group
            android:translateX="40.000000"
            android:translateY="103.000000">
        <path
            android:fillColor="#FFF17B02"
            android:fillType="evenOdd"
            android:strokeWidth="1"
            android:pathData="M12.5,0 L31.5,0 C38.4035594,-1.26816328e-15 44,5.59644063 44,12.5 L44,12.5 C44,19.4035594 38.4035594,25 31.5,25 L12.5,25 C5.59644063,25 7.95086955e-15,19.4035594 7.10542736e-15,12.5 L7.10542736e-15,12.5 C6.25998517e-15,5.59644063 5.59644063,1.26816328e-15 12.5,0 Z" />
    </group>
</group>
</vector>

switch_track_on.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="44dp"
android:height="25dp"
android:viewportWidth="44"
android:viewportHeight="25">

<group
        android:translateX="-40.000000"
        android:translateY="-103.000000">
    <group
            android:translateX="40.000000"
            android:translateY="103.000000">
        <path
            android:fillColor="#FFF17102"
            android:fillType="evenOdd"
            android:strokeWidth="1"
            android:pathData="M12.5,0 L31.5,0 C38.4035594,-1.26816328e-15 44,5.59644063 44,12.5 L44,12.5 C44,19.4035594 38.4035594,25 31.5,25 L12.5,25 C5.59644063,25 7.95086955e-15,19.4035594 7.10542736e-15,12.5 L7.10542736e-15,12.5 C6.25998517e-15,5.59644063 5.59644063,1.26816328e-15 12.5,0 Z" />
    </group>
</group>
</vector>

switch_track_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/switch_track_on" 
    android:state_checked="true" />
    <item android:drawable="@drawable/switch_track_off" 
android:state_checked="false"/>
</selector>

Finally You can use the switch as follows:

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

Now you can change the color of background of tracks to get desired result. Hope this helps!!!