web-dev-qa-db-fra.com

Comment mettre un <vector> dans une <shape> dans Android?

J'essaie de créer des icônes personnalisables dans Android. J'ai créé l'élément vectoriel, mais maintenant je veux lui donner un arrière-plan arrondi, j'ai donc essayé de le placer dans une forme arrondie. Comme ça:

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

Pourtant, cela ne fonctionne pas, et j'essaie d'atteindre les objectifs suivants:
enter image description here

En utilisant uniquement le vecteur, je n'obtiens pas l'arrière-plan.
(J'ai utilisé ce site Web pour générer le vecteur)

androidvectorandroid-drawableshape
19
Edward

Plutôt que de mettre un vecteur dans une forme, j'utiliserais un LayerList Drawable

Quelque chose comme ça:

<?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>
38
Fantômas

Si vous avez 2 vecteurs, vous pouvez essayer ceci (min API 23):

Coeur à l'intérieur de l'étoile:

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>
1
live-love