web-dev-qa-db-ja.com

Androidで<vector>を<shape>に入れる方法は？

Androidでカスタマイズ可能なアイコンを作ろうとしています。ベクトル要素を作ってみましたが、丸みを帯びた背景にしたいので、丸みのある形状の中に配置してみました。このような：

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

しかし、これは機能せず、私は次のことを達成しようとしています：
enter image description here

ベクトルだけを使用すると、背景は得られません。
（ベクターを生成するために このWebサイト を使用しました）

androidvectorandroid-drawableshape
19
Edward

ベクトルをシェイプに入れるのではなく、LayerList Drawableを使用します

そのような何か：

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

2つのベクトルがある場合は、これを試すことができます（最小API 23）。

星の中のハート：

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