TextInputLayout - password visibility toggleのデザイン変更

はじめに

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: https://developer.android.com/reference/android/support/design/widget/TextInputLayout