This is the desired drawable which I am trying to build.
The problem:
As I know layer-list size depends on the last item in it. But if I use android:drawable inside tag <item>, layer list gets cropped to the drawable size doesn't matter in what position it is.
Here is my swipe_close.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="34dp"
android:useLevel="false">
<solid android:color="#ffffff" />
</shape>
</item>
<item android:drawable="#drawable/ic_close_swipe" />
<item>
<shape
android:innerRadius="34dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="#E6E6E6" />
</shape>
</item>
</layer-list>
And the ic_close_swipe.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="39dp"
android:height="39dp"
android:viewportWidth="39"
android:viewportHeight="39">
<path
android:pathData="M37.7269,5.2568C38.5079,4.4757 38.5079,3.2094 37.7269,2.4283L36.5711,1.2726C35.7901,0.4916 34.5238,0.4916 33.7427,1.2726L20.7758,14.2395C19.9947,15.0206 18.7284,15.0206 17.9473,14.2395L4.9804,1.2726C4.1994,0.4916 2.933,0.4916 2.152,1.2726L0.9962,2.4283C0.2152,3.2094 0.2152,4.4757 0.9962,5.2568L13.9632,18.2237C14.7442,19.0048 14.7442,20.2711 13.9632,21.0521L0.9962,34.0191C0.2152,34.8001 0.2152,36.0665 0.9962,36.8475L2.152,38.0032C2.933,38.7843 4.1994,38.7843 4.9804,38.0032L17.9473,25.0363C18.7284,24.2553 19.9947,24.2553 20.7758,25.0363L33.7427,38.0032C34.5238,38.7843 35.7901,38.7843 36.5711,38.0032L37.7269,36.8475C38.5079,36.0665 38.5079,34.8001 37.7269,34.0191L24.7599,21.0521C23.9789,20.2711 23.9789,19.0048 24.7599,18.2237L37.7269,5.2568Z"
android:fillColor="#C4C4C4"/>
</vector>
I would recommend changing swipe_close.xml as follows.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="34dp"
android:useLevel="false">
<solid android:color="#ffffff" />
</shape>
</item>
<item
android:bottom="25dp"
android:drawable="#drawable/ic_close_swipe"
android:left="25dp"
android:right="25dp"
android:top="25dp" />
<item>
<shape
android:shape="ring"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="#E6E6E6" />
</shape>
</item>
</layer-list>
Hope that helps!
Hi guys so i created 2 xmls for 3 shapes. 2 shapes are rectangle 1 is ring.
First XML
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/colorGrey"/>
<size android:height="40dp" android:width="10dp"/>
</shape>
Second XML
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/colorWhite"/>
<size android:height="40dp" android:width="40dp"/>
</shape>
Then i created a layer-list drawable like this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="#drawable/rectangle"
android:gravity="center" />
</item>
<item android:top="40dp">
<bitmap android:src="#drawable/circle"
android:gravity="center" />
</item>
<item android:top="40dp">
<bitmap android:src="#drawable/rectangle"
android:gravity="center" />
</item>
</layer-list>
My main goal was to create this. Main problem is they are stacking top of each other.
Try this (I've assumed a 40x40dp image size based on your code and a white background based on your image):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<solid android:color="#color/white"/>
<size android:height="40dp" android:width="40dp"/>
</shape>
</item>
<item
android:right="18dp"
android:left="18dp">
<shape
android:shape="rectangle">
<solid android:color="#color/green"/>
<size android:height="40dp" android:width="4dp"/>
</shape>
</item>
<item android:gravity="center">
<shape
android:shape="oval">
<solid android:color="#color/green"/>
<size android:height="15dp" android:width="15dp"/>
<stroke android:width="2dp" android:color="#color/white"/>
</shape>
</item>
</layer-list>
Image(Edited):
I have two drawables for radio button.One for normal state and other for checked state.When I set it to button attribute of radio button it was not visible.Please tell me what I am doing wrong here.
radio_pressed:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="ring"
android:useLevel="false"
android:thickness="1dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#ffffff">
</solid>
<size
android:height="10dp"
android:width="10dp">
</size>
</shape>
</item>
<item
android:top="3dp"
android:bottom="3dp"
android:right="3dp"
android:left="3dp">
<shape android:shape="oval"
android:useLevel="false"
>
<solid
android:color="#ffffff">
</solid>
</shape>
</item>
</layer-list>
radio_normal:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false"
android:thickness="10dp">
<solid
android:color="#2196f3">
</solid>
</shape>
radio_bg:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:drawable="#drawable/radio_pressed"
>
</item>
<item
android:state_checked="false"
android:drawable="#drawable/radio_normal"
>
</item>
</selector>
activity_main.xml:
<RadioButton
android:id="#+id/radio"
android:layout_centerInParent="true"
android:layout_width="40dp"
android:button="#drawable/radio_bg"
android:layout_marginTop="100dp"
android:layout_height="40dp"
/>
i want to create a button like this :
as you see the button is curved from the middle to the inside.
i have tries something like this but it's far from what i want.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF0000" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2"
android:useLevel="false">
<size
android:width="50dp"
android:height="50dp" />
<solid android:color="#android:color/darker_gray" />
</shape>
</item>
</layer-list>
how can i do this ? is it possible to create it with xml drawables ?
This will help you... try...
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF0000" />
<size android:height="100dp"
android:width="200dp"/>
</shape>
</item>
<item
android:right="160dp"
android:top="7dp"
android:bottom="7dp"
android:left="-90dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="2dp"
android:shape="oval"
android:useLevel="false">
<size
android:width="50dp"
android:height="50dp" />
<solid android:color="#android:color/darker_gray" />
</shape>
</item>
</layer-list>
Is there any way to make the height of the thumb of a switch bigger than the track height in Android versions prior to Lollipop ?
I am essentially trying to create a material design-like switch widget in Kitkat (and older versions- the problem here is the thumb by default 'fits' inside the track). I have been working on this for quite some time now but I can't seem to arrive at the correct design.
I followed the solutions on this SO post: How to change the size of a Switch Widget.
Any suggestions or a solution would be most appreciated.
I added a transparent stroke to my track drawable shape which results in a padding around the track:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/track_color"/>
<size android:height="#dimen/track_height" />
<size android:width="#dimen/track_width" />
<!-- results in the track looking smaller than the thumb -->
<stroke
android:width="6dp"
android:color="#00ffffff"/>
</shape>
Yup
I solved this
<android.support.v7.widget.SwitchCompat
android:id="#+id/mySwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="ON"
android:textOff="OFF"
style="#style/Color1SwitchStyle"
android:text="" />
This is My Color1SwitchStyle
<style name="Color1SwitchStyle">
<item name="android:thumb">#drawable/customswitchselector</item>
<item name="android:track">#drawable/my_custom_track</item>
//when use Switch in xml file
<item name="track">#drawable/my_custom_track</item>
//when use android.support.v7.widget.SwitchCompat in xml
</style>
*Hear is my customswitchselector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true"
android:drawable="#drawable/on" >
<shape
android:shape="rectangle"
android:dither="true"
android:useLevel="false"
android:visible="true">
<gradient
android:startColor="#66AAFF00"
android:endColor="#6600FF00"
android:angle="270"/>
<corners
android:radius="15dp"/>
<size
android:width="200dp"
android:height="80dp" />
<stroke
android:width="4dp"
android:color="#0000ffff"/>
</shape>
</item>
<item android:state_checked="false"
android:drawable="#drawable/off">
<shape
android:shape="rectangle"
android:dither="true"
android:useLevel="false"
android:visible="true">
<gradient
android:startColor="#66AAFF00"
android:endColor="#6600FF00"
android:angle="270"/>
<corners
android:radius="15dp"/>
<size
android:width="200dp"
android:height="80dp" />
<stroke
android:width="4dp"
android:color="#0000ffff"/>
</shape>
</item>
</selector>
And hear is magic my my_custom_track.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:state_enabled="true"
android:drawable="#drawable/switch_track_on" />
<item
android:state_checked="false"
android:state_enabled="false"
android:drawable="#drawable/switch_track_off" />
</selector>
switch_track_on.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle"
android:dither="true"
android:useLevel="false"
android:visible="true">
<gradient
android:startColor="#color/profile_pic_bg"
android:endColor="#color/profile_pic_bg"
android:angle="270"/>
<corners
android:radius="0dp"/>
<size
android:width="100dp"
android:height="10dp" />
<stroke
android:width="12dp"
android:color="#00ffffff"/>
</shape>
</item>
</layer-list>
switch_track_off.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle"
android:dither="true"
android:useLevel="false"
android:visible="true">
<gradient
android:startColor="#color/gray"
android:endColor="#color/gray"
android:angle="270"/>
<corners
android:radius="0dp"/>
<size
android:width="100dp"
android:height="10dp" />
<stroke
android:width="12dp"
android:color="#00ffffff"/>
</shape>
</item>
</layer-list>
Thanks stevenp without your comment i cannot solve this
Adding top and bottom inset in the 'track' drawable works for me. android:bottom="5dp" android:top="5dp"
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="5dp"
android:top="5dp">
<shape>
<corners android:radius="15dp" />
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dp"
android:color="#EEEEEE" />
</shape>
</item>
<androidx.appcompat.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:track="#drawable/switch_track_drawable" />
The solution I came up with is just to use for the track a shape that is a line instead of a rectangle, and set the width explicitly in its stroke.
For example if the switch is defined as follows:
<android.support.v7.widget.SwitchCompat
android:id="#+id/my_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:track="#drawable/switch_track"
app:theme="#android:style/Theme.DeviceDefault.Light" />
The in the switch_track.xml drawable use a line shape with whatever width you desire:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false" >
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line" >
<stroke android:color="#50bbb9bf" android:width="5dp"/>
</shape>
</item>
<item android:state_checked="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
<stroke android:color="#5000b6de" android:width="5dp"/>
</shape>
</item>
</selector>