0
0

More than 3 years have passed since last update.

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

Posted at

初めに

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リソースは以下のようになります。
device-2021-03-20-204356.png

枠線をつける

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

<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リソースは以下のようになります。
device-2021-03-20-204748.png

変更箇所

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

参考

Add multi-density vector graphics

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0