LoginSignup
3

More than 3 years have passed since last update.

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

Posted at

概要

スクリーンショット 2019-11-15 12.39.17.png
スクリーンショット 2019-11-15 12.39.28.png

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

「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 のスタイルを指定している部分で、OutlinedBoxFilledBox があります。
OutlinedBox.DenseFilledBox.Dense もあるようですが違いがわかりませんでした…)
それぞれ見た目は以下のようになります。

  • OutlinedBox

スクリーンショット 2019-11-15 17.16.56.png

  • FilledBox

スクリーンショット 2019-11-15 17.17.45.png

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3