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°

Solution 1

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

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

Cheers

Solution 2

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

Comments

[Trancer]

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?