XML로 Android TextView에 왼쪽 테두리만 추가하는 방법

이 글에서는 XML을 사용해 Android의 TextView에 왼쪽 테두리(한쪽 면 테두리)를 추가하는 방법을 단계별로 알아봅니다. Android는 기본적으로 특정 한쪽 면에만 테두리를 지정하는 속성을 제공하지 않기 때문에, 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의 android:background 속성에 @drawable/text_style을 지정한 부분입니다. 이제 drawable 폴더에 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>

layer-list의 동작 원리

layer-list는 여러 개의 드로어블을 순서대로 겹쳐 그리는 방식입니다. 먼저 노란색(#FFEB3B) 사각형을 전체 영역에 그린 뒤, 그 위에 왼쪽으로 4dp만큼 들여쓴 흰색(#FFF) 사각형을 덮어 그립니다. 그 결과 맨 왼쪽 4dp 영역에만 노란색이 남게 되어, 마치 TextView의 왼쪽에만 테두리가 있는 것처럼 보입니다.

3단계 — MainActivity 코드

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의 왼쪽에만 노란색 테두리가 표시됩니다.

이처럼 layer-list를 활용하면 TextView뿐 아니라 버튼, 카드 등 어떤 뷰든 원하는 한쪽 면에만 테두리를 쉽게 적용할 수 있습니다. 테두리 두께를 조절하려면 <item android:left="4dp">의 값을 변경하고, 색상은 각 <solid> 요소에서 수정하면 됩니다.

참고: 최신 Android Studio에서 생성된 프로젝트는 AndroidX 라이브러리를 사용하므로, 위 코드의 android.support.constraint.ConstraintLayout은 androidx.constraintlayout.widget.ConstraintLayout으로, android.support.v7.app.AppCompatActivity는 androidx.appcompat.app.AppCompatActivity로 바꿔 사용하면 됩니다.