[Android/Kotlin] startIcon, endIcon color change(색상 바꾸기)

Kotlin으로 TextInputLayout icon 변경하기 (Material Design)

setStartIconDrawable / setStartIconTintList /  setStartIconTintMode 사용하기

 

다음은 머티리얼 디자인에서 제공하는 text field(EditText)의 starticon과 색상을 바꾸는 예제 코드이다.

 

edittext에 값을 입력한 후에 중복 검사 버튼을 누르면 서버에 id가 전달되고 return 값이 true일 경우 starticon을 drawble 폴더 내에 있는 check_circle이라는 아이콘으로 변경해준다. 그러면 아이콘 색상과는 상관없이 default로 설정된 색상이 적용된다.

좌 : 포커스가 없을 때 / 우: 포커스가 있을 때

 

이러한 아이콘 색상을 custom하는 방법은 두가지가 있다.

좌 : 포커스가 없을 때 / 우: 포커스가 있을 때

 

focus와 상관없이 한가지 색상 적용하기

만약 focus에 상관없이 동일한 색상을 적용해준다면 아래처럼 setStartIconDrawble을 통해 아이콘을 변경한 후에 setStartIconTintList를 통해 색상을 변경해준다.

ColorStateList.valueOf() 안에 원하는 색상을 입력해주면 되는데 안드로이드에서 기본적으로 제공하는 색상을 사용하고 싶은 경우에는 Color.GREEN 이런식으로 사용이 가능하다.

resources.getColor(R.color.green)은 내가 colors.xml에 작성한 색상을 가져오기 위한 방식이다.

TextInputLayout_Id.setStartIconDrawable(R.drawable.ic_check_circle)
TextInputLayout_Id.setStartIconTintList(ColorStateList.valueOf(resources.getColor(R.color.green)))

 

요소

android:state_pressed

객체가 눌렸을 때(예: 버튼을 터치하거나 클릭한 경우) 이 항목을 사용해야 한다면 'true'이며 기본값 즉, 버튼이 눌리지 않은 상태에서 이 항목을 사용해야 한다면 'false'입니다.

 

android:state_focused

객체에 포커스가 있을 때(예: 트랙볼/D패드를 사용하여 버튼이 강조표시된 경우) 이 항목을 사용해야 한다면 'true'이며 기본값 즉, 포커스가 없는 상태에서 이 항목을 사용해야 한다면 'false'입니다.

 

android:state_selected

객체가 선택되었을 때(예: 탭이 열린 경우) 이 항목을 사용해야 한다면 'true'이며 객체가 선택되지 않았을 때 이 항목을 사용해야 한다면 'false'입니다.

 

android:state_checkable

객체가 선택 가능할 때 이 항목을 사용해야 한다면 'true'이고 객체가 선택 가능하지 않을 때 이 항목을 사용해야 한다면 'false'입니다. (객체가 선택 가능한 위젯과 선택 가능하지 않은 위젯 간에 전환이 가능한 경우에만 유용합니다.)

 

android:state_checked

객체가 선택될 때 이 항목을 사용해야 한다면 'true'이며 객체가 선택되지 않았을 때 이 항목을 사용해야 한다면 'false'입니다.

 

android:state_enabled

객체가 사용 설정될 때(터치/클릭 이벤트를 수신할 수 있음) 이 항목을 사용해야 한다면 'true'이며 객체가 중지될 때 이 항목을 사용해야 한다면 'false'입니다.

 

android:state_window_focused

애플리케이션 창에 포커스가 있을 때(애플리케이션이 포그라운드에 있음) 이 항목을 사용해야 한다면 'true'이며 애플리케이션 창에 포커스가 없을 때(예: 알림 창이 풀다운되거나 대화상자가 표시됨) 이 항목을 사용해야 한다면 'false'입니다.

 

상태에 따라 색상 적용하기 (use xml)

TextInputLayout_Id.setStartIconTintList(ContextCompat.getColorStateList(applicationContext, R.color.starticon_selector))

 

res폴더 내에 color 폴더를 만든 후 starticon_selector.xml 파일을 만든다. 위에 설명한 요소를 원하는대로 적절히 사용하여 코드를 작성한다.

 

[res] - [color] - starticon_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/green" android:state_focus="true"/> <!-- focus 있을 때 -->
    <item android:color="@color/mainBlue"/> <!-- 기본 상태 -->
</selector>

 

 

↓TextInputLayout 공식 문서

https://developer.android.com/reference/com/google/android/material/textfield/TextInputLayout.html

TextInputLayout  |  Android 개발자  |  Android Developers

 

↓ColorStateList 공식 문서

developer.android.com/guide/topics/resources/color-list-resource

색상 상태 목록 리소스  |  Android 개발자  |  Android Developers

 

 

 

본 작성자는 안드로이드 개발을 공부하고 있는 학생으로 피드백 및 질문을 환영합니다. 그러나 무단복제 및 배포는 정중하게 사양하고 있으며, 참고 사이트로 링크를 남기실 때는 동의를 구해주시기 바랍니다.