Help us understand the problem. What is going on with this article?

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

概要

スクリーンショット 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 をみてみてください🙂

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away