[안드로이드] 커스텀 버튼 만들기(상태 드로어블)/이미지 버튼

커스텀 버튼 만들기

 

 안드로이드 스튜디오에서 Button태그를 이용해서 버튼을 만들면 다소 아쉬운 느낌이 없지않아 있다. 네모난 느낌에 모서리가 약간 둥근 버튼, 흠잡을 수 없는 기본 형태이지만 천편일률적으로 모든 버튼의 모양이 같다면 디자인이 이쁠 수 없다.

 

 그러나 다행히 안드로이드 스튜디오에서 버튼의 모양을 아주 쉽게 변경할 수 있다. 바로 drawable과 backgroud 속성을 이용해서 이다

 

1. 버튼에 이미지 적용

 

1. res -> drawable 에 사진 넣기

버튼에 이미지를 적용하기 위해 우선 이미지를 res폴더의 drawable 폴더 내부에 넣어준다.

나는 human이라는 이름의 파일을 drawable 내부에 삽입했다.

 

2. backgroud 속성 설정

 

activity파일 내부 <Button/>의 backgroud 속성에 

android:background="@drawable/human"

을 삽입한다 

 

(activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <Button
        android:id="@+id/btnToast"
        android:background="@drawable/human" //*drawable 삽입*
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="button"/>
 
</LinearLayout>

 3. 결과 확인

 

등록한 이미지로 버튼이 생성된 것을 확인할 수 있다.

(해당 이미지는 토스 메시지를 설정한 결과)

결과

 

 

2. 상태 드로어블

 

 뷰 상태에 따라서 보여줄 그래픽 등을 다르게 설정 가능하게 하는 것이 상태 드로어블이다. 앞서 만든 human이미지의 버튼에 클릭시 이미지가 달라지는 상태 드로어블을 설정한다.

 

1. 이미지 삽입

 

res -> drawable에 다른 이름의 사진 한 장을 추가한다. 나는 human_pressed라는 이름의 사진을 추가하였다. 

이 사진은 상태가 변하였을 때 보여지는 역할을 한다.

 

2. Drawable Resource File 만들기

드로어블 리소스 파일

drawable 폴더 -> New -> Drawable Resource File을 클릭해 파일 하나를 생성한다.

나는 파일 이름을 human_drawable.xml로 하였다.

 

파일 내부에 아래의 코드를 입력한다.

 

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

■ state_pressed가 true이면 drawable에 human_pressed를 적용한다.

■ 그렇지 않으면 drawable에 human을 적용한다.

 

3. 백그라운드 설정

 

 앞서 background 속성 설정을 한 것처럼 이제 버튼에 backgroud 속성을 설정해준다. 단 이번에는 xml파일을 소스로 사용한다. 이 말은, human이 아닌 human_drawable이 들어간다는 것이다.

즉 

android:background="@drawable/human_drawable"

을 사용한다. 나머지는 위와 똑같은 코드를 사용한다.

 

실행결과

버튼을 클릭하면 만세를 하는 human_pressed사진이 나오는 것을 볼 수 있다.

 

*안드로이드 state drawable(상태 드로어블) 정리

 

■android:state_pressed

 - 터치 또는 클릭 된 경우 발생

 

■android:state_focused

 - 뷰에 포커스가 위치했을 때, 예를 들어 EditText의 입력창이 활성화 된 경우 발생

 

■android:state_selected

 - 뷰를 선택했을 때 발생

 

■android:state_checkable

 - 체크 가능할 떄, 예를 들어 checkbox가 체크 된 경우 발생

 

■android:state_enabled

 - 사용 가능한 상태일 떄 발생

 

이미지 소스 원본

서 있는 사람

만세하는 사람