矢量Drawable在圈子里

时间:2018-03-20 18:01:58

标签: android svg android-vectordrawable

是否有一种简单的方法可以生成Vector Drawable,它是一个圆圈,其中包含现有矢量drawable中的图标?

实施例: existing vector drawable

generated vector drawable, circle with empty icon inside

3 个答案:

答案 0 :(得分:7)

我会建议这样的事情:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
    android:gravity="fill"
    android:drawable="@drawable/ic_brightness_1_black_24dp"

    />
    <item
        android:gravity="center"
        android:drawable="@drawable/ic_call_black_24dp"
        android:top="20dp"
        android:bottom="20dp"
        android:left="20dp"
        android:right="20dp"
        />

</layer-list>

带有ids ic_brightness_1_black_24dp和ic_call_black_24dp的资源是导入的矢量绘图。

ic_brightness_1_black_24dp:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#303F9F"
        android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
</vector>

和ic_call_black_24dp:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z"/>
</vector>

答案 1 :(得分:0)

实际上,这很简单,您只需将两个路径都包含在一个向量中,因此使用您的路径,它看起来将如下所示:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">

    <path
        android:fillColor="#303F9F"
        android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>

    <path
        android:fillColor="#FFFFFF"
        android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z"/>

</vector>

显然,结果将取决于彼此之间路径的大小,并且由于不使用图形工具进行缩放就很麻烦,因此DimDim的layer-list解决方案更易于实现。

答案 2 :(得分:-1)

使用这种方式,
enter image description here
我自己尝试过,但效果很好。看起来像这样。 enter image description here

对于button_round:
enter image description here