Custom Switch - track and selector size not working below 21 API

Question

Custom shape switch looks like that:

Above API 21

Below API 21

Seems like <size/> block doesn't work in <shape/> for pre 21 APIs.

Any ideas how to solve this?

CODE

container.xml:

<Switch
        android:id="@id/switch_follow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:textOff=""
        android:textOn=""
        android:thumb="@drawable/switch_selector"
        android:track="@drawable/switch_track"/>

drawable/switch_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <layer-list>
        <item
            android:bottom="@dimen/switch_selector_padding"
            android:left="@dimen/switch_selector_padding"
            android:right="@dimen/switch_selector_padding"
            android:top="@dimen/switch_selector_padding">
            <shape
                android:dither="true"
                android:shape="oval"
                android:useLevel="false"
                android:visible="true">
                <gradient
                    android:angle="270"
                    android:endColor="@color/primary_white"
                    android:startColor="@color/primary_white"/>
                <corners
                    android:radius="@dimen/switch_radius"/>
                <size
                    android:width="@dimen/switch_track_height"
                    android:height="@dimen/switch_track_height" />
            </shape>
        </item>

    </layer-list>
</item>
</selector>

drawable/switch_track.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="rectangle"
android:useLevel="false"
android:visible="true">
<gradient
    android:angle="270"
    android:endColor="@color/primary_yellow_dark_v2"
    android:startColor="@color/primary_yellow_dark_v2"/>
<corners android:radius="@dimen/switch_radius" />
<stroke
    android:width="@dimen/switch_stroke_height"
    android:color="@android:color/transparent">
</stroke>
<size
    android:width="@dimen/switch_track_width"
    android:height="@dimen/switch_track_height" />
</shape>

Perhaps someone faced a similar problem. Please share your experience.

EDIT: added dimens used

<dimen name="switch_track_width">36dp</dimen>
<dimen name="switch_track_height">30dp</dimen>
<dimen name="switch_radius">50dp</dimen>
<dimen name="switch_selector_padding">2dp</dimen>
<dimen name="switch_stroke_height">0dp</dimen>

I think (but not sure) that XML tag is wrong here. Except if it is caused by an xml syntax error (which seems not, specially if worked in previous versions, but it's not impossible...) xml happens to be the format user for data files just as plain text or ".ini" is the format used in too many questions without, in fact, having nothing to do with it. — bitifet, Sep 02 '16 at 05:55
I will change it by code if i were you, are you ok with that? — Nanoc, Sep 06 '16 at 09:55
I had a lot of work on customizing switch control, I finished by using this library which has a lot of potential, just check it :p https://github.com/kyleduo/SwitchButton — crgarridos, Sep 06 '16 at 10:20
@cgarrido, awesome work! I will give it a try if you don't mind — AnZ, Sep 06 '16 at 13:29

tynn · Accepted Answer · 2016-09-07T06:05:44.663

Everything is ok with the <size /> tag. The Drawable is created and applied correctly. Your issue lies completely within the Switch.

In older versions the before Lollipop the thumb was used with text and the drawable was nothing more than a background image which got scaled to the size necessary. You can verify this by adding text to the textOff and textOn attributes. Additionally there's a minimal width defined.

So just add a switchMinWidth of 0 and a thumbTextPadding of half the diameter of the thumb

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:switchMinWidth="0dp"
    android:textOff=""
    android:textOn=""
    android:thumb="@drawable/switch_selector"
    android:thumbTextPadding="@dimen/switch_thumb_radius"
    android:track="@drawable/switch_track" />

and a correct radius definition for it

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

great explanation, thanks! Seems like it solved my problem – AnZ Sep 07 '16 at 08:23 — AnZ, Sep 07 '16 at 08:23

score 1 · Answer 2 · edited Sep 17 '16 at 08:38

I have copied your code and try to implement in my machine, first thing in your drawable/switch_selector.xml inside <size> width property should have switch_track_width instead of switch_track_height:

<size
  android:width="@dimen/switch_track_width"
  android:height="@dimen/switch_track_height" />

Although will solve your problem,but I would suggest one more dimens.xml file inside res/values-v21 directory and add

<dimen name="switch_track_width">30dp</dimen>  //change as per your view appreance
<dimen name="switch_track_height">25dp</dimen> //change as per your view appreance
<dimen name="switch_radius">50dp</dimen> //change as per your view appreance
<dimen name="switch_selector_padding">2dp</dimen>
<dimen name="switch_stroke_height">0dp</dimen>

You an also change the width, height and radius for res/values/dimens.xml.

Hope it will help.

I've made changes like you mentioned but nothing happend... The size property seem to be being ignored for some reason. — AnZ, Sep 06 '16 at 13:01

score 0 · Answer 3 · answered Sep 06 '16 at 10:18

0

You can use this widget "android.support.v7.widget.switchcompat".It supports support backward compatibility.

answered Sep 06 '16 at 10:18

kidyu

56
2

doesn't seem to be working. Changed to `SwitchCompat` and that how it look now - http://i.imgur.com/feh8eAf.png. Size doesn't change now for all API levels – AnZ Sep 06 '16 at 13:13

Custom Switch - track and selector size not working below 21 API

3 Answers3