CODEWITHSUNDEEP
androidxmlandroid-switch
AnZ
AnZ

Reputation: 1060

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

Custom shape switch looks like that:

Above API 21

enter image description here

Below API 21

enter image description here

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>

Upvotes: 22

Views: 10194

Answers (3)

Rajendra
Rajendra

Reputation: 504

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.

Upvotes: 1

tynn
tynn

Reputation: 39863

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>

Upvotes: 12

kidyu
kidyu

Reputation: 56

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

Upvotes: 0

Related Questions