带有渐变边框和阴影的 Android 形状

Question

我有一个用于按钮的 png drawable。但是它的图像可绘制具有渐变，并且在应用 9patch 时看起来很糟糕（渐变和 9patch 不兼容）。我想用形状来做到这一点。但我不能用 android 形状绘图，因为我很难理解它。

你能帮我用形状画出这张图片吗？

它包含一个渐变边框，橙色矩形内部带有圆角和 120° 阴影

Answer 1

给你

创建你的布局

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

在drawable文件夹中创建my_rectangle.xml文件

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

结果

注意事项

1. 我把它做成了一个 120 * 120 的正方形，把尺寸改成矩形
2. 我将圆角的半径设置为 10dp，如果您愿意，可以更改它
3. 我将内边距设为 5dp，您也可以更改它

干杯

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

Answer 3

虽然接受的答案是正确的，但最好使用 9-patch。请参阅Creating & Using 9-patch images in Android、https://developer.android.com/studio/write/draw9patch、How do I put a border around an Android textview?。可能 SVG-images 可以提供帮助，但我没有成功。同样在接受的答案中，阴影可以每 45 度旋转一次，例如，您可以尝试 315 而不是 270。

您可以使用 9-patch 工具。 'Draw9patch' 工具从 sdk/tools 文件夹中消失了，但它可能在这里：https://androidstudio.io/downloads/tools/download-the-latest-version-of-draw9patch.jar.html。

1. 从您的设计中复制一张图片（带阴影的边框）。
2. 将其粘贴到 Photoshop、Gimp 等图像编辑器中。
3. 使用矩形魔棒工具清除不需要的空间。

4. 将图片另存为PNG并打开Simple nine-patch generator。
5. 将图像粘贴到那里并移动标尺。

6. 下载 ZIP 并将其解压到您项目的 res 文件夹中。
7. 现在您可以将这些9.png 图像用作阴影。

9-patch 比带有渐变的 XML 阴影和CardView 更易于使用。 Android 中的阴影太可怕了。