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>
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>