【Android】XMLでTextViewの左側だけに境界線（ボーダー）を追加する方法

この記事では、XMLを使用してAndroidアプリのTextViewに「左側だけの境界線（ボーダー）」を追加する方法を解説します。layer-list（レイヤーリスト）を使ったドローアブルを作成することで、片側だけに色付きの線を簡単に表示できます。

手順1：新しいプロジェクトを作成する

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

手順2：activity_main.xmlにコードを追加する

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

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:app = "https://schemas.android.com/apk/res-auto"
    xmlns:tools = "https://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity">
    <LinearLayout
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        android:background = "@drawable/text_style"
        app:layout_constraintBottom_toBottomOf = "parent"
        app:layout_constraintLeft_toLeftOf = "parent"
        app:layout_constraintRight_toRightOf = "parent"
        app:layout_constraintTop_toTopOf = "parent">
        <TextView
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:layout_marginLeft = "10dp"
            android:text = "Hello World!"
            android:textSize = "30sp" />
   </LinearLayout>
</android.support.constraint.ConstraintLayout>

上記のコードでは、LinearLayoutの中にTextViewを配置し、LinearLayoutの背景として「text_style」というドローアブルを指定しています。続いて、drawableフォルダ内に「text_style.xml」というファイルを作成しましょう。

text_style.xml の作成

<?xml version = "1.0" encoding = "utf-8"?>
<layer-list xmlns:android = "https://schemas.android.com/apk/res/android">
   <item>
      <shape android:shape = "rectangle">
         <solid android:color = "#FFEB3B"/>
      </shape>
   </item>
   <item android:left = "4dp">
      <shape android:shape = "rectangle">
         <solid android:color = "#FFF"/>
      </shape>
   </item>
</layer-list>

このレイヤーリストでは、下層に黄色（#FFEB3B）の矩形を描画し、その上に左側を4dpずらした白色（#FFF）の矩形を重ねています。これにより、左端の4dp分だけ下の黄色が見える仕組みになり、結果として「左側のみの境界線」として表示されます。

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

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

package com.example.andy.myapplication;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
   }
}

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

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

このように、TextViewの左側にのみ境界線が表示されていることが確認できます。同じ要領でandroid:right・android:top・android:bottomのオフセットを指定すれば、右側・上側・下側にも個別に境界線を追加することが可能です。