[Android] Button의 텍스트에 밑줄을 추가하는 5가지 완벽

안드로이드 버튼 텍스트에 밑줄 추가하는 5가지 방법 (완벽 가이드)

안드로이드 개발을 하다 보면 UI 디자인에서 버튼 텍스트에 밑줄을 추가해야 하는 경우가 자주 있습니다. 이는 강조나 하이퍼링크 효과를 주기 위해서인데요, 오늘은 안드로이드 앱 개발 시 버튼 텍스트에 밑줄을 적용하는 다양한 방법들을 자세히 알아보겠습니다.

---

목차

1. XML에서 TextView의 속성 사용
2. SpannableString 사용하기
3. HTML 텍스트로 밑줄 적용
4. Paint.UNDERLINE_TEXT_FLAG 사용
5. TextView vs Button에서의 밑줄 적용 차이점

1. XML에서 TextView의 속성 사용

가장 간단한 방법은 XML 레이아웃에서 직접 android:textDecoration 속성을 사용하는 것입니다. 하지만 안드로이드에서는 이 속성이 직접 지원되지 않기 때문에, 대신 다음과 같은 방법을 사용할 수 있습니다.

<Button
    android:id="@+id/underlineButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="밑줄 있는 버튼"
    style="@style/UnderlinedButtonStyle" />

그리고 styles.xml에 다음과 같이 스타일을 정의합니다:

<style name="UnderlinedButtonStyle" parent="Widget.AppCompat.Button">
    <item name="android:textAllCaps">false</item>
    <!-- 밑줄 스타일은 코드에서 적용해야 합니다 -->
</style>

이 방법은 레이아웃에서 직접 밑줄을 적용할 수 없어 추가 코드가 필요한 단점이 있습니다.

2. SpannableString 사용하기

SpannableString은 안드로이드에서 텍스트의 일부에 특별한 형식을 적용할 때 가장 많이 사용되는 방법입니다. 버튼 텍스트에 밑줄을 추가하는 방법은 다음과 같습니다:

// Java 코드
Button button = findViewById(R.id.underlineButton);
SpannableString content = new SpannableString("밑줄 있는 버튼 텍스트");
content.setSpan(new UnderlineSpan(), 0, content.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
button.setText(content);

Kotlin으로는 다음과 같이 작성할 수 있습니다:

// Kotlin 코드
val button = findViewById<Button>(R.id.underlineButton)
val content = SpannableString("밑줄 있는 버튼 텍스트")
content.setSpan(UnderlineSpan(), 0, content.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
button.text = content

이 방법의 장점은 텍스트의 특정 부분에만 선택적으로 밑줄을 적용할 수 있다는 점입니다.

3. HTML 텍스트로 밑줄 적용

안드로이드는 HTML 형식의 텍스트를 지원하기 때문에, HTML 태그를 사용하여 밑줄을 적용할 수도 있습니다:

// Java 코드
Button button = findViewById(R.id.underlineButton);
String htmlText = "<u>밑줄 있는 버튼 텍스트</u>";
button.setText(Html.fromHtml(htmlText, Html.FROM_HTML_MODE_COMPACT));

Kotlin에서는:

// Kotlin 코드
val button = findViewById<Button>(R.id.underlineButton)
val htmlText = "<u>밑줄 있는 버튼 텍스트</u>"
button.text = HtmlCompat.fromHtml(htmlText, HtmlCompat.FROM_HTML_MODE_COMPACT)

Android N(API 레벨 24) 이상에서는 Html.FROM_HTML_MODE_COMPACT를 사용해야 하며, 이전 버전에서는 다음과 같이 사용합니다:

// API 레벨 24 미만
button.text = Html.fromHtml(htmlText)

4. Paint.UNDERLINE_TEXT_FLAG 사용

좀 더 프로그래밍적인 방법으로, Paint 클래스의 플래그를 사용하여 밑줄을 적용할 수 있습니다:

// Java 코드
Button button = findViewById(R.id.underlineButton);
button.setPaintFlags(button.getPaintFlags() | Paint.UNDERLINE_TEXT_FLAG);
button.setText("밑줄 있는 버튼 텍스트");

Kotlin에서는:

// Kotlin 코드
val button = findViewById<Button>(R.id.underlineButton)
button.paintFlags = button.paintFlags or Paint.UNDERLINE_TEXT_FLAG
button.text = "밑줄 있는 버튼 텍스트"

이 방법의 장점은 코드가 간결하고 전체 텍스트에 일관된 형식을 적용할 수 있다는 점입니다.

5. TextView vs Button에서의 밑줄 적용 차이점

Button은 내부적으로 TextView를 확장한 것이기 때문에, TextView에 적용할 수 있는 대부분의 텍스트 형식 지정 방법이 Button에도 적용됩니다. 그러나 버튼은 기본적으로 배경, 패딩, 테두리 등 추가적인 스타일링이 적용되어 있습니다.

특히 Material Design 테마를 사용하는 앱에서는 Button 위젯에 android:textAllCaps="true"가 기본값으로 설정되어 있어, 텍스트가 자동으로 대문자로 변환될 수 있습니다. 이 경우 다음과 같이 설정하여 원래 대소문자를 유지할 수 있습니다:

<Button
    android:id="@+id/underlineButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAllCaps="false"
    android:text="밑줄 있는 버튼 텍스트" />

실용 예제: 하이퍼링크 효과 주기

밑줄이 있는 버튼은 종종 하이퍼링크처럼 보이게 하기 위해 사용됩니다. 다음은 밑줄과 클릭 리스너를 조합한 완전한 예제입니다:

// Kotlin 코드
val linkButton = findViewById<Button>(R.id.linkButton)

// 스타일 적용
linkButton.paintFlags = linkButton.paintFlags or Paint.UNDERLINE_TEXT_FLAG
linkButton.setTextColor(ContextCompat.getColor(this, R.color.link_blue))
linkButton.textAllCaps = false  // 대문자 변환 방지
linkButton.background = null    // 배경 제거하여 일반 텍스트처럼 보이게

// 클릭 리스너 설정
linkButton.setOnClickListener {
    val intent = Intent(Intent.ACTION_VIEW, Uri.parse("https://example.com"))
    startActivity(intent)
}

결론

안드로이드 앱 개발에서 버튼 텍스트에 밑줄을 적용하는 방법은 다양합니다. 상황과 요구사항에 맞는 방법을 선택하면 됩니다:

1. 간단한 적용을 위해서는 Paint.UNDERLINE_TEXT_FLAG
2. 텍스트 일부만 강조하려면 SpannableString
3. HTML과 함께 다양한 형식을 적용하려면 Html.fromHtml()

이러한 방법들을 활용하여 앱의 UI를 더욱 직관적이고 사용자 친화적으로 만들 수 있습니다.

긴 글 읽어주셔서 감사합니다.

끝.