How to put a <vector> in a <shape> in Android?

Question

I'm trying to make customizable icons in Android. I made the vector element, but now I want to give it a rounded background, so I tried to place it within a rounded shape. Like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- drawable/circle_card_icon.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:height="24dp"
        android:width="24dp"
        android:viewportWidth="24"
        android:viewportHeight="24">
        <path android:fillColor="#000"
            android:pathData="M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M6,9H18V11H6M14,14H6V12H14M18,8H6V6H18" />
    </vector>
</shape>

Yet this doesn't work, and I'm trying to achieve the following:

By using only the vector I don't get the background.
(I used this website to generate the vector)

Solution 1

Rather than putting a vector into a shape, I'd use a LayerList Drawable

Something like so:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <!-- drawable/circle_card_icon.xml -->
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval">
            <solid android:color="#8df"/>
            <size 
                android:width="48dp"
                android:height="48dp"
            />
        </shape>
    </item>
    <item android:drawable="@drawable/your_vector_drawable" />
</layer-list>

Solution 2

If you have 2 vectors, you can try this (min API 23):

Heart inside star:

ic_heart_in_star:

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/ic_star"  />
        <item android:drawable="@drawable/ic_heart"
            android:gravity="center"
            android:width="3dp"
            android:height="3dp"  />
    </layer-list>

ic_heart:

    <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="#FF0000"
            android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z" />
    </vector>

ic_star:

    <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="#0000FF"
            android:pathData="M22,9.24l-7.19,-0.62L12,2 9.19,8.63 2,9.24l5.46,4.73L5.82,21 12,17.27 18.18,21l-1.63,-7.03L22,9.24zM12,15.4l-3.76,2.27 1,-4.28 -3.32,-2.88 4.38,-0.38L12,6.1l1.71,4.04 4.38,0.38 -3.32,2.88 1,4.28L12,15.4z" />
    </vector>

Comments

[eduvv]

@Bob Malooga, Ok but vector inside a layer-list wont work either, so I guess I'll export the icon as png, and make a layer-list, bottom shape would be a circle and top one a empty shape with background my png right?

[eduvv]

I don't know, I could be wrong, I thought it might be for the same reason a vector cannot be in a shape

[Filip Petrovic]

Doing this exact thing, but doing app:srcCompat as the support library suggest results in a crash.

[I.Step]

Can you please link where it is said that min API is 23? I can not found it. On official documentaion it says that layer-list is from API level 1. developer.android.com/reference/android/graphics/drawable/…