【Android】点線・破線を作成する方法をサンプルコード付きで解説

はじめに

この記事では、Androidアプリの画面に点線（破線）を作成・表示する方法を、実際のサンプルコードとともに解説します。点線はリストの区切り線や入力欄の下線など、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"
    android:id="@+id/parent"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:gravity="center"
    android:background="#33FFFF00"
    android:orientation="vertical">
    <TextView
        android:id="@+id/text"
        android:textSize="18sp"
        android:textAlignment="center"
        android:text="click to show toast at top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <ImageView
        android:layout_width="match_parent"
        android:layout_marginTop="10dp"
        android:layout_height="5dp"
        android:src="@drawable/dotted"
        android:layerType="software" />
</LinearLayout>

上記のコードでは、TextViewとImageViewを縦方向に配置しています。ImageViewは高さ5dpの領域に点線を表示するためのもので、「@drawable/dotted」で後ほど作成するドローアブルを参照しています。

また、android:layerType="software" を指定している点にも注目してください。ハードウェアアクセラレーションが有効な環境では、破線が正しく描画されない場合があります。ソフトウェアレイヤーを明示的に指定することで、どの端末でも確実に点線を表示できます。

点線用ドローアブル（dotted.xml）を作成する

続いて、drawableフォルダ内に「dotted.xml」というファイルを新規作成し、以下のコードを記述します。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke
        android:width="1dp"
        android:color="#4fa5d5"
        android:dashWidth="8dp"
        android:dashGap="4dp" />
</shape>

ポイントとなるのは <stroke> タグの以下の2つの属性です。

• dashWidth： 破線1本分の長さ（例では8dp）
• dashGap： 破線と破線の間隔（例では4dp）

これらの値を調整することで、点線の密度や見た目を自由にカスタマイズできます。なお、android:shape を「rectangle」に変更すれば、四角形の枠線そのものを破線にすることも可能です。

手順3：MainActivity.java にコードを追加する

最後に、src/MainActivity.java に以下のコードを記述します。

package com.example.andy.myapplication;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
    int view = R.layout.activity_main;
    TextView text;
    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(view);
        text = findViewById(R.id.text);
        text.setText("Dotted line for text view");
    }
}

このアクティビティでは、TextViewのテキストを変更しているだけです。点線の描画はXMLだけで完結するため、Java（Kotlin）側で特別な処理を行う必要はありません。

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

それではアプリを実行してみましょう。実機のAndroidスマートフォンをPCに接続した状態で、Android Studioのツールバーにある「Run」アイコンをクリックし、接続したデバイスを選択して起動します。

実行すると、画面に青色の点線が表示されていることが確認できます。dashWidth や dashGap の値をいろいろ変えながら、自分のアプリに合ったデザインへ調整してみてください。