[Android] Selector 사용해서 Button 상태에 따라 버튼 디자인 변경하기 (state_pressed)

✏️ TIL(Today I Learned)

Selector를 사용해서 버튼 상태에 따라 다른 그래픽 리소스가 적용되도록 했다.

우선 drawable폴더에서 xml파일을 생성한다.

 

버튼이 눌렸을 때와 눌리지 않았을 때의 버튼 UI를 Shape에 정의한다.

// button_clicked.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/intro_violet_dark"/>
    <stroke android:width="2dp" android:color="@color/intro_grey"/>
    <corners android:radius="15dp" />
</shape>

// button_unclicked.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/intro_violet"/>
    <corners android:radius="15dp" />
</shape>

 

그다음Selector를 사용해 버튼의 state_pressed가 true, false에 따라 원하는 shape을 적용한다. 

// button_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" android:drawable="@drawable/button_clicked"/>
    <item android:state_pressed="false" android:drawable="@drawable/button_unclicked"/>
</selector>



// 따로 shape파일을 만들지 않아도 아래와 같이 할 수 있다
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="false">
        <shape>
            <solid android:color="#F89AEE"/>
            <corners android:radius="15dp" />
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape>
            <solid android:color="#F89AEE"/>
            <stroke android:width="2dp" android:color="#000000"/>
            <corners android:radius="15dp" />
        </shape>
    </item>
</selector>

 

마지막으로 selector를 적용하고 싶은 Button에 background속성을 추가하면 된다.

android:background="@drawable/button_selector"

 

그럼, 아래와 같이 기본 버튼 모양에서 button_unclicked.xml에 정의한 디자인으로 변경된다.

 

그리고 버튼을 클릭하면 button_clicked.xml 가 적용되는 것을 확인할 수 있다.

 

 

---

 

📝 공부한 Kotlin 정리

Shape

shape은 UI 디자인을 위해 사용되는 XML 리소스이다. 이를 통해 다양한 모양, 색상, 그림자 등을 정의하여 UI 요소를 스타일링할 수 있다. 주로 버튼, 배경, 텍스트 상자 등의 모양을 지정하는 데 사용한다.

 

XML 태그:

• <shape>: 모양을 정의하는 기본 태그
• <solid>: 채울 색상을 정의
• <corners>: 모서리가 둥근 정도(radius) 설정
• <stroke>: 모양의 테두리 선을 정의 (width는 두께)

Selector

Selector는 다양한 상태에 따라 다른 그래픽 리소스를 선택하는 데 사용되는 XML 파일이다. 주로 버튼이나 리스트 아이템과 같은 UI 요소의 상태에 따라 배경색이나 이미지를 변경하는 데 활용한다.

 

Selector 상태:

• pressed: 터치하거나 선택한 상태
• focused: 포커스가 있을 때의 상태
• disabled: 비활성화된 상태
• selected: 선택되었을 때의 상태

  // 상태별로 버튼의 배경색을 다르게 설정하는 예시
  
  <selector xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:drawable="@color/button_normal_color" />
      <item android:state_pressed="true" android:drawable="@color/button_pressed_color" />
      <item android:state_focused="true" android:drawable="@color/button_focused_color" />
  </selector>​