안드로이드 이미지 버튼에 아이콘 이미지 출력하기. (Android Image Button with a Icon Image)

1. 이미지 버튼에 이미지와 텍스트 조합하기.

지난 글 [개발자 레시피 - 안드로이드 이미지 버튼에 텍스트 출력하기]에 이어, 이미지 버튼에 아이콘 형태의 이미지를 출력하는 방법에 대해 알아보도록 하겠습니다.

1.1 버튼의 배경 이미지(background)와 전면 이미지(src)

[개발자 레시피 - 안드로이드 이미지 버튼에 텍스트 출력하기]에서도 간단히 설명했듯이, 버튼에 이미지를 표시하는 방법은 크게 두 가지로 나눌 수 있습니다. "background" 속성을 사용하여 배경 이미지를 표시하는 것과, "src" 속성을 사용하여 전면 이미지를 표시하는 것이죠.

그런데 View 클래스에 정의된, Button과 ImageButton 클래스 모두에서 사용할 수 있는 "background" 속성과 달리, "src" 속성은 ImageButton에서만 사용할 수 있습니다. 그래서 배경 이미지 위에 아이콘 형태의 전면 이미지를 같이 표시하기 위해서는 ImageButton을 사용해야 합니다.

2. 이미지 버튼(ImageButton)에 아이콘 이미지 출력하기.

지금부터 이미지 버튼 위에 아이콘 이미지를 출력하는 방법을, 예제를 통해 살펴보도록 하겠습니다.

여기서 사용할 클래스는 Button 클래스가 아닌, ImageButton 클래스입니다.
그리고 앞서 여러 번 언급했듯이, 버튼의 배경은 background 속성을 사용하고, 버튼의 전면에 표시될 아이콘 이미지는 src 속성을 사용하여 표시합니다.

2.1 ImageButton 위젯의 배경에 표시될 이미지 리소스 추가.

ImageButton의 배경에 이미지를 출력하기 위해서는, 가장 먼저, 배경으로 사용될 이미지를 프로젝트의 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 ImageButton의 전면에 표시될 이미지 리소스 추가.

이제 ImageButton 위젯의 전면에 표시될 이미지를 추가합니다.

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

전면에 표시될 이미지 또한 "selector"를 사용하여, 버튼의 상태(normal, pressed)에 따라 다른 이미지를 표시하도록 만들겠습니다.

[STEP-4] "res/drawable/imgbtn_icons.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_smile"
        android:state_pressed="true" />
    <item android:drawable="@drawable/imgbtn_heart" />
</selector>

"selector"에 대한 간단한 설명 및 사용법은, [개발자 레시피 - 안드로이드 이미지 버튼]의 "3.2 "selector"를 지정한 리소스 XML 추가." 내용을 참고하시기 바랍니다.

2.3 ImageButton 추가

마지막으로, MainActivity의 Layout 리소스 XML 파일에 ImageButton을 추가합니다.

[STEP-5] "res/layout/activity_main.xml" - MainActivity에 ImageButton 추가.

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:background="@drawable/imgbtn_states"
        android:src="@drawable/imgbtn_icons" />

2.4 예제 실행 화면.

위에서 작성한 예제를 실행하면, 아래와 같이 배경 이미지 위에 기본 상태의 이미지(imgbtn_heart.png)가 표시됩니다.

그리고 버튼을 누르면, 버튼의 눌려짐 상태에 해당하는 이미지(imgbtn_smile.png)가 표시되는 것을 확인할 수 있습니다.

3. 이미지 버튼(Button)에 아이콘과 텍스트를 같이 표시하기.

지금까지 버튼에 이미지를 표시하기 위한 다양한 방법들을 살펴보았습니다. 정리해보자면 아래의 표에 있는 내용으로 요약될 수 있겠네요.

내용	클래스 및 속성	링크
ImageButton에 이미지 출력하기.	ImageButton [src]	링크 열기
ImageButton 상태(눌려짐)에 따라 다른 이미지 출력하기.	ImageButton [src]	링크 열기
Button 위젯을 사용하여 이미지 출력하기.	Button [background]	링크 열기
이미지 위에 텍스트 표시하기.	Button [background, text]	링크 열기
이미지 버튼 텍스트 모양 바꾸기	Button [background, text]	링크 열기
이미지 버튼(ImageButton)에 아이콘 이미지 출력하기.	ImageButton [background, src]	링크 열기

표에 정리된 방법들을 구분하는 기준은, "배경 이미지와 전면 이미지 그리고 텍스트를 어떻게 조합할 것인가"이며, 그 조합에 따라, Button 클래스를 사용할지 ImageButton 클래스를 사용할지가 결정됩니다.

그런데 표를 유심히 보면 눈치챌 수 있겠지만, 아직 한 가지 조합이 남아 있습니다. 바로, 배경 이미지 위에 전면 이미지와 텍스트를 모두 표시하는 방법입니다.

3.1 Button? ImageButton?

버튼에 이미지를 표시하기 위해 어떤 클래스를 사용할 것인지는, 표시하고자 하는 내용이 무엇인지에 따라 결정된다고 설명하였습니다. 공통적으로 사용할 수 있는 background 속성 외에, 전면 이미지 표시가 필요하면 ImageButton 클래스(src 속성), 텍스트를 표시하는 경우에는 Button 클래스(text 속성)를 사용했었죠.

그런데, 지금은 전면 이미지와 텍스트를 모두 표시해야 하는 상황이 되었습니다. ImageButton의 src 속성과 Button의 text 속성이 둘 다 필요한 경우인 것이죠. 왠지... 새로운 클래스가 등장할 분위기 ... ...

하지만 다행히도, Button 클래스에 이를 위한 속성이 이미 정의되어 있습니다. 바로 drawableTop, drawableBottom, drawableStart(drawableLeft), drawableEnd(drawableRight) 속성입니다.

그러므로 버튼의 배경 이미지 위에 전면 이미지와 텍스트를 같이 출력하기 위해서는 Button 클래스를 사용하면 됩니다.

3.2 텍스트 주위에 이미지를 표시하기 위한 속성.

사실, 텍스트의 주변에 이미지(Drawable)를 표시하기 위한 용도로 사용되는 drawableTop, drawableBottom, drawableStart(drawableLeft), drawableEnd(drawableRight) 속성은 TextView에 정의된 속성입니다. 그런데 Button은 TextView를 상속받은 클래스이므로 해당 속성들을 그대로 사용할 수 있는 것이죠.

각 속성은, 텍스트를 기준으로 위쪽(Top), 아래쪽(Bottom), 왼쪽(Left, Start), 오른쪽(Right, End)에 이미지를 표시하는 역할을 수행하며, [안드로이드 텍스트뷰 속성 4. [drawableLeft, drawableTop, drawableRight, drawableBottom, drawableStart, drawableEnd, drawablePadding]]에서 보다 상세한 내용을 확인할 수 있습니다. 특히, RTL(Right to Left) 설정에 따른 Start와 Left의 차이점에 대해서는 한번 쯤 살펴보시길 추천합니다.

3.3 이미지 버튼의 텍스트 주위에 이미지 표시하기.

자, 그럼 이미지 버튼의 배경 이미지 위에 전면 이미지와 텍스트를 같이 출력하는 예제를 살펴보겠습니다. Drawable 리소스에 이미지 파일을 추가하는 것은 앞선 예제들과 동일합니다.

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

[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>

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

[STEP-4] "res/drawable/imgbtn_icons.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_smile"
        android:state_pressed="true" />
    <item android:drawable="@drawable/imgbtn_heart" />
</selector>

마지막으로, MainActivity에 Button 클래스 추가한 다음, background 속성과 drawableStart 속성을 사용하여 배경 이미지와 전면 이미지를 표시합니다.

[STEP-5] "res/layout/activity_main.xml" - MainActivity에 Button 추가.

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:textSize="20sp"
        android:paddingLeft="50dp"
        android:background="@drawable/imgbtn_states"
        android:drawableStart="@drawable/imgbtn_icons"
        android:drawablePadding="-60dp"
        android:text="Button" />

참고로 위의 코드에서 paddingLeft에 "50dp" 값을 지정한 것과 drawablePadding에 음수("-60dp") 값을 지정한 것을 주의하세요. 해당 속성을 사용하여 전면 이미지가 표시되는 위치 및 텍스트 사이의 간격을 조절할 수 있습니다.

3.4 예제 실행 화면.

예제 코드를 작성하고 실행하면, 아래 그림과 같이 배경 이미지 위에 전면 이미지와 텍스트가 같이 표시되는 화면을 확인할 수 있습니다.

4. 참고.

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

.END.