Develop Reference

Top-Left Outer Corner

I'm developing an android app and have some trouble with a drawable.
I tried to achieve a corner like this
https://imgur.com/DYWfsZI
I only want the red area and the white must be transparent.
(best of course as xml)

Try this:
1: Define top_left_outer_bg.xml in drawables:
<?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="#android:color/holo_red_dark" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/white"/>
<corners android:radius="50dp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"/>
</shape>
</item>
</layer-list>
2: Add top_left_outer_bg.xml as background to your layout
android:background="#drawable/top_left_outer_bg"

how to make gradient exactly like these drawable in android

NOTE : updated question !
i want to make gradiend as mentioned in the pic
the centered gray is a line i want it to be merged with both right left
Solution tried
Android drawable with background and gradient on the left
i couldnt find more about custom drawable gradient how i need
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:centerColor="#color/white"
android:endColor="#color/gray"
android:startColor="#color/gray"
android:type="linear"
/>
</shape>
i have these two images and want to make them with drawable ..
thanks in advance ..
PS : I have also tried the answer i got against my question but i think this gradient isnt possible i have been waiting since 3 months for solution.

Try to use type as radial :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="false">
<size
android:width="48dip"
android:height="48dip" />
<gradient
android:centerColor="#android:color/white"
android:centerY="0.5"
android:gradientRadius="180"
android:type="radial"
android:useLevel="false" />
</shape>

try this and change color what you want
android:background:"#drawable/color_grad"
color_grad.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:centerColor="#FAFAFA"
android:endColor="#C7C7C7"
android:startColor="#C7C7C7"
android:type="linear"
android:angle="270"/>
<corners android:radius="0dp" />

android:background="#drawable/gradient"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#C3C3C3"
android:endColor="#00000000"
android:angle="45"/>
</shape>

Can't get rounded corners for my layer-list drawable

I have made a button drawable that consists of a gradient shape and a solid shape, both in a layer-list like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:height="25dp">
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:startColor="#color/greyDark1"
android:endColor="#color/greyDark2"/>
</shape>
</item>
<item android:top="25dp" android:height="25dp">
<shape android:shape="rectangle" >
<solid android:color="#color/black" />
</shape>
</item>
</layer-list>
But I can't get the corners right.
I need rounded corners around the entire shape, but not on the inside (so topRight and topLeft op the top half and bottomRight and bottomLeft for the bottom half).
If I set both halves with <corners android:radius="8dp"> the bottom corners of the top half and the top corners of the bottom half are rounded too, and that's not what I want.
If I set <corners android:topRightRadius="8dp" android:topLeftRadius"8dp"> for the top half and <corners android:bottomRightRadius="8dp" android:bottomLeftRadius"8dp"> for the bottom half the top half would be the full size of the drawable making the gradient not working properly and the bottom corners are that same color too.
Here is an image of what I'm trying to accomplish:
Does someone know a solution to this?
EDIT:
I have gotten some answers and I'm thankful for that, but sadly enough they don't seem to work.
The answers I got from bofredo and Bhuvnesh Chasta resulted in something like this:
And the answer I got from curiousMind looks pretty nice, but isn't what I'm aiming for:
FINAL EDIT:
I have discussed this problem with someone I was working with and we both agree that it isn't that important to have it look like this, so we went with a solid color.
I still want to thank everybody who helped, all the current answers will get an upvote and I will accept the answer from waqaslam because he came very close to what I wanted.

I think that's the closest you can reach to your desired drawable using xml.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<gradient android:startColor="#4e4e4e" android:centerColor="#626262" android:endColor="#android:color/transparent" android:angle="270" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<gradient android:startColor="#android:color/transparent" android:centerColor="#4c4c4c" android:endColor="#1c1c1c" android:angle="270" />
</shape>
</item>
Perhaps you should use 9-patch drawable to get the exact effect.

I had this problem quite some time ago aswell. You can find that question HERE
This is from the working answer:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#color/cocus_orange"/>
<corners android:radius="15px"/>
<padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="90"
android:startColor="#880f0f10"
android:centerColor="#880d0d0f"
android:endColor="#885d5d5e"/>
<corners
android:radius="15px" />
</shape>
</item>
</layer-list>

try like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#000"
android:startColor="#787575" />
<corners android:radius="8dip" />

Try this one. You should use to corners in shape for round to corner.
<?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="#b2d1d1ef" />
<corners android:radius="1dp"/>
</shape>
</item>
<item android:right="1dp" android:left="1dp" android:bottom="2dp" android:top="1dp">
<shape
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners android:radius="5dp"/>
</shape>
</item>

Found this question today and solved, I'm sharing it in case anyone else will find it unsolved as the OP wanted, and wants to know the right way as I'm sure the OP doesn't need it anymore.
I made starting point/ending point for each item's draw, the gradient for the top starts where the button starts, ends after 20dp, for the bottom starts after 20dp and it ends in the end of the button. You can even see from the attachment that it is the same as the OP's wanted result! :)
(I don't have 10 reputation to post images.)
Button Preview from Android Studio
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="20dp">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="270"
android:startColor="#4e4e4e"
android:endColor="#626262"
android:type="linear"/>
</shape>
</item>
<item android:top="20dp">
<shape
android:shape="rectangle" >
<gradient
android:angle="270"
android:startColor="#4c4c4c"
android:endColor="#1c1c1c"
android:type="linear"/>
<corners android:bottomLeftRadius="8dp" android:bottomRightRadius="8dp"/>
</shape>
</item>
</layer-list>

Creating a frame for a view with gradient in xml

I would like to know how to create a kind of gradient frame for a background rectangle with xml.
It's simple to create a background gradient for 1 side with xml definition like this:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:type="linear"
android:centerX="8%"
android:startColor="#FF004D4D"
android:centerColor="#FF000000"
android:endColor="#FF000000"
android:angle="180"/>
</shape>
which results into a background like this:
But how can I create a similar gradient for all sides ? So that it would look something like this (apologies for 30 seconds photoshopping):
I tried to create a layer-list, as suggested in other questions regarding multiple gradients, but that didn't seem to work, it just took the "last item", and used those settings..
I am using setBackgroundResource(R.drawable.gradient_bg); in onDraw method for View if that is of any importance. Thanks for any suggestions!

The answer was indeed layered-list. The mistake was just not lowering the alpha on the endColor. So this works as expected:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:type="linear"
android:centerX="8%"
android:startColor="#FFFF0000"
android:centerColor="#00FF0000"
android:endColor="#00000000"
android:angle="0"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<gradient
android:type="linear"
android:centerX="8%"
android:startColor="#FFFF0000"
android:centerColor="#00FF0000"
android:endColor="#00000000"
android:angle="90"/>
</shape>
</item>
</layer-list>

Creating a drawable rectangle in xml with one gradient on the top half and another on the bottom half

I'm trying to create a drawable in xml, a rectangle with one gradient on the top half, and another on the bottom half. This is NOT the way to do it, apparently:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#5a5a5a88"
android:endColor="#14141488"
android:angle="270" android:centerX="0.25"/>
</shape>
</item>
<item>
<shape android:shape="rectangle" android:top="80px">
<gradient
android:startColor="#5aff5a88"
android:endColor="#14ff1488"
android:angle="270" android:centerX="0.25"/>
</shape>
</item>
</layer-list>
How can I do this, preferably in a way that makes it stretchable to any height?

If your goal is to have a gradient with a central color (starts at color A, transitions to B in the middle, then transitions to C at the end), add android:centerColor and android:centerY attributes to one of your <shape> elements and nuke the other. You can do the three-color gradient all in a single shape.

small bug for you, top attribute should be in item element ;)
it work:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#5a5a5a88"
android:endColor="#14141488"
android:angle="270" android:centerX="0.25"/>
</shape>
</item>
<item android:top="80dp">
<shape android:shape="rectangle">
<gradient
android:startColor="#5aff5a88"
android:endColor="#14ff1488"
android:angle="270" android:centerX="0.25"/>
</shape>
</item>
</layer-list>