【Android】ベクタードローアブルでハート（ハート型）を描画する方法

はじめに

この記事では、Androidアプリでハート（愛の形）を描画する方法を解説します。VectorDrawable（ベクタードローアブル）を使用することで、画面の解像度に依存せず、どの端末でもきれいなハートマークを表示できます。

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

まず、Android Studioで新しいプロジェクトを作成しましょう。メニューから「File」→「New Project」を選択し、必要な項目をすべて入力してプロジェクトを生成します。

手順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>

上記のコードでは、画面中央にImageViewを配置し、その背景として後ほど作成する「background.xml」を指定しています。サイズは100dp×100dpに設定されています。

手順3：drawableリソース（background.xml）を作成する

続いて、res/drawable/background.xml を作成し、以下のベクター画像データを記述します。

<?xml version="1.0" encoding="utf-8"?>
<vector
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:autoMirrored="true"
    android:height="24dp"
    android:viewportHeight="492.719"
    android:viewportWidth="492.719"
    android:width="24dp" >
    <path android:fillColor="#D80027"
        android:pathData="M492.719,166.008c0,-73.486 -59.573,-133.056 -133.059,-133.056c-47.985,
                     0 -89.891,25.484 -113.302,63.569c-23.408,-38.085 -65.332,-63.569 -113.316,
                     -63.569C59.556,32.952 0,92.522 0,166.008c0,40.009 17.729,75.803 45.671,
                     100.178l188.545,188.553c3.22,3.22 7.587,5.029 12.142,5.029c4.555,
                     0 8.922,-1.809 12.142,-5.029l188.545,-188.553C474.988,241.811 492.719,
                     206.017 492.719,166.008z"/>

</vector>

ポイントは次のとおりです。
・pathDataには、SVGパス形式でハート型の輪郭を構成する座標データが定義されています。
・fillColorの「#D80027」はハートの塗りつぶし色（赤）です。お好みの色に変更できます。
・viewportWidth / viewportHeightはベクター内部の座標系のサイズを表しており、実際の表示サイズとは独立しています。

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

それでは、アプリを実行してみましょう。Android端末をパソコンにUSB接続している状態を前提とします。Android Studioでプロジェクト内のアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックしてください。実行デバイスとして接続中のスマートフォンを選択すると、端末の画面中央に赤いハートマークが表示されます。