今回の記事では、EditTextエリアにパスワードなどを入力時にテキストの表示・非表示を切り替える実装について投稿したいと思います。
EditTextを利用した場合
通常、テキストの入力エリアを定義する場合には、EditTextを利用します。
EditTextに入力されるテキストを非表示にする場合には、以下の設定をします。
<EditText
android:id="@+id/editMasterPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/loginButton"
android:layout_centerHorizontal="true"
android:ems="10"
android:textSize="12dp"
android:inputType="textPassword" />
inputTypeを"textPassword"で設定することで以下のようにテキストを非表示にするようになります。
これをボタンなどで表示・非表示を切り替えるために、InputTypeの設定をする処理は以下のように実装できます。
setVisibleBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
if (editText.getInputType == InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD) {
/* パスワード非表示 */
editText.setInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD);
} else {
/* パスワード表示 */
editText.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
}
}
});
こんな感じの実装をしてあげれば、表示の切り替えがうまくいくと思ってました。 ですが、結果できませんでした。
-
一度TYPE_TEXT_VARIATION_VISIBLE_PASSWORDにするとTYPE_TEXT_VARIATION_PASSWORDを設定しても非表示にならない。
-
表示が切り替わるときにカーソル位置が初期化される。
といった事が発生してうまくいきません。 色々調べた結果、TextInputLayoutを使えば良いことがわかりました。
TextInputLayoutを利用した場合
TextInputLayoutを利用した場合には、以下のように実装できます。
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/layoutMasterPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/loginButton"
android:layout_centerHorizontal="true"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/editMasterPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:ems="10"
android:textSize="12dp"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
基本的にはEditTextをTextInputLayoutで囲ってあげるだけになります。
上記の例では、TextInputLayoutがmaterialデザインのため、EditTextもmaterialデザインのTextInputEditTextに置き換えています。
そして、app:passwordToggleEnabled="true"を設定するだけで、表示・非表示の切り替えボタンも自動で設定してくれます。
実装は何も必要ありません。
→
最後に、この実装をしたパスワードメモ 画面ロック付きのパスワード管理ツールで動作確認をする事が出来ます。無料で提供していますので是非インストールしてみて下さい！
