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

Question

我有一个用于按钮的 png 可绘制对象。但是它的可绘制图像具有渐变，并且在应用 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>

在可绘制文件夹中创建 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>

结果

备注

我把它变成了 120 * 120 的正方形，改变尺寸让它变成矩形
我把圆角的半径设置为10dp，想改就改
我把内边距设为5dp，你也可以改

干杯

Answer 2

虽然接受的答案是正确的，但更好的是使用 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 补丁工具。 'Draw9patch' 工具从 sdk/tools 文件夹中消失了，但可能在这里：https://androidstudio.io/downloads/tools/download-the-latest-version-of-draw9patch.jar.html.

从您的设计中复制图像（带阴影的边框）。
将其粘贴到您的图像编辑器中，例如 Photoshop、Gimp。
使用矩形、魔术棒工具清除不需要的space。

将图像保存为 PNG 并打开 Simple nine-patch generator。
粘贴图片并移动标尺。

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

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

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

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

Android shape with gradient border and shadow

android-layout

android-xml

android-drawable

android-shape

创建布局

在可绘制文件夹中创建 my_rectangle.xml 文件

结果

备注