안드로이드 이미지 버튼에 텍스트 출력하기. (Android Image Button with a Text)

1. 이미지 버튼의 확장.

안드로이드의 Button 위젯에 이미지를 표시하는 것은 앱의 화면에 생동감을 불어넣을 수 있는 방법이자, 사용 편의성을 높일 수 있는 하나의 수단입니다. 앱의 UI를 텍스트 위주로 구성하는 것보다, 쉽게 눈에 띌 수 있는 이미지를 사용하는 것이 사용자에게 좀 더 직관적인 사용성을 제공할 수 있는 것이죠.

하지만 이미지 버튼으로 UI를 구성하는 것은 쉬운 작업이 아닙니다. 미(美)적 요소가 결핍된 이미지 버튼을 사용하는 경우, 텍스트만으로 구성된 버튼을 사용하는 것보다 허접하게 보일 수 있고, 사용되는 이미지의 갯수가 많아질 수록 구현과 관리 방법이 복잡해지기 때문이죠.

게다가 어떤 경우에는, 이미지 버튼의 일부 표시 내용을 텍스트로 표시해야 하는 경우도 있습니다. 사용자로부터 입력받은 내용을 버튼에 표시한 다음, 해당 버튼을 누르면 입력받은 내용과 관련된 기능을 수행하도록 만드는 경우를 예로 들 수 있죠.

이렇듯, 무조건적인 이미지 버튼의 사용은 앱의 UI 개선을 위한 만능 해결책이 될 수 없습니다. 앱에 정의된 기능에 맞게 충분히 고려된 UI 디자인 설계에 따라, 이미지 위에 텍스트를 표시하는, 또는 이미지와 텍스트가 조합된, 아니면 두 개의 이미지를 결합한 버튼을 상황에 맞게 선택적으로 사용하는 것이 좋습니다.

그럼, 지금부터 [안드로이드 이미지 버튼]에서 살펴본 내용을 바탕으로, 이미지 버튼을 확장하는 몇 가지 방법에 대해 살펴보겠습니다.

2. 이미지 위에 텍스트 표시하기.

버튼에 이미지를 표시하는 방법은 Button 위젯의 background 속성을 사용하거나, ImageButton 위젯의 src 속성을 사용하는 것입니다. 각 속성의 차이는, 이미지를 배경(background)으로 그릴지, 내용(src content)으로 그릴지 정도로 구분하면 되는데요. [안드로이드 이미지 버튼]에서 봤듯이 기본적인 이미지 버튼을 만드는 용도로는 큰 차이가 없죠.

하지만 이미지 위에 텍스트를 표시해야 한다면, 상황이 다릅니다. 결과부터 말씀드리면, ImageButton 위젯은 불가능하고, Button 위젯만 가능합니다.

Button 클래스는 TextView를 상속한 클래스이고, ImageButton 클래스는 ImageView 클래스를 상속받은 클래스입니다. 그런데 텍스트 출력을 위한 text 속성은 TextView에 정의된 속성이죠. 그러므로 ImageButton 위젯은 텍스트를 표시할 수 없고, Button 위젯은 가능한 것입니다.

2.1 Button 위젯에 표시할 리소스 추가.

먼저, Button 클래스에 이미지를 표시하려면, background 속성에 이미지의 Drawable 리소스를 지정합니다. 물론 그보다 앞서 Button 클래스에 표시할 이미지를 프로젝트의 Drawable 리소스에 추가해야 겠죠.

[STEP-1] "/res/drawable" - Drawable 리소스에 이미지 파일 추가.

다음, "selector"를 사용한 리소스 XML을 추가하여 Button의 상태에 따라 표시될 이미지를 지정합니다.

[STEP-2] "res/drawable/imgbtn_states.xml" - "selector"를 지정한 리소스 XML 추가.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/imgbtn_pressed"
          android:state_pressed="true" />
    <item android:drawable="@drawable/imgbtn_default" />
</selector>

2.2 Button 위젯에 배경 이미지 표시.

이제 Button의 background 속성을 사용하여, 전 단계에서 추가한 이미지를 Button 위젯이 표시하는 코드를 작성합니다.

[STEP-3] "activity_main.xml" - MainActivity의 Button 배경에 이미지 표시.

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:minWidth="0dp"
        android:minHeight="0dp"
        android:background="@drawable/imgbtn_states"/>

2.3 Button 위젯에 텍스트 표시.

마지막으로 Button 위젯에 텍스트를 표시하기 위해 text 속성을 사용하여 텍스트를 지정합니다.

[STEP-4] "activity_main.xml" - MainActivity의 Button에 텍스트 표시.

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:minWidth="0dp"
        android:minHeight="0dp"
        android:background="@drawable/imgbtn_states"
        android:text="Button" />

2.4 예제 실행 화면.

예제를 실행하면 아래와 같이 이미지와 텍스트가 동시에 출력되는 버튼이 표시되는 것을 확인할 수 있습니다.

3. 텍스트 모양 바꾸기

Button 클래스는 TextView를 상속한 자식 클래스이므로, TextView에서 제공하는 속성을 거의 대부분 사용할 수 있습니다. 특히, 텍스트 표시 형태를 설정하는 속성들은 Button의 UI 수정이 필요한 곳에서 유용하게 사용될 수 있죠.

아래의 표는 텍스트 모양을 변경하기 위해 사용되는 몇 가지 유용한 속성들과 그 예제를 나타낸 것입니다. (속성에 대한 자세한 설명을 확인하려면, 아래의 표에서 속성 이름을 클릭하시기 바랍니다.)

속성	의미	예제
textSize	텍스트 크기
textColor	텍스트 색상
fontFamily	텍스트 폰트
gravity	텍스트 정렬
letterSpacing	글자 간 간격
shadowColor	그림자 설정
textStyle	Bold, Italic

5. 참고.

• 개발자 레시피 안드로이드 이미지 버튼.
  • [안드로이드 이미지 버튼]을 참고하세요.
• ImageButton 에 대한 자세한 도움말.
  • [안드로이드 개발 참조문서 ImageButton 항목]을 참고하세요.
• Buttons 가이드.
  • [안드로이드 개발 참조문서 Buttons 가이드]을 참고하세요.
• 상태에 따른 리소스 선택 방법에 대한 자세한 도움말.
  • [안드로이드 개발 참조문서 Drawable Resource 항목 - State List] 내용을 참고하세요.

.END.