Rectangle で二重下線

久しぶりに Android で drawable リソースを作成した際に Rectangle ってなんだっけと思ったので、復習した結果をまとめておきます。Rectangle の例を軽く紹介した後に、二重下線の話になります。

Rectagle

Rectangle は、Android の <shape> タグで定義できる基本的な図形の一つで、四角形を描画します。背景のカスタマイズに多用され、ボタンやレイアウトの見た目を装飾するために使用できます。<shape>で定義できる図形は、他にも 線（line）、楕円（oval）、円環（ring） があったりします。

Rectangle では、枠線（stroke）、塗りつぶし色（solid）、角の丸み（corners）などが設定可能で、例えば、角を丸くしたボタンや、枠線だけのレイアウトを作成する際に便利です。Rectangleはシンプルな形状ながら、多様なデザイン表現が可能です。以下が主な図形の例になります。

以下、上から順にそれぞれの図形を定義した xml です。

1. 枠線

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <stroke android:width="2dp" android:color="@android:color/black" />
</shape>

2. 角丸

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/black" />
    <corners android:radius="80dp" />
</shape>

3. 左から右に線形グラデーション

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#09203f"
        android:endColor="#537895"
        android:type="linear"
        android:angle="0" />
</shape>

android:angle の値を変えるとグラデーションの方向が変わります。0 ~ 360 度までで設定するようです。

4. 中心から放射グラデーション

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@android:color/white"
        android:centerColor="#FF0000"
        android:endColor="@android:color/black"
        android:type="radial"
        android:gradientRadius="200dp" />
</shape>

図形の位置調整

XML で図形を作成して、View の background に設定すると、View の中心に図形が配置されるようになります。通常はこれで問題ないのですが、位置を調整する方法ってないかなと思いました。調べてみると位置を調整するには、layer-list が使えそうです。

Layer List とは？

<layer-list> は、Android の XML レイアウトで複数の描画オブジェクト（図形や画像など）を重ねて表示するために使用する要素です。各 item 要素で個別のレイヤーを定義し、それぞれのレイヤーを順番に重ねて表示します。

レイヤーには drawable 要素や shape などが指定でき、アイテムごとにマージンやオフセット（top、bottom、left、right）を設定することで、複雑な背景やデザインを作成できます。

本題の二重下線について

二重下線のアイデアとしては、<layer-list>で ２つの枠線付きの Rectangle を作成します。それらの枠線の位置を調整することで下線にするというかんじです。

二重下線 XML

この XML は、Androidの<layer-list>を使用して、2つの長方形の枠線を重ねて表示する定義になっています。

underline

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="-2dp" android:bottom="0dp"
        android:right="-2dp" android:left="-2dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
            <stroke android:width="1dp" android:color="@android:color/black" />
        </shape>
    </item>
    <item
        android:top="-2dp" android:bottom="2dp"
        android:right="-2dp" android:left="-2dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
            <stroke android:width="1dp" android:color="@android:color/black" />
        </shape>
    </item>
</layer-list>

XML 説明

1. 全体構成

2つの<item>要素で長方形の枠を重ねて描画しています。

2. 最初のitem要素

shapeは長方形（rectangle）で、内部は透明（transparent）で、黒い枠線（stroke）が1dpの幅で描かれています。

top、right、leftのマージンが-2dpに設定され、bottomが0dpです。これにより、この長方形は上、左右に2dp分拡張されて描かれます。つまり上、左右の枠線を描画範囲外に移動して、下の枠線のみ表示しています。

3. 2番目のitem要素

最初の item と同じく、透明な内部と黒い1dpの枠線を持つ長方形が描画されます。

top、right、leftのマージンが-2dpに設定され、bottomが2dpです。上、左右の枠線を描画範囲外に移動して、下の枠線のみを2dpだけ上に表示しています。

4. 結果

2つの下線が少しずつ上下にずらされて描画され、二重下線が表現できています。

二重下線の見本

TextView の background に作成した図形を設定した例です。

TextView の幅を wrap_content にすれば、文字のあるところだけ、下線を引くこともできます。

さいごに

TextView に下線を引く方法は、検索するとたくさんあると思うので、新しくはないですが、View の background に設定するだけでできるのは、ラクな方法でいいかなと思います。
実際に下線を使っているアプリは、これなので、よかったら使ってみてください。