How to create a drawable xml from this PNG image?

Question

我上面有这张 PNG 图片（我从 Figma 导出的）。如何使用可绘制 xml 重新创建它？ 我想尝试使用图层列表，但我不确定该怎么做。 我需要使用 drawable，因为我需要为其设置自定义颜色。

这是我的可绘制代码：

背景.xml

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/background_color"/>
    <item>
        <shape android:shape="rectangle">
            <!-- I'm suppose I need to add some code here but I'm not sure what it is -->
        </shape>
    </item>
</layer-list>

background_color.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:angle="90"
        android:endColor="@color/primary"
        android:startColor="@color/secondary" />
</shape>

颜色.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#001A6E</color>
    <color name="secondary">#0070C0</color>
    ...
</resources>

还有其他更好的方法来重新创建此 PNG 图像吗？

Answer 1

希望它有帮助....我没有在这里使用导出的图像，因为我从您的资源中获得了渐变颜色。

您可以根据需要调整

bottomLeftRadius

或

bottomRightRadius

。它用于此类目的的高级解决方案。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:endColor="#001A6E"
        android:startColor="#0070C0" />

    <padding
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp" />

    <corners
        android:bottomLeftRadius="40dp"
        android:bottomRightRadius="40dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp" />

</shape>

Answer 2

我希望它能帮助你创建三个不同的可绘制xml文件来实现你想要的。我也用过你的颜色资源。

图片.xml

 <?xml version="1.0" encoding="UTF-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item
         android:drawable="#001A6E"/>
      <item>
         <shape android:shape="rectangle">
         </shape>
      </item>
    </layer-list>

image_background_white.xml

  <?xml version="1.0" encoding="UTF-8"?>
      <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
         <item
            android:drawable="#ffffff"/>
         <item>
            <shape android:shape="rectangle">
            </shape>
         <item>
      </layer-list>

image_with_roundcorner.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <gradient
     android:angle="90"
     android:endColor="#001A6E"
     android:startColor="#0070C0" />

 <corners
     android:bottomLeftRadius="50dp"
     android:bottomRightRadius="50dp"
     android:topLeftRadius="0dp"
     android:topRightRadius="0dp" />

</shape>

像这样在主 xml 中使用以上三个可绘制对象：-

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

<ImageView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:src="@drawable/image" />

<ImageView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:src="@drawable/image_background_white" />

<ImageView
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:src="@drawable/image_with_roundcorner" />

</LinearLayout>