Develop Reference

How to design following border in android studio

Here is the image which I want to design in android studio.

This will give you the same image that you're looking for.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#color/black" />
<stroke
android:width="16dp"
android:color="#color/white" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<stroke
android:width="8dp"
android:color="#color/black" />
</shape>
</item>
</layer-list>

You can achieve the required output by using layer-list. In the drawable folder create a new Drawable Resource File named background.xml and replace with the following code in the file.
This is the code for background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#5271ff" />
<stroke
android:width="20dp"
android:color="#f5fffe" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#4d75f9" />
</shape>
</item>
</layer-list>

How to clip items in a layer list drawable with respect to corner radius defined from another item

As shown in the image below i cannot clip the corners of a layer corresponding to another layer. Is there any way that it can be done that I am missing here? I want to clip anything that's going out of the corner radius.
Here is the XML
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/darkColor">
<shape android:shape="rectangle">
<solid android:color="#color/color_e95252" />
<corners android:radius="16dp"/>
</shape>
</item>
<item android:id="#+id/lightColor1"
android:bottom="40dp"
android:right="300dp">
<shape android:shape="rectangle">
<solid android:color="#color/color_ea5f5f" />
<corners android:radius="16dp"/>
</shape>
</item>
**The item below is kinda unnecessary**
<item android:id="#+id/lightColor2"
android:right="90dp"
android:top="-40dp"
android:bottom="-10dp"
android:left="10dp"
android:width="300dp"
>
**This is where the problem occurs**
<rotate android:fromDegrees="8">
<shape android:shape="rectangle">
<solid android:color="#color/color_ea5f5f" />
<corners
android:bottomRightRadius="300dp"
android:topLeftRadius="#dimen/dim_16"
android:bottomLeftRadius="50dp"/>
</shape>
</rotate>
</item>

Here you go, don't need that extra xml.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/darkColor">
<shape android:shape="rectangle">
<solid android:color="#color/appThemeColor" />
<corners android:radius="16dp"/>
</shape>
</item>
<item android:id="#+id/lightColor1"
android:bottom="30dp"
android:right="300dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimaryDark" />
</shape>
</item>
<item android:id="#+id/lightColor2"
android:top="-50dp"
android:width="300dp"
>
<rotate android:fromDegrees="8">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimaryDark" />
<corners
android:bottomRightRadius="250dp"
android:topLeftRadius="60dp"
android:bottomLeftRadius="50dp"/>
</shape>
</rotate>
</item>
</layer-list>

Android switches - making thumb height larger than track height, how?

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>

Setting a Buttons background programmatically from drawable folder incorrectly makes button background black

I am creating buttons dyanmically for a gridview, however I want to apply a drawable background presented below. However the background is black, but on pressed appears correctly.
I have a button created called roundedge_button_dark.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
<shape android:shape="rectangle" >
<corners android:radius="6dip" />
<gradient android:angle="-90" android:startColor="#3f3f3f" android:endColor="#a6a6a6" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="6dip" />
<solid android:color="#ff0000"/>
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<corners android:radius="6dip" />
<gradient android:angle="-90" android:startColor="#0F0F0F" android:endColor="#000000" />
</shape>
</item>
</selector>
I'm accessing said drawable button like so:
button.setBackgroundResource(R.drawable.roundedge_button_dark);
The problem I have is that the image shows black, which is the end colour for the non state defined item; What am I missing or is this not possible?

Try this,
<item android:state_pressed="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#ff0000" />
<solid android:color="#ffff00" />
<padding android:bottom="2dp" android:left="5dp" android:right="5dp" android:top="2dp" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#ff0000" />
<solid android:color="#FF6699" />
<padding android:bottom="2dp" android:left="5dp" android:right="5dp" android:top="2dp" />
<corners android:radius="5dp" />
</shape>
</item>

or try this,
first create your drawable xml file for button states:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Button Pressed-->
<item android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/rounded_button_click_effect"
/>
<!-- Button Default Image-->
<item android:drawable="#drawable/rounded_button"/>
</selector>
after that create rounded_button_click_effect.xml file in case of button click:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<corners android:radius="6dip" />
<gradient android:angle="-90" android:startColor="#3f3f3f" android:endColor="#a6a6a6" />
</shape>
</item>
</layer-list>
and finally create rounded_button.xml file in case of default state:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<corners android:radius="6dip" />
<gradient android:angle="-90" android:startColor="#0F0F0F" android:endColor="#000000" />
</shape>
</item>
</layer-list>

Shadow-like drawable, using "layer-list"

Background
I'm trying to make a (fake) shadow below a view, so that the layers would be vertical in this manner:
a line of color "#43000000" with a height of "1dp"
below the line, a gradient that starts from the top with color "#1A000000" and ends with color "#00000000", and is of a height of "8dp".
The problem
For some reason, I can't draw the line correctly.
No matter what I do, the line for some reason takes the whole space, while the gradient seems fine.
What I tried
I tried using "line" as the shape and also "rectangle". I also tried using "stroke" instead of "solid", tried adding padding and margins...
Here's the XML of the drawable file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<size android:height="1dp" />
<solid android:color="#43000000" />
</shape>
</item>
<item android:top="1dp">
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#00000000"
android:startColor="#1A000000" />
<size android:height="8dp" />
</shape>
</item>
</layer-list>
Again, this is not the only thing I've tried. It's just my first attempt.
The question
How can I fix this XML ? what is causing it to happen?

Here's what I've found to be working:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="8dp">
<shape android:shape="rectangle" >
<size android:height="1dp" />
<solid android:color="#43000000" />
</shape>
</item>
<item android:top="1dp">
<shape
android:dither="true"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#00000000"
android:startColor="#10000000" />
<size android:height="8dp" />
</shape>
</item>
</layer-list>

Tried with this,may it fulfill your need with gradient
<?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="#e040fb"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#E1BEE7"/>
<corners android:radius="2dp" />
<gradient
android:angle="270"
android:endColor="#e1bee7"
android:startColor="#e040fb" />
</shape>
</item>
</layer-list>

You can change the heights in this and get what you want
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="10dp"
android:gravity="bottom">
<shape
android:shape="oval">
<solid android:color="#color/shadow_color" />
</shape>
</item>
<item android:right="20dp" android:left="20dp" android:bottom="12dp"
android:top="10dp">
<shape
android:shape="rectangle">
<solid android:color="#color/border_color"/>
<corners android:radius="20dp"/>
</shape>
</item>
<item android:right="30dp" android:left="30dp" android:bottom="23dp"
android:top="20dp">
<shape
android:shape="rectangle">
<solid android:color="#color/base_color"/>
<corners android:radius="15dp"/>
</shape>
</item>
</layer-list>