如何创建内部路径透明的矢量绘制？

Question

I am trying to create a favourite icon something like the following icon.

While creating it i need the inner path (the area in blue color)to be transparent in the result.But while giving the transparent color it is showing the color that is filled in the outer path.ie complete shape in orange color. How i can i make a vector drawable with transparent inner path

My vector drawable is

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="72dp"
        android:height="66dp"
        android:viewportHeight="66"
        android:viewportWidth="72">

    <path
        android:fillColor="@android:color/transparent"
        android:pathData="M 0.00 0.00 L 72.00 0.00 L 72.00 66.00 L 0.00 66.00 L 0.00 0.00 Z" />
    <path
        android:fillColor="#F7592B"
        android:pathData="M 20.99 1.04 C 26.30 1.45 30.97 4.88 36.04 5.70 C 40.02 5.23 43.79 2.79 47.70
        1.80 C 56.08 -0.90 65.46 4.21 69.03 11.97 C 71.67 17.65 71.59 24.74 70.62 30.81
        C 68.57 41.48 60.32 50.55 51.81 56.81 C 47.69 59.73 43.11 62.72 38.21 64.12 C
        34.80 65.13 31.23 63.34 28.24 61.86 C 19.69 57.27 11.77 50.76 6.25 42.72 C 0.82
        34.78 -0.33 24.87 1.66 15.60 C 3.69 7.15 12.14 0.18 20.99 1.04 Z" />
    <path
        android:fillColor="#1721dc"
        android:pathData="M 19.98 7.14 C 25.68 7.39 30.87 12.07 36.10 12.99 C 41.30 12.15 46.97 7.14 52.84
        7.35 C 58.72 7.85 63.41 12.52 64.67 18.17 C 65.71 23.40 65.21 29.32 63.25 34.30
        C 59.83 42.88 52.20 49.81 44.38 54.43 C 40.52 56.53 36.81 58.58 32.37 56.70 C
        24.56 53.51 17.02 47.75 12.20 40.77 C 7.31 33.87 5.58 24.79 7.64 16.59 C 9.15
        11.09 14.21 6.98 19.98 7.14 Z" />
</vector>

Answer 1

You have two ways to go: 1) create another vector drawable, which will draw only the outer line, instead of overlapping two hearts or 2) remove the orange heart and add an orange stroke to the blue heart. Just copy the code below and try it. Be aware: half of the stroke width will go inside the image and half will go outside, so your image will differ a bit (stoke will be closer to the center of the image)

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="72dp"
    android:height="66dp"
    android:viewportHeight="66"
    android:viewportWidth="72">
    <path
        android:fillColor="#00000000"
        android:strokeColor="#F7592B"
        android:strokeWidth="6"
        android:pathData="M 19.98 7.14 C 25.68 7.39 30.87 12.07 36.10 12.99 C 41.30 12.15 46.97 7.14 52.84
        7.35 C 58.72 7.85 63.41 12.52 64.67 18.17 C 65.71 23.40 65.21 29.32 63.25 34.30
        C 59.83 42.88 52.20 49.81 44.38 54.43 C 40.52 56.53 36.81 58.58 32.37 56.70 C
        24.56 53.51 17.02 47.75 12.20 40.77 C 7.31 33.87 5.58 24.79 7.64 16.59 C 9.15
        11.09 14.21 6.98 19.98 7.14 Z" />
</vector>

Result: click to see the resulting image

Answer 2

Please use StrokeColor and strokeWidth like this

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="72dp"
android:height="66dp"
android:viewportHeight="66"
android:viewportWidth="72">

<path
    android:fillColor="@android:color/transparent"
    android:pathData="M 0.00 0.00 L 72.00 0.00 L 72.00 66.00 L 0.00 66.00 L 0.00 0.00 Z" />
<path
    android:fillColor="#000000000"
    android:pathData="M 19.98 7.14 C 25.68 7.39 30.87 12.07 36.10 12.99 C 41.30 12.15 46.97 7.14 52.84
    7.35 C 58.72 7.85 63.41 12.52 64.67 18.17 C 65.71 23.40 65.21 29.32 63.25 34.30
    C 59.83 42.88 52.20 49.81 44.38 54.43 C 40.52 56.53 36.81 58.58 32.37 56.70 C
    24.56 53.51 17.02 47.75 12.20 40.77 C 7.31 33.87 5.58 24.79 7.64 16.59 C 9.15
    11.09 14.21 6.98 19.98 7.14 Z"
    android:strokeColor="#F7592B"
    android:strokeWidth="5"/>