Custom switch widget in Android 4

Question

I am getting crazy with switch buttons in Android 4.

First of all, I have set a selector as background with two different PNG files selected from drawable folder:

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

but I don't know why they are x-scaled. I want to manage this size, but I have tried to change layout_width/height/weight... without succes.

I have also a custom PNG file to be used as the thumb of the switch. I also need to manage the size of this thumb, because if I set textOn and textOff propieties as "", thumb gets a very small size. Moreover, I would like to change thumb padding in respect of the background, because It does not appears centered.

Here is my Switch XML definition:

<Switch
    android:id="@+id/switchUsers"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/user"
    android:textOn=""
    android:textOff=""
    android:thumb="@drawable/form_switch_slider"
    android:track="@drawable/switch_user_selector" />

I have tried to change image sizes and making them nine-patch ones, but I can't reach my target.

Any help will be appreciated. Thank you!

Solidify

Answer 1

The solucion for the extremely small slider with no text was solved with a combination of:

android:thumbTextPadding="25dp"
android:textOn=""
android:textOff=""

Then, the problem of the small padding in the same slider was a 9-patch image problem. I had to extend bottom and right black lines one more pixel simetrically.

Hope this helps someone with the same problem.

Solidify