Search code examples
androidvectorandroid-drawableshapes

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

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:
enter image description here

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

Solution

  • 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>