Android でパスワード表示/非表示できる EditText を実装する

概要

こういうフォームを実装します。

「Android パスワード 表示 非表示」のようなキーワードでググると結構ヒットするのですが、
MATERIAL DESIGN ではなく
android.support.design.widget.TextInputLayout
の内容が多かったので書き残しておきます。

手順

1.プロジェクトレベルの build.gradle に以下を追加します（コチラを見るのが確実です）

build.gradle

allprojects {
    repositories {
        google()
        jcenter()
    }
}

2.モジュールレベルの build.gradle に以下を追加します（コチラを見るのが確実です）

build.gradle

dependencies {
    implementation 'com.google.android.material:material:1.0.0'
}

3.EditTextを以下のようにします

activity_main.xml

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="パスワード"
    app:passwordToggleEnabled="true">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

以上で 概要 のようなフォームができます！簡単ですね！

補足

app:passwordToggleEnabled="true"

この部分が 目👁 のアイコンを表示するかどうか、です。

また

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

この部分は EditText のスタイルを指定している部分で、OutlinedBox と FilledBox があります。
（OutlinedBox.Dense と FilledBox.Dense もあるようですが違いがわかりませんでした…）
それぞれ見た目は以下のようになります。

• OutlinedBox

• FilledBox

他にもいろいろとできるようなので 公式 MATERIAL DESIGN Text Fields をみてみてください🙂