본문 바로가기
Development/Android

[Android] Android Button 텍스트 밑줄 추가하는 4가지 방법

by 은스타 2019. 9. 22.
반응형
Android Button 텍스트 밑줄 추가하는 4가지 방법

Android Button 텍스트 밑줄 추가하는 4가지 방법

Android 개발을 하다 보면 UI 디자인에서 버튼 텍스트에 밑줄을 추가해야 하는 경우가 자주 있습니다. 이는 강조나 하이퍼링크 효과를 주기 위해서인데요, 링크처럼 보이게 하거나 특정 텍스트를 강조할 때 유용합니다. 이 글에서는 Android 앱 개발 시 버튼 텍스트에 밑줄을 적용하는 4가지 실전 방법과 각각의 장단점, 그리고 실무에서 활용할 수 있는 완성 코드까지 상세히 알아보겠습니다.

목차
1. Paint.UNDERLINE_TEXT_FLAG로 간단하게 적용
2. SpannableString으로 부분 밑줄 적용
3. HTML 태그로 밑줄 적용
4. 4가지 방법 비교와 실전 예제

#1. Paint.UNDERLINE_TEXT_FLAG로 간단하게 적용
가장 간단하고 코드가 간결한 방법은 Paint 클래스의 플래그를 사용하는 것입니다. 전체 텍스트에 일관된 밑줄을 적용할 때 적합합니다.
1) 기본 사용법
(1) Java 코드
// Java 코드
Button button = findViewById(R.id.underlineButton);
button.setPaintFlags(button.getPaintFlags() | Paint.UNDERLINE_TEXT_FLAG);
button.setText("밑줄 있는 버튼 텍스트");
(2) Kotlin 코드
// Kotlin 코드
val button = findViewById<Button>(R.id.underlineButton)
button.paintFlags = button.paintFlags or Paint.UNDERLINE_TEXT_FLAG
button.text = "밑줄 있는 버튼 텍스트"
. . . . .
2) Paint Flag 방식의 장단점
(1) 장점
코드가 매우 간결하고 이해하기 쉽습니다
② 전체 텍스트에 일관된 형식을 적용할 수 있습니다
③ 성능이 우수합니다
④ 추가 객체 생성 없이 간단하게 적용 가능합니다
(2) 단점
① 텍스트의 일부분만 밑줄을 적용할 수 없습니다
② 다른 텍스트 스타일과 혼합 사용이 제한적입니다
. . . . .
3) 실전 활용 코드
// Kotlin - 버튼 초기화 및 밑줄 적용
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val underlineButton = findViewById<Button>(R.id.underlineButton)
        underlineButton.paintFlags = underlineButton.paintFlags or Paint.UNDERLINE_TEXT_FLAG
        underlineButton.text = "회원가입 약관 보기"
    }
}

#2. SpannableString으로 부분 밑줄 적용
SpannableString은 Android에서 텍스트의 일부에 특별한 형식을 적용할 때 가장 많이 사용되는 방법입니다. 텍스트 중 특정 부분만 밑줄을 추가하고 싶을 때 적합합니다.
1) 기본 사용법
(1) Java 코드
// 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);
(2) 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
. . . . .
2) 부분 밑줄 적용하기
SpannableString의 진가는 텍스트 중 특정 부분만 밑줄을 적용할 수 있다는 점입니다.
// Kotlin - 텍스트 일부만 밑줄 적용
val button = findViewById<Button>(R.id.termsButton)
val fullText = "이용약관 및 개인정보처리방침에 동의합니다"
val spannableString = SpannableString(fullText)

// "이용약관"에만 밑줄 적용 (0~4)
spannableString.setSpan(
    UnderlineSpan(),
    0,
    4,
    Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)

// "개인정보처리방침"에만 밑줄 적용 (8~17)
spannableString.setSpan(
    UnderlineSpan(),
    8,
    17,
    Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)

button.text = spannableString
. . . . .
3) 다양한 스타일 조합하기
SpannableString은 밑줄뿐만 아니라 여러 스타일을 함께 적용할 수 있습니다.
// Kotlin - 밑줄 + 색상 + 굵게
val button = findViewById<Button>(R.id.styledButton)
val text = "중요한 공지사항입니다"
val spannableString = SpannableString(text)

// "중요한"에 밑줄 + 빨간색 + 굵게
spannableString.setSpan(UnderlineSpan(), 0, 3, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
spannableString.setSpan(
    ForegroundColorSpan(Color.RED),
    0,
    3,
    Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
spannableString.setSpan(
    StyleSpan(Typeface.BOLD),
    0,
    3,
    Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)

button.text = spannableString

#3. HTML 태그로 밑줄 적용
Android는 HTML 형식의 텍스트를 지원하기 때문에, HTML 태그를 사용하여 밑줄을 적용할 수도 있습니다.
1) 기본 사용법
(1) Java 코드
// Java 코드
Button button = findViewById(R.id.underlineButton);
String htmlText = "<u>밑줄 있는 버튼 텍스트</u>";
button.setText(Html.fromHtml(htmlText, Html.FROM_HTML_MODE_COMPACT));
(2) Kotlin 코드 (권장)
// Kotlin 코드 - HtmlCompat 사용 (권장)
val button = findViewById<Button>(R.id.underlineButton)
val htmlText = "<u>밑줄 있는 버튼 텍스트</u>"
button.text = HtmlCompat.fromHtml(htmlText, HtmlCompat.FROM_HTML_MODE_COMPACT)
. . . . .
2) API 레벨별 처리
Android N(API 레벨 24) 이상에서는 Html.FROM_HTML_MODE_COMPACT를 사용해야 합니다.
// Kotlin - API 레벨 호환성 처리
val button = findViewById<Button>(R.id.underlineButton)
val htmlText = "<u>밑줄 있는 버튼 텍스트</u>"

button.text = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
    Html.fromHtml(htmlText, Html.FROM_HTML_MODE_COMPACT)
} else {
    @Suppress("DEPRECATION")
    Html.fromHtml(htmlText)
}
. . . . .
3) HTML로 다양한 스타일 적용
// Kotlin - HTML로 여러 스타일 조합
val button = findViewById<Button>(R.id.styledButton)
val htmlText = """
    <font color="#FF0000"><b><u>중요한</u></b></font> 공지사항입니다
""".trimIndent()

button.text = HtmlCompat.fromHtml(htmlText, HtmlCompat.FROM_HTML_MODE_COMPACT)

#4. 4가지 방법 비교와 실전 예제
1) 방법별 비교표
방법 장점 단점 권장 상황
Paint.UNDERLINE_TEXT_FLAG 코드 간결
성능 우수
전체 텍스트만 가능
스타일 조합 제한
전체 텍스트 밑줄
간단한 적용
SpannableString 부분 적용 가능
다양한 스타일 조합
코드 복잡
인덱스 계산 필요
부분 밑줄
복합 스타일
HTML 태그 직관적
웹 개발자 친숙
성능 낮음
API 레벨 고려 필요
간단한 HTML 포맷
웹 콘텐츠 표시
. . . . .
2) TextView vs Button 차이점
Button은 내부적으로 TextView를 확장한 것이기 때문에, TextView에 적용할 수 있는 대부분의 텍스트 형식 지정 방법이 Button에도 적용됩니다.
(1) 주의사항 - textAllCaps 속성
Material Design 테마를 사용하는 앱에서는 Button 위젯에 android:textAllCaps="true"가 기본값으로 설정되어 있어, 텍스트가 자동으로 대문자로 변환될 수 있습니다.
<!-- XML에서 대문자 변환 방지 -->
<Button
    android:id="@+id/underlineButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAllCaps="false"
    android:text="밑줄 있는 버튼 텍스트" />
. . . . .
3) 실전 예제 - 하이퍼링크 스타일 버튼
밑줄이 있는 버튼은 종종 하이퍼링크처럼 보이게 하기 위해 사용됩니다. 다음은 밑줄과 클릭 리스너를 조합한 완전한 예제입니다.
(1) XML 레이아웃
<!-- activity_main.xml -->
<Button
    android:id="@+id/linkButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAllCaps="false"
    android:background="@android:color/transparent"
    android:text="자세히 보기" />
(2) Kotlin 코드
// Kotlin - 완전한 하이퍼링크 스타일 버튼
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val linkButton = findViewById<Button>(R.id.linkButton)

        // 1. 밑줄 적용
        linkButton.paintFlags = linkButton.paintFlags or Paint.UNDERLINE_TEXT_FLAG

        // 2. 링크 색상 적용
        linkButton.setTextColor(ContextCompat.getColor(this, R.color.link_blue))

        // 3. 대문자 변환 방지
        linkButton.textAllCaps = false

        // 4. 배경 제거
        linkButton.background = null

        // 5. 클릭 리스너 설정
        linkButton.setOnClickListener {
            val intent = Intent(Intent.ACTION_VIEW, Uri.parse("https://example.com"))
            startActivity(intent)
        }
    }
}
(3) 색상 리소스 정의
<!-- res/values/colors.xml -->
<resources>
    <color name="link_blue">#1E88E5</color>
</resources>
. . . . .
4) 실전 예제 - 약관 동의 버튼
// Kotlin - 약관 동의 화면의 부분 밑줄 예제
class SignUpActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_signup)

        val termsButton = findViewById<Button>(R.id.termsButton)
        val fullText = "이용약관 및 개인정보처리방침에 동의합니다"
        val spannableString = SpannableString(fullText)

        // "이용약관" 밑줄 + 클릭
        val termsSpan = object : ClickableSpan() {
            override fun onClick(widget: View) {
                // 이용약관 화면으로 이동
                startActivity(Intent(this@SignUpActivity, TermsActivity::class.java))
            }
        }
        spannableString.setSpan(termsSpan, 0, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

        // "개인정보처리방침" 밑줄 + 클릭
        val privacySpan = object : ClickableSpan() {
            override fun onClick(widget: View) {
                // 개인정보처리방침 화면으로 이동
                startActivity(Intent(this@SignUpActivity, PrivacyActivity::class.java))
            }
        }
        spannableString.setSpan(privacySpan, 8, 17, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

        termsButton.text = spannableString
        termsButton.movementMethod = LinkMovementMethod.getInstance()
    }
}

마무리
Android 앱 개발에서 버튼 텍스트에 밑줄을 적용하는 방법은 다양합니다. 상황과 요구사항에 맞는 방법을 선택하면 앱의 UI를 더욱 직관적이고 사용자 친화적으로 만들 수 있습니다.
방법별 선택 기준
간단한 전체 밑줄 - Paint.UNDERLINE_TEXT_FLAG 사용 (가장 추천)
부분 밑줄 또는 복잡한 스타일 - SpannableString 사용
간단한 HTML 포맷 - Html.fromHtml() 사용
하이퍼링크 스타일 - Paint Flag + 색상 + 배경 제거 조합
실무에서는 대부분 Paint.UNDERLINE_TEXT_FLAG 방식이 가장 많이 사용되며, 부분 밑줄이 필요한 경우에만 SpannableString을 사용합니다. textAllCaps 속성을 false로 설정하는 것을 잊지 마세요. 이러한 방법들을 활용하여 앱의 UI를 더욱 직관적이고 사용자 친화적으로 만들어보세요!
긴 글 읽어주셔서 감사합니다.

끝.
반응형