LoginSignup
13
14

More than 5 years have passed since last update.

Android で入力されたパスワードの表示/非表示を切り替えてみた件(EditText)

Last updated at Posted at 2016-07-10

概要

Google Play ストアのレビューに「メールアドレスとパスワードをちゃんと入力しているのに全然ログインできません!」といった苦情が多々寄せられるようになったため、Slack アプリの様にパスワード入力フォームの目隠しを外せるようにする方針になりました。

調査してみた結果 :mag:

Stack Overflow の回答が引っかかりました。

一番評価が高かった回答を実際に試してみましたが、気になった点がいくつかありました。
Screenshot_20160710-221332.png

Screenshot_20160710-221328.png

:one: Android 4.0.4 の端末で文字入力直後にパスワードの表示/非表示を素早く切り替えると同じ文字が2文字連続で入力されてしまう :astonished:
:two: パスワード表示/非表示状態の場合で文字列の長さが異る :disappointed_relieved:
:three: ソフトキーボードの種類によっては表示/非表示を切り替えると英数字入力から日本語入力に変更されることがある :sob:
:four: パスワードの表示/非表示を切り替えるとカーソルの位置が0文字目に移動してしまう :scream:

更に調査してみた結果 :mag:

上記のような問題点が解消されているものがないか探してみたところ、Android でパスワード入力フォーム目隠しの表示/非表示を切り替えることができるライブラリを見つけました :arrow_right: Show/Hide Password EditText

追記(2017.10.01)

Design Support Library24.2.0 にて TextInputLayout がパスワードの表示/非表示に対応したため、Show/Hide Password EditText の使用は 2016 年 8 月 18 日付けで非推奨になりました。

Deprecated になる以前(2016.07.11 投稿時点)

Show/Hide Password EditText を使ってみました

build.gradle
allprojects {
    repositories {
        maven {
            url "https://jitpack.io"
        }
    }
}
app/build.gradle
dependencies {
    compile 'com.github.scottyab:showhidepasswordedittext:0.8'
}
activity_password_input.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.scottyab.showhidepasswordedittext.ShowHidePasswordEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />
    <!-- パスワード入力フォーム -->
</android.support.percent.PercentRelativeLayout>
PasswordInputActivity.java
package jp.co.package.example;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;

/**
 * パスワード入力画面
 */
public class PasswordInputActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_password_input);
    }
}

Screenshot_20160711-001203.png

Screenshot_20160711-001154.png

2016年7月10日時点のバージョン 0.8 では :eye: アイコンの Drawable が自動的に表示される仕組みになっているので、CheckBox でパスワードの表示/非表示を切り替えできるようにしたい場合などは
https://github.com/scottyab/showhidepasswordedittext/blob/master/library/src/main/java/com/scottyab/showhidepasswordedittext/ShowHidePasswordEditText.java から必要な部分を抜き出して独自実装する必要があります。

ライブラリからコードを抜き出して実装してみた

activity_password_input.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.AppCompatCheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true" />
    <!-- チェックボックス -->

    <jp.co.package.example.ShowHidePasswordEditText
        android:id="@+id/password_input_editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/checkbox"
        android:inputType="textPassword"
        android:singleLine="true" />
    <!-- 自前実装したパスワード入力フォーム -->
</android.support.percent.PercentRelativeLayout>
PasswordInputActivity.java
package jp.co.package.example;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

/**
 * パスワード入力画面
 */
public class PasswordInputActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_password_input);

        final ShowHidePasswordEditText passwordEditText = (ShowHidePasswordEditText) findViewById(R.id.password_input_editText);
        findViewById(R.id.checkbox).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // チェックボックスがクリックされた時に呼び出されます
                passwordEditText.togglePasswordVisibility();
            }
        });
    }
}

Screenshot_20160710-232936.png

Screenshot_20160710-232931.png

ライブラリ使用のメリット

:one: Android 4.0.4 端末で文字入力直後にパスワードの表示/非表示を素早く切り替えても直前に入力した文字が重複して入力されない :blush:
:two: パスワード表示/非表示状態の場合で文字列の長さが同じ :smiley:android:inputType="textPassword" を指定した場合)
:three: 表示/非表示を切り替えてもソフトキーボードが英数字入力のまま :smile:
:four: 表示/非表示を切り替えてもカーソルの位置が保持される :laughing:

という長所があるのでパスワードの表示/非表示を切り替えたい場合は Show/Hide Password EditText ライブラリの使用 or 参照がお勧めです。

結論

TextInputLayout を使用するのが良いそうです :bow:

13
14
0

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
13
14