如何在矢量可绘制图像中添加圆形边框？答案

【问题标题】：how to add round border in vector drawable image?如何在矢量可绘制图像中添加圆形边框？
【发布时间】：2020-09-24 04:31:28
【问题描述】：

我有一个 EYE 的矢量可绘制图像，我想要围绕它的圆形边框，但我找不到任何解决方案。

我对图片的要求是：here is my requirement image!

我正在为眼睛图标使用 xml 代码，如下所示：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="26.012dp"
    android:height="16dp"
    android:viewportWidth="26.012"
    android:viewportHeight="16">
  <path
      android:fillColor="#FF000000"
      android:pathData="M13.012,5.518a3.606,3.606 0,0 1,1.312 0.246,2.168 2.168,0 0,0 2.293,3.671 3.617,3.617 0,1 1,-3.6 -3.917Z"
      android:fillType="evenOdd"/>
  <path
      android:fillColor="#FF000000"
      android:pathData="M13.006,16c4.959,0 10.714,-3.655 12.552,-7.074 -2.7,0.038 -4.571,-1.213 -6.415,-2.414a5.237,5.237 0,0 1,0.659 2.536c0,3.252 -3.034,5.889 -6.777,5.889s-6.777,-2.637 -6.777,-5.889a5.235,5.235 0,0 1,0.681 -2.574c-1.864,1.212 -3.744,2.491 -6.474,2.452 1.837,3.418 7.593,7.074 12.552,7.074ZM13.006,3.149c-4.309,0 -7.693,4 -10.737,5.023 -0.585,0.2 -1.7,0.4 -2.131,0.02 -0.316,-0.278 -0.1,-0.274 0.792,-1.1 3.467,-3.192 6.4,-7.08 12.016,-7.1 5.776,-0.017 8.581,3.823 12.137,7.1 0.893,0.822 1.108,0.817 0.792,1.1 -0.433,0.38 -1.546,0.177 -2.131,-0.02C20.699,7.147 17.315,3.149 13.006,3.149Z"
      android:fillType="evenOdd"/>
</vector>

现在我想根据上图在该图像周围添加边框。

如果有人了解这些东西，请帮助我。

提前谢谢你！！

【问题讨论】：

标签： android xml android-vectordrawable

【解决方案1】：

您可以修改您的SVG

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="125dp"
    android:height="125dp"
    android:viewportWidth="125"
    android:viewportHeight="125">
  <path
      android:pathData="M48.7,11.5c-12,3.3 -24.1,12.2 -30.8,22.6 -13.8,21.5 -10.9,49.1 7,66.9 21.7,21.6 54.5,21.6 76.2,-0 29,-28.8 15.4,-79 -24.2,-89.5 -6.6,-1.8 -21.7,-1.8 -28.2,-0zM73.2,13.1c8.9,1.8 19,7.3 25.5,13.8 10.1,10.1 15.3,22.5 15.3,36.6 0,14.7 -5.2,26.7 -15.9,36.8 -7.6,7.1 -15.3,11.2 -24.9,13.3 -8.4,1.7 -12,1.7 -20.4,-0 -9.6,-2.1 -17.3,-6.2 -24.9,-13.3 -10.7,-10.1 -15.9,-22.1 -15.9,-36.8 0,-32.4 29.8,-56.9 61.2,-50.4z"
      android:fillColor="#000000"
      android:strokeColor="#00000000"/>
  <path
      android:pathData="M51.8,41.5c-5.5,2.1 -11.6,6.5 -20.5,14.9l-7.8,7.5 3.3,0.1c3.7,-0 8.1,-2 18,-8.4 8.1,-5.2 12,-6.6 18.2,-6.6 6.2,-0 10.1,1.4 18.2,6.6 10,6.4 14.3,8.4 18,8.4 3.3,-0.1 3.3,-0.1 -6.2,-9.1 -12.4,-11.7 -17.6,-14.3 -29,-14.6 -5.4,-0.2 -9.8,0.3 -12.2,1.2z"
      android:fillColor="#000000"
      android:strokeColor="#00000000"/>
  <path
      android:pathData="M57.4,57.9c-6,3.7 -6.6,12.1 -1.2,16.6 4,3.4 9.6,3.4 13.6,-0 3.8,-3.2 4.8,-6.3 1.8,-5.8 -3.2,0.7 -7.6,-3.3 -7.6,-6.7 0,-1.6 0.5,-3.2 1,-3.5 1.9,-1.2 1,-2.5 -1.7,-2.5 -1.6,-0 -4.2,0.9 -5.9,1.9z"
      android:fillColor="#000000"
      android:strokeColor="#00000000"/>
  <path
      android:pathData="M37.5,63.1c-3.3,1.6 -7.2,2.9 -8.7,2.9 -1.6,-0 -2.8,0.4 -2.8,1 0,2.5 10.6,11.2 18.7,15.2 8.4,4.2 8.9,4.3 18.3,4.3 9.4,-0 9.9,-0.1 18.3,-4.3 8.1,-4 18.7,-12.6 18.7,-15.1 0,-0.6 -1.3,-1.1 -2.9,-1.1 -1.5,-0 -5.5,-1.3 -8.7,-3 -3.2,-1.6 -6,-3 -6.1,-3 -0.1,-0 0.2,1.2 0.8,2.7 2.4,6.5 -2.2,15.3 -10.2,19.4 -5.2,2.6 -14.6,2.6 -19.8,-0.1 -7.5,-3.8 -12.1,-12.2 -10.2,-18.8 0.5,-1.8 0.9,-3.2 0.8,-3.1 -0.1,-0 -2.9,1.4 -6.2,3z"
      android:fillColor="#000000"
      android:strokeColor="#00000000"/>
</vector>

你的 OP 会

【讨论】：

@harshpatel 你可以接受这个答案。点击勾号
我只是想知道我怎样才能学会这个来自己创造别人。？

【解决方案2】：

您可以将圆形作为图像视图的背景，并将其 src 设置为矢量

<ImageView
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/eye"
    android:tint="#747474"
    android:background="@drawable/circle_gray"
    android:padding="6dp"/>

circle_gray.xml在drawable文件夹中

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke android:width="2dp"
        android:color="#747474"/>

</shape>

根据需要更改宽度和高度。也最好在colors.xml中取色

结果：-

【讨论】：

【解决方案3】：

你可以用这种方式制作圆形边框，

圆形边框矢量，

最后在图层列表的第二项中使用您的眼睛图像。可以正常工作。
看起来是这样的，

【讨论】：