[Android, Kotlin] editText의 toggle icon이 반대로 되었을 때 해결 방법

TextInputEditText

기본 edittext와 다르게 더 다양한 기능을 지원하는 edit text의 한 종류이다.

TextInputEditText에는 가려야 할 텍스트(비밀번호)가 있는 경우 passwordToggleEnabled라는 옵션을 사용할 수 있다.

passwordToggleEnabled 을 적용한 edit text 예

 

하지만 passwordToggleEnabled 을 사용하다 보면 이상한 문제를 만날 수 있는데

 

바로 비밀번호는 보이지만 아이콘은 눈을 가리고(?) 있게 뜨는 문제!

반대도 마찬가지

이번에는 이 문제를 내가 해결한 방법에 대해 포스팅을 하겠다.

 

먼저 toggle icon이 클릭되었을 때 나오게 하는 아이콘들을 설정한다.

toogle_icon_status.xml

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

클릭되었거나 아닐 때의 아이콘은 아무거나 정해도 상관없다.

 

 

현재 edittext가 있는 xml 파일에 적용해준다.

activiy_login.xml(editText 부분)

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/pw_input_layout"
    . . .
    app:passwordToggleEnabled="true"
    app:passwordToggleTint="@null"
    app:passwordToggleDrawable="@drawable/toggle_icon_status">

    <com.google.android.material.textfield.TextInputEditText
        . . .
        android:inputType="textPassword"/>
</com.google.android.material.textfield.TextInputLayout>

 

TextInputLayout의

• app:passwordToggleEnabled="true"
• app:passwordToggleTint="@null"
• app:passwordToggleDrawable="@drawable/toggle_icon_status"

이 3개중 하나라도 없으면 문제가 생겼었다.

 

결과 화면

적용이 잘 돼있는 것을 볼 수 있다.