Androidで閉じた図形（クローズドシェイプ）を描画する方法を解説

この記事では、Androidアプリで閉じた図形（クローズドシェイプ）を描画する方法を解説します。ベクタードローアブルを使って、円形の中に×印が描かれた図形を作成していきましょう。

ステップ1：Android Studioで新規プロジェクトを作成する

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」を指定しています。

ステップ3：drawableフォルダに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="612"
    android:viewportHeight="612">
    <path
        android:fillColor="#FF000000"
        android:pathData="M612,306C612,137.004 474.995,0 306,0C137.004,0 0,137.004 0,
        306c0,168.995 137.004,306 306,306C474.995,612 612,474.995 612,
        306zM168.3,424.032L286.333,306L168.3,187.967l19.667,-19.667L306,
        286.333L424.032,168.3l19.668,19.667L325.667,306L443.7,424.032L424.032,
        443.7L306,325.667L187.967,443.7L168.3,424.032z" />
</vector>

このベクターXMLでは、pathData属性に記述されたパス情報をもとに、円形と×印を組み合わせた閉じた図形が自動的に描画されます。fillColorで塗りつぶしの色を黒に指定しています。

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

それでは、実際にアプリケーションを動かしてみましょう。ここでは、実機のAndroidスマートフォンをPCに接続しているものとします。Android Studioからアプリを実行するには、プロジェクト内のアクティビティファイルを開き、ツールバーにあるRunアイコンをクリックしてください。表示される候補から自分のモバイル端末を選択すると、端末の画面に以下のように図形が表示されます。