AndroidのレイアウトXMLファイルで下線付きテキストを定義する方法

AndroidのレイアウトXMLファイルで下線付きテキストを定義する方法

この記事では、Androidアプリで下線付きのテキストを表示する方法を、サンプルコードとともにステップごとに解説します。JavaコードでSpannableStringとUnderlineSpanを使う方法に加えて、XMLリソースだけで下線を実現するシンプルなテクニックもあわせて紹介します。

手順1：Android Studioで新規プロジェクトを作成する

Android Studioを起動し、メニューから「File」→「New Project」を選択します。必要な項目を入力して、新しいプロジェクトを作成してください。

手順2：レイアウトファイル（res/layout/activity_main.xml）を編集する

以下のコードをres/layout/activity_main.xmlに追加します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:padding="16dp"
        android:text="Content"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Large" />

</RelativeLayout>

このレイアウトでは、RelativeLayoutの中にTextViewを1つ配置し、layout_centerInParent属性によって画面中央に表示するように設定しています。

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

次に、src/MainActivity.javaに以下のコードを追加します。

package app.tutorialspoint.com.sample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.SpannableString;
import android.text.style.UnderlineSpan;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView textView = findViewById(R.id.textView);
        SpannableString content = new SpannableString("Content");
        content.setSpan(new UnderlineSpan(), 0, content.length(), 0);
        textView.setText(content);
    }
}

SpannableStringに対してUnderlineSpanをセットすることで、TextViewに表示されるテキスト全体に下線が引かれます。setSpan()の第2引数と第3引数で下線を適用する文字範囲（ここでは先頭の0から文字列の長さまで）を指定できるのがポイントです。部分的に下線を引きたい場合も、この範囲を変更するだけで対応できます。

補足：XMLリソースだけで下線を定義する方法

Javaコードを書かずに下線付きテキストを定義したい場合は、strings.xmlでHTMLタグの<u>を使う方法が便利です。

<string name="underlined_text"><u>下線付きのテキスト</u></string>

この文字列をレイアウトXMLのandroid:text="@string/underlined_text"として指定すれば、コードを一切書かずに下線付きテキストを表示できます。<b>（太字）や<i>（斜体）といった基本的なタグも同じ要領で利用可能です。

手順4：AndroidManifest.xmlを確認する

androidManifest.xmlは以下のようになります。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.tutorialspoint.com.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>

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

それでは、アプリを実行してみましょう。実機のAndroidスマートフォンをパソコンに接続していることを前提とします。Android Studioからアプリを実行するには、プロジェクト内のアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックします。デバイス選択ダイアログで接続したモバイル端末を選択すると、実機の画面に下線付きテキストが表示された結果を確認できます。