[Android]Vector Assetに枠線をつける方法

3469 ワード
Android VectorDrawable Android テキストリンク

初めに

AndroidのVectorDrawableを利用することであらかじめ用意されている画像を簡単に利用できます。
そのVectorDrawableに枠線をつける方法をまとめていきます。

VectorDrawableの作成

Android StudioのVector Assetでデフォルトで作成されるのは以下のようなxmlになります。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="#FFFFFF"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="@android:color/white"
        android:pathData="M3,17.25V21h3.75L17.81,9.94l-3.75,-3.75L3,17.25zM20.71,7.04c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.39,-0.39 -1.02,-0.39 -1.41,0l-1.83,1.83 3.75,3.75 1.83,-1.83z"
 />
</vector>

このxmlによって作成されるDrawableリソースは以下のようになります。

枠線をつける

以下のように変更することで枠線をつけることができます。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="@android:color/white"
        android:pathData="M3,17.25V21h3.75L17.81,9.94l-3.75,-3.75L3,17.25zM20.71,7.04c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.39,-0.39 -1.02,-0.39 -1.41,0l-1.83,1.83 3.75,3.75 1.83,-1.83z"
        android:strokeWidth="1"
        android:strokeColor="@android:color/holo_red_dark" />
</vector>

変更後のDrawableリソースは以下のようになります。

変更箇所

枠線をつけるにあたり変更した個所について説明します。
tint:リソース全体を着色
strokeWidth:枠線の太さをFloat型で指定
strokeColor:枠線の色を指定

参考

Add multi-density vector graphics