Android shape with gradient border and shadow

问题:

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°

回答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

回答2:

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.

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

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

6. Download ZIP and extract it to res folder of your project.
7. 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.

回答3:

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