【Android開発】VectorDrawableでプロフィールアイコンの形を描画する方法

本記事では、Androidアプリでプロフィール（人物）アイコンの形状を描画する方法を解説します。VectorDrawableを使用することで、画像ファイルに依存せず、解像度に左右されない鮮明なアイコンを簡単に実装できます。

完成イメージ

今回は、頭部と肩のシルエットで構成された、いわゆる「ユーザー」や「プロフィール」を表すアイコンを赤色で描画します。XMLだけで完結するため、リソース管理も非常にシンプルです。

手順1：新規プロジェクトを作成する

まず、Android Studioを起動し、File → New Project を選択して新しいプロジェクトを作成します。必要な項目（プロジェクト名、パッケージ名、保存先など）を入力しましょう。テンプレートは「Empty Activity」で問題ありません。

手順2：レイアウトファイル（activity_main.xml）を編集する

次に、res/layout/activity_main.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_marginTop="30dp"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/background" />

</LinearLayout>

コードのポイント：

• LinearLayoutは android:gravity="center" を指定しており、子要素が画面中央に配置されます。
• ImageViewは100dp×100dpのサイズを設定し、android:background 属性で後ほど作成する @drawable/background を参照しています。
• 背景として指定することで、ベクターグラフィックがそのままアイコンとして表示されます。

手順3：ドローアブルリソース（background.xml）を作成する

続いて、res/drawable/background.xml を作成し、以下のコードを記述します。

<vector xmlns:android="https://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:autoMirrored="true"
    android:viewportWidth="277.58"
    android:viewportHeight="277.58">

    <path
        android:fillColor="#D80027"
        android:pathData="M138.46,164.287c-38.628,0 -69.925,-37.519 -69.925,-83.767C68.535,
        34.277 99.832,0 138.46,0c38.634,0 69.957,34.277 69.957,80.52C208.417,
        126.768 177.093,164.287 138.46,164.287zM29.689,277.528c0,0 -14.832,
        0.979 -21.365,-8.023c-3.53,-4.863 -1.071,-14.718 1.343,-20.217l5.912,
        -13.473c0,0 16.35,-36.567 34.962,-57.757c11.433,-12.994 25.031,
        -10.035 33.826,-5.809c5.417,2.6 11.542,10.176 16.018,14.191c6.168,
        5.532 17.057,11.819 34.859,12.173h10.922c17.791,-0.354 28.68,
        -6.641 34.843,-12.173c4.471,-4.014 10.427,-11.825 15.795,
        -14.511c8.072,-4.041 20.358,-6.527 31.492,6.13c18.618,21.191 33.363,
        58.421 33.363,58.421l6.059,13.212c2.507,5.461 5.075,15.267 1.643,
        20.195c-6.124,8.811 -19.874,7.642 -19.874,7.642S29.689,277.528 29.689,
        277.528z" />

</vector>

コードのポイント：

• <vector> 要素はVectorDrawableのルート要素です。viewportWidth と viewportHeight で描画領域の論理サイズを定義しています。
• <path> の pathData 属性には、SVGパス形式のコマンド（M＝移動、C＝曲線など）で人物のシルエットが記述されています。
• android:fillColor="#D80027" により、アイコンが赤色で塗りつぶされます。この値を変更すれば好きな色に調整可能です。
• android:autoMirrored="true" を指定すると、右から左に読む言語（RTL）環境でもアイコンが自動的に反転表示されます。

アプリを実行して確認する

それでは、アプリを実行してみましょう。実機のAndroidスマートフォンをPCに接続している場合は、Android StudioのツールバーにあるRun（再生）アイコンをクリックし、接続したデバイスを選択してください。エミュレーターでも同様に確認できます。

ビルドが完了すると、端末画面の中央に赤色のプロフィールアイコンが表示されます。

まとめ

このように、VectorDrawableとpathDataを使えば、XMLファイルだけで高品質なプロフィールアイコンを描画できます。PNGなどのビットマップ画像と異なり、画面密度に関係なく常に滑らかに表示されるため、Material Designに準拠したUIを作る際にもおすすめの手法です。