개요
이 예제는 안드로이드의 표준 버튼(Button)에 서로 다른 색상을 적용하는 방법을 보여줍니다. selector 드로어블을 활용하면 버튼이 눌렸을 때, 포커스를 받았을 때, 평소 상태일 때 각각 다른 그라데이션 배경을 지정할 수 있습니다.
1단계 − 새 프로젝트 생성
Android Studio에서 File → New Project를 선택한 후, 프로젝트 생성에 필요한 모든 정보를 입력하여 새 프로젝트를 만듭니다.
2단계 − 레이아웃 코드 추가
res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.
<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android"
xmlns:app = "https://schemas.android.com/apk/res-auto"
xmlns:tools = "https://schemas.android.com/tools"
android:layout_width = "match_parent"
android:gravity = "center"
android:layout_height = "match_parent"
tools:context = ".MainActivity"
android:orientation = "vertical">
<Button
android:id = "@+id/parcleObject"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_alignParentTop = "true"
android:layout_centerHorizontal = "true"
android:layout_marginTop = "27dp"
android:background = "@drawable/background"
android:text = "Click here"/>
</LinearLayout>위 코드에서는 다양한 색상 변화를 확인할 수 있도록 버튼 뷰 하나를 화면 중앙에 배치했습니다. 핵심은 android:background = "@drawable/background" 속성으로, 이 속성을 통해 별도로 정의한 드로어블 리소스가 버튼 배경으로 적용됩니다.
3단계 − 배경 드로어블 생성
drawable 폴더에 background.xml 파일을 만들고 아래 코드를 추가합니다.
<?xml version = "1.0" encoding = "utf-8"?>
<selector
xmlns:android = "https://schemas.android.com/apk/res/android">
<item android:state_pressed = "true" >
<shape>
<gradient
android:startColor = "#f0ff00"
android:endColor = "#d9dd95"
android:angle = "270" />
<stroke
android:width = "3dp"
android:color = "#d1d3e3" />
<corners
android:radius = "3dp" />
<padding
android:left = "10dp"
android:top = "10dp"
android:right = "10dp"
android:bottom = "10dp" />
</shape>
</item>
<item android:state_focused = "true" >
<shape>
<gradient
android:endColor = "#fd5900"
android:startColor = "#eca680"
android:angle = "270" />
<stroke
android:width = "3dp"
android:color = "#d1d3e3" />
<corners
android:radius = "3dp" />
<padding
android:left = "10dp"
android:top = "10dp"
android:right = "10dp"
android:bottom = "10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:endColor = "#4356e7"
android:startColor = "#a1aaee"
android:angle = "270" />
<stroke
android:width = "3dp"
android:color = "#d1d3e3" />
<corners
android:radius = "3dp" />
<padding
android:left = "10dp"
android:top = "10dp"
android:right = "10dp"
android:bottom = "10dp" />
</shape>
</item>
</selector>이 코드의 구조를 살펴보면 다음과 같습니다.
- state_pressed = "true": 버튼을 누르고 있을 때 노란색 계열 그라데이션이 적용됩니다.
- state_focused = "true": 버튼에 포커스가 있을 때 주황색 계열 그라데이션이 적용됩니다.
- 기본 item: 위 두 상태에 해당하지 않을 때 파란색 계열 그라데이션이 적용됩니다.
각 상태마다 <gradient>로 시작색과 끝색을 지정하고, <stroke>로 3dp 두께의 테두리를, <corners>로 3dp의 둥근 모서리를, <padding>으로 내부 여백을 설정했습니다.
앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤 툴바의 Run 아이콘을 클릭하세요. 실행 대상 목록에서 모바일 기기를 선택하면, 기기 화면에 아래와 같은 기본 화면이 표시됩니다.
버튼을 클릭하면 눌린 상태의 색상이 적용되어 아래와 같은 결과가 나타납니다.
