[상태 드로어블(StateListDrawable)] 이미지 버튼 만들기 및 이미지 바꾸기

버튼의 background 속성을 이미지로 설정하면 이미지는 변화가 없다. 이번에는 버튼을 누르면 이미지가 바뀌는 버튼을 만들 것이다. 그러기 위해서는 드로어블(Drawable)을 사용하면 된다.

 

Drawable이란?

상태에 따라 그래픽이나 이미지가 선택적으로 보이게 해준다. 드로어블의 종류는 여러가지가 있다. 간단한 예시는 아래와 같다.

드로어블	설명
비트맵 드로어블(BitmapDrawable)	이미지 파일을 보여줄 때 사용 비트맵 그래픽 파일(png, jpg, gif 등)을 사용해서 생성
상태 드로어블(StateListDrawable)	상태별로 다른 비트맵 그래픽을 참조
전환 드로어블(TransitionDrawable)	두 개의 드로어블을 서로 전환
셰이프 드로어블(ShapeDrawable)	색상과 그라데이션을 포함하여 도형 모양을 정의
인셋 드로어블(InsetDrawable)	지정된 거리만큼 다른 드로어블을 들어서 보여줌
클립 드로어블(ClipDrawable)	레벨 값을 기준으로 다른 드로어블을 클리핑
스케일 드로어블(ScaleDrawable)	레벨 값을 기준으로 다른 드로어블의 크기를 변경

여기서 클립 드로어블은 자를 대고 자른다고 이해하면 좋을 것 같다. 자세히 알고싶으면 아래 공식 문서가 있다.

https://developer.android.com/guide/topics/graphics/drawables?hl=ko 

드로어블 개요  |  Android 개발자  |  Android Developers

이들 중 가장 많이 사용되는 드로어블은 상태 드로어블, 셰이프 드로어블이라고 한다.

 

상태 드로어블

상태 드로어블은 뷰의 상태에 따라 보여줄 그래픽을 다르게 지정할 수 있다. 버튼을 예시로 들면 버튼이 눌렸을 때와 눌리지 않았을 때에 버튼이 다르게 보이도록 할 수 있다는 것이다. 

 

우선 아래와 같이 app/src/main/res/drawable폴더에 이미지를 2개 넣어두자.

그런 뒤 drawable폴더에 xml파일을 하나 만들도록 하자. 나는 drawable2라는 이름으로 파일을 하나 만들었다.

 

이렇게 해서 만들어진 drawable2.xml파일을 아래와 같이 수정한다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    //버튼이 눌렸을 때 background가 b가 되도록 한다
    <item android:state_pressed="true"
        android:drawable="@drawable/b"/>
    //평소에는 background가 a가 되도록 한다.
    <item
        android:drawable="@drawable/a"/>

</selector>

이제 버튼을 만들도록 하자. 아래와 같이 activity_mai.xml로 이동하여 가운데에 버튼을 하나 추가하도록 하자.

그리고 좌측에서 버튼의 background 속성을 아까 만든 drawable2.xml로 지정한다. 아래와 같이 입력하면 된다.

//@drawable/아까 만든 파일명
@drawable/drawable2

그럼 이런 화면이 나올 수 있는데 backgroundTint속성 때문이다.

위와 같이 보라색으로 화면이 가득 찬다면 backgroundTint 속성과 backgroundTintMode를 아래와 같이 바꿔준다.

//backgroundTint
@android:color/transparent
//backgroundTintMode
add

그리고 나는 text부분을 지워 button글씨를 없앴다. 설정을 완료한 모습은 아래와 같다.

즉 activity_main.xml파일의 전체 코드는 아래와 같다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button2"
        //이 부분을 바꿔 버튼 크기 조절 가능. 단위는 dp권장
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        
        android:background="@drawable/drawable2"
        app:backgroundTint="@android:color/transparent"
        app:backgroundTintMode="add"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

그럼 아래와 같이 클릭할 때마다 이미지가 바뀌는 것을 볼 수 있다.