Android shape with gradient border and shadow

Question

I have a png drawable for the buttons. But it image drawable has gradient and it looks bad when applying 9patch (gradient & 9patch non compatible). I want to do this with a shapes. But I can't drawing with android shapes because it's hard to me to understand it.

Can you help me to draw this image with a shapes?

It's contain a border gradient, orange rectangle inside with a rounded corners and shadow 120°

Use card view it will give the same output just set the corner radius — Neelay Srivastava, Dec 26 '16 at 10:58
Thanks for your answer. I can't use a cardview because I must use only drawable and only for a buttons — Trancer, Dec 26 '16 at 12:11
Try this http://stackoverflow.com/questions/6054562/how-to-make-the-corners-of-a-button-round — Neelay Srivastava, Dec 26 '16 at 12:23
Don't try what @NeelaySrivastava offered above. There is a simple button without a shadow. — CoolMind, May 13 '19 at 09:31
lol its been 2 +yr since the answer was accepted bro @CoolMind — Neelay Srivastava, May 15 '19 at 21:23

score 20 · Accepted Answer · answered Dec 29 '16 at 14:49

Here you go

Create your layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#c8c0c0"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_centerInParent="true"
        android:background="@drawable/my_rectangle">

    </LinearLayout>

</RelativeLayout>

Create my_rectangle.xml file inside drawable folder

<?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:angle="270"
                android:endColor="#000000"
                android:startColor="#FFFFFF" />
            <corners android:radius="10dp" />
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#e95d11" />
            <corners android:radius="10dp" />
            <size
                android:width="50dp"
                android:height="50dp" />
        </shape>
    </item>
</layer-list>

The result

Notes

I made it a 120 * 120 square, change the dimensions to make it rectangle
I made the radius of the rounded corner as 10dp, change it if you want
I made the padding as 5dp, you may change it as well

Cheers

Thank you so much. Sad that I already published the app with the png 9patch. And it looks not perfect. But I hope your solution fix it and your shape works like a 9patch? — Trancer, Dec 29 '16 at 18:58

score 1 · Answer 2 · answered Oct 24 '19 at 06:38

<?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:angle="180"
            android:endColor="@color/transperent"
            android:startColor="@color/quantum_orange" />
        <corners android:radius="5dp" />
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle">
        <solid android:color="@color/white" />
        <corners android:radius="5dp" />
        <size
            android:width="50dp"
            android:height="50dp" />
    </shape>
</item>

score 0 · Answer 3 · answered May 13 '19 at 14:00

While the accepted answer is correct, better is using 9-patch. See Creating & Using 9-patch images in Android, https://developer.android.com/studio/write/draw9patch, How do I put a border around an Android textview?. Probably SVG-images can help, but I haven't succeeded. Also in the accepted answer shadows can be rotated by every 45 degrees, for instance, you can try 315 instead of 270.

You can use 9-patch tools. 'Draw9patch' tool disappeared from sdk/tools folder, but probably it is here: https://androidstudio.io/downloads/tools/download-the-latest-version-of-draw9patch.jar.html.

Copy an image (a border with a shadow) from your design.
Paste it in your image editor like Photoshop, Gimp.
Clear unneeded space with rectangle, magic wand tools.

Save the image as PNG and open Simple nine-patch generator.
Paste there the image and move rulers.

Download ZIP and extract it to res folder of your project.
Now you can use these 9.png images as a shadow.

9-patch is easier to use than XML shadows with gradient and CardView. Shadowing in Android is horrible.

Android shape with gradient border and shadow

3 Answers3

Create your layout

Create my_rectangle.xml file inside drawable folder

The result

Notes

Linked

Related