소개

Android의 머티리얼 디자인에 따라 입력 필드를 만드는 데 Android Design Support Library의 TextInputLayout를 사용하는 경우가 많습니다. 이것에는 패스워드의 표시/비표시를 전환하는 기능( password visibility toggle )이 갖추어져 있습니다만, 디자인을 변경할 때에 조금 빠졌으므로 메모합니다.

구현

변경 장소

비밀번호 표시/숨기기 전환 버튼( password visibility toggle button )의 아이콘과 색상을 각각 전환합니다.

실패 예

ic_password_toggle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false">
        <bitmap android:src="@drawable/ic_lock" android:tint="#9e9e9e" />
    </item>
    <item android:state_checked="true">
        <bitmap android:src="@drawable/ic_lock_open" android:tint="@color/colorAccent" />
    </item>
</selector>

activity_main.xml

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintAnimationEnabled="true"
    app:hintEnabled="true"
    app:passwordToggleDrawable="@drawable/ic_password_toggle"
    app:passwordToggleEnabled="true">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/hint_password"
        android:inputType="textPassword" />

</android.support.design.widget.TextInputLayout>

확실히 이것으로 문제 없을 것 같습니다만, passwordToggleTint 를 지정하고 있지 않으므로, 디폴트로 채워져 버려, 색이 바뀌지 않습니다.

성공 예

ic_password_toggle.xml

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

tint_password_toggle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#9e9e9e" android:state_checked="false" />
    <item android:color="@color/colorAccent" android:state_checked="true" />
</selector>

activity_main.xml

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintAnimationEnabled="true"
    app:hintEnabled="true"
    app:passwordToggleDrawable="@drawable/ic_password_toggle"
    app:passwordToggleEnabled="true"
    app:passwordToggleTint="@color/tint_password_toggle">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/hint_password"
        android:inputType="textPassword" />

</android.support.design.widget.TextInputLayout>

passwordToggleDrawable 와 passwordToggleTint 로 나누어 각각 설정하는 것이 미소입니다.

요약

공식 레퍼런스는 제대로 읽자(계명). 일단 GitHub 에 샘플을 올려 둡니다.

참고문헌

Android Developers: htps : //에서 ゔぇぺぺr. 안 d로이 d. 코 m / 레후 렌세 / 앤 d 로이 d / 삿포 rt / 데시 겐 / 우 드 게 t / 테 x 치프 t ぁ 요 t