Android custom Switch gets clipped/cut off

Question

I've a custom android switch which is define like this

<Switch
    android:id="@+id/create_site_switch_ssl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical|left"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:paddingLeft="50dp"
    android:paddingRight="50dp"
    android:checked="true"
    android:gravity="center_vertical"
    android:thumb="@drawable/btn_gradient" />

and the thumb selector item like this

<item android:state_enabled="true" android:state_focused="false" android:state_pressed="false">
    <shape android:shape="rectangle">    
        <gradient
            android:startColor="@color/Blue100"
            android:endColor="@color/Blue50"
            android:angle="90"/>    
        <padding android:left="@dimen/button_padding"
            android:top="@dimen/button_padding"
            android:right="@dimen/button_padding"
            android:bottom="@dimen/button_padding" />    
        <corners android:radius="@dimen/button_corner"/>    
        <stroke android:color="@color/BlueBorder" android:width="5dp"/>    
    </shape> 
</item>

On Android version 4.3, 4.4.2 switch slider gets cut like this on the right and left sides.

I tried to play around with the shape's and switch's padding/margin/size nothing worked so far.

Also setting a custom track with appropriate paddings didn't work.

On Android 5.0 and higher versions the problem was solved by setting

android:paddingLeft 
android:paddingRight

Why the padding is not working for later versions ? What I'm missing ? Any hint for the solution is welcomed !

Answer 1

I had the same issue. Removing the padding properties from the drawable fixed it for me. In your case, it would look like this:

<item android:state_enabled="true" android:state_focused="false" android:state_pressed="false">
    <shape android:shape="rectangle">    
        <gradient
            android:startColor="@color/Blue100"
            android:endColor="@color/Blue50"
            android:angle="90"/>    
        <corners android:radius="@dimen/button_corner"/>    
        <stroke android:color="@color/BlueBorder" android:width="5dp"/>    
    </shape> 
</item>

You can then add the padding to the switch:

<Switch
    android:id="@+id/create_site_switch_ssl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical|left"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:paddingLeft="50dp"
    android:paddingRight="50dp"
    android:checked="true"
    android:drawablePadding="@dimen/button_padding"
    android:gravity="center_vertical"
    android:thumb="@drawable/btn_gradient" />

Answer 2

I know this is late but this is for other people who have the same issue. For me the solution was to set a negative padding. So if your switch is cut off on the right side then set right padding to a negative number such as -5 or -10 depending on how much of the switch is being cut off.