Androidで円形背景にチェックマークを描画する方法を徹底解説

本記事では、Androidアプリで円形の背景を持つチェックマークを描画する方法を、実際のコード例とともにわかりやすく解説します。VectorDrawable（ベクター型ドローアブル）を利用すれば、画面密度に左右されず、どの端末でもきれいに表示されるチェックアイコンを簡単に作成できます。

完成イメージ

緑色の円形の中に白色のチェックマークが表示されるシンプルなUIを作成します。タスクの完了表示やステータスアイコンなど、さまざまな場面で活用できるデザインです。

手順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属性として後ほど作成する「background.xml」を指定しています。サイズは100dp×100dpに設定しています。

手順3：ドローアブルファイル（background.xml）を作成する

drawable/background.xml を新規作成し、以下のコードを記述します。

<vector xmlns:android="https://schemas.android.com/apk/res/android"
   android:width="24dp"
   android:height="24dp"
   android:autoMirrored="true"
   android:viewportWidth="426.667"
   android:viewportHeight="426.667">
   <path
      android:fillColor="#6AC259"
      android:pathData="M213.333,0C95.518,0 0,95.514 0,213.333s95.518,213.333 213.333,
                        213.333c117.828,0 213.333,-95.514 213.333,-213.333S331.157,
                        0213.333,0zM174.199,322.918l-93.935,-93.931l31.309,-31.309l62.626,
                        62.622l140.894,-140.898l31.309,31.309L174.199,322.918z" />
</vector>

このベクターファイルでは、緑色（#6AC259）の円形パスを描画し、その中にチェックマーク部分のパスデータを含めています。pathDataにはSVG形式のパスコマンドが使用されており、これにより円とチェックマークが1つのベクター画像として表現されます。

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

それでは、アプリを実際に実行してみましょう。実機のAndroidスマートフォンをPCに接続していることを前提とします。Android Studioからアプリを実行するには、プロジェクト内のアクティビティファイルを開き、ツールバーの実行アイコン をクリックしてください。接続したモバイルデバイスを選択すると、実機の画面に以下のようにチェックマークが表示されます。