web-dev-qa-db-ja.com

パスワードの非表示と表示を切り替える方法

ユーザーがAndroid EditTextでパスワードの非表示と表示を切り替える賢い方法はありますか？多くのPCベースのアプリにより、ユーザーはこれを行うことができます。

androidpasswords
138
jacknad

TextViewの属性を動的に変更できます。 XML属性Android:passwordをtrueに設定した場合、falseに設定すると、ビューにドットが表示され、テキストが表示されます。

メソッド setTransformationMethod を使用すると、この属性をコードから変更できるはずです。 （免責事項：ビューが表示された後でもメソッドが機能するかどうかはテストしていません。問題が発生した場合は、コメントを残してください。）

完全なサンプルコードは

yourTextView.setTransformationMethod(new PasswordTransformationMethod());

パスワードを非表示にします。パスワードを表示するには、既存の変換メソッドの1つを設定するか、空の TransformationMethod を実装して、入力テキストに対して何も実行しないようにします。

yourTextView.setTransformationMethod(new DoNothingTransformation());
125
Janusz

サポートライブラリv24.2.0以降、簡単に実現できます。

あなたがする必要があるのはただ：

  1. デザインライブラリを依存関係に追加します

    dependencies {
     compile "com.Android.support:design:24.2.0"
}

  2. TextInputEditTextとともにTextInputLayoutを使用します

    <Android.support.design.widget.TextInputLayout
    Android:id="@+id/etPasswordLayout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    app:passwordToggleEnabled="true"
    Android:layout_marginBottom="@dimen/login_spacing_bottom">

    <Android.support.design.widget.TextInputEditText
        Android:id="@+id/etPassword"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:hint="@string/fragment_login_password_hint"
        Android:inputType="textPassword"/>
</Android.support.design.widget.TextInputLayout>

passwordToggleEnabled属性が仕事をします！

  1. ルートレイアウトにxmlns:app="http://schemas.Android.com/apk/res-auto"を追加することを忘れないでください

  2. 以下を使用して、パスワードの切り替えをカスタマイズできます。

app:passwordToggleDrawable-パスワード入力の可視性切り替えアイコンとして使用するためのドロアブル。
app:passwordToggleTint-パスワード入力の表示/非表示の切り替えに使用するアイコン。
app:passwordToggleTintMode-背景の色合いを適用するために使用されるブレンドモード。

詳細は TextInputLayout documentation をご覧ください。

enter image description here

241
mmBs

パスワードの代わりにドットを表示するには、PasswordTransformationMethodを設定します。

yourEditText.setTransformationMethod(new PasswordTransformationMethod());

もちろん、デフォルトでxmlレイアウトのedittext要素でこれを設定できます。

Android:password

読み取り可能なパスワードを再表示するには、変換メソッドとしてnullを渡すだけです。

yourEditText.setTransformationMethod(null);
100
Qlimax

表示するには：

editText.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);

隠れる：

editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);

これらのそれぞれの後、カーソルはリセットされます。

editText.setSelection(editText.length());
73
Matt Logan

app:passwordToggleEnabled="true"を使用できます

以下に例を示します

<Android.support.design.widget.TextInputLayout
        Android:id="@+id/password"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:passwordToggleEnabled="true"
        Android:textColorHint="@color/colorhint"
        Android:textColor="@color/colortext">
27
Tabish khan

チェックボックスを使用し、それに応じて入力タイプを変更します。

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    int start,end;
    Log.i("inside checkbox chnge",""+isChecked);
    if(!isChecked){
        start=passWordEditText.getSelectionStart();
        end=passWordEditText.getSelectionEnd();
        passWordEditText.setTransformationMethod(new PasswordTransformationMethod());;
        passWordEditText.setSelection(start,end);
    }else{
        start=passWordEditText.getSelectionStart();
        end=passWordEditText.getSelectionEnd();
        passWordEditText.setTransformationMethod(null);
        passWordEditText.setSelection(start,end);
    }
}
11
Praveena

それは私のために働いています。これは間違いなくあなたを助けます

showpass.setOnCheckedChangeListener(new OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    if(!isChecked){

                    // show password
                    password_login.setTransformationMethod(PasswordTransformationMethod.getInstance());

                    Log.i("checker", "true");
                }

                else{
                    Log.i("checker", "false");

                     // hide password
    password_login.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                }

            }
        });
7
sujith s
private boolean isPasswordVisible;

private TextInputEditText firstEditText;

...

firstEditText = findViewById(R.id.et_first);

...

    private void togglePassVisability() {
    if (isPasswordVisible) {
        String pass = firstEditText.getText().toString();
        firstEditText.setTransformationMethod(PasswordTransformationMethod.getInstance());
        firstEditText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
        firstEditText.setText(pass);
        firstEditText.setSelection(pass.length());           
    } else {
        String pass = firstEditText.getText().toString();
        firstEditText.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
        firstEditText.setInputType(InputType.TYPE_CLASS_TEXT);
        firstEditText.setText(pass);
        firstEditText.setSelection(pass.length());
    }
    isPasswordVisible= !isPasswordVisible;
}
7
Vladyslav Ulianytskyi

いくつかの良い答えがあっても、この質問に答えたいと思います。

ドキュメントによるとTransformationMethod私たちの使命を果たす

変換方法

TextViewは、TransformationMethodsを使用して、パスワードの文字をドットに置き換えたり、改行文字が単一行のテキストフィールドで改行しないようにしたりします。

注意バターナイフを使用しますが、ユーザーがパスワードを表示する場合は同じです

@OnCheckedChanged(R.id.showpass)
    public void onChecked(boolean checked){
        if(checked){
            et_password.setTransformationMethod(null);
        }else {
            et_password.setTransformationMethod(new PasswordTransformationMethod());

        }
       // cursor reset his position so we need set position to the end of text
        et_password.setSelection(et_password.getText().length());
    }
5
Mina Fawzy

ブロックに自己完結型のShowPassword/HidePasswordコードをほんの数行で追加できます。

protected void onCreate(Bundle savedInstanceState) {
    ...
    etPassword = (EditText)findViewById(R.id.password);
    etPassword.setTransformationMethod(new PasswordTransformationMethod()); // Hide password initially

    checkBoxShowPwd = (CheckBox)findViewById(R.id.checkBoxShowPwd);
    checkBoxShowPwd.setText(getString(R.string.label_show_password)); // Hide initially, but prompting "Show Password"
    checkBoxShowPwd.setOnCheckedChangeListener( new CompoundButton.OnCheckedChangeListener() {
        public void onCheckedChanged(CompoundButton arg0, boolean isChecked) {
            if (isChecked) {
                etPassword.setTransformationMethod(null); // Show password when box checked
                checkBoxShowPwd.setText(getString(R.string.label_hide_password)); // Prompting "Hide Password"
            } else {
                etPassword.setTransformationMethod(new PasswordTransformationMethod()); // Hide password when box not checked
                checkBoxShowPwd.setText(getString(R.string.label_show_password)); // Prompting "Show Password"
            }
        }
    } );
    ...
5
david m lee
private int passwordNotVisible=1; 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
 showPassword = (ImageView) findViewById(R.id.show_password);
    showPassword.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            EditText paswword = (EditText) findViewById(R.id.Password);
            if (passwordNotVisible == 1) {
                paswword.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
                passwordNotVisible = 0;
            } else {

                paswword.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
                passwordNotVisible = 1;
            }


            paswword.setSelection(paswword.length());

        }
    });
}
4
Shailesh Bhardwaj

以下のコードを使用してパスワードを表示/非表示できます。

XMLコード：

<EditText
        Android:id="@+id/etPassword"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginLeft="21dp"
        Android:layout_marginTop="14dp"
        Android:ems="10"
        Android:inputType="textPassword" >
        <requestFocus />
    </EditText>
    <CheckBox
        Android:id="@+id/cbShowPwd"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignLeft="@+id/etPassword"
        Android:layout_below="@+id/etPassword"
        Android:text="@string/show_pwd" />

Javaコード：

EditText mEtPwd;
CheckBox mCbShowPwd;


mEtPwd = (EditText) findViewById(R.id.etPassword);
mCbShowPwd = (CheckBox) findViewById(R.id.cbShowPwd);

mCbShowPwd.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        // checkbox status is changed from uncheck to checked.
        if (!isChecked) {
            // show password
            mEtPwd.setTransformationMethod(PasswordTransformationMethod.getInstance());
        } else {
            // hide password
            mEtPwd.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
        }
    }
});
3
Nikunjkumar Kapupara

チェックボックスでパスワードEdit_Textを表示および非表示

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <EditText
        Android:inputType="textPassword"
        Android:id="@+id/edtPass"
        Android:textSize="20dp"
        Android:hint="password"
        Android:padding="20dp"
        Android:background="#efeaea"
        Android:layout_width="match_parent"
        Android:layout_margin="20dp"
        Android:layout_height="wrap_content" />

    <CheckBox
        Android:background="#ff4"
        Android:layout_centerInParent="true"
        Android:textSize="25dp"
        Android:text="show password"
        Android:layout_below="@id/edtPass"
        Android:id="@+id/showPassword"
        Android:layout_marginTop="20dp"
        Android:layout_width="wrap_content"
        Android:gravity="top|right"
        Android:layout_height="wrap_content" />

</RelativeLayout>

Javaコード

package com.example.root.sql2;

import Android.annotation.SuppressLint;
import Android.os.Bundle;
import Android.support.design.widget.FloatingActionButton;
import Android.support.design.widget.Snackbar;
import Android.support.v7.app.AppCompatActivity;
import Android.support.v7.widget.AppCompatCheckBox;
import Android.support.v7.widget.Toolbar;
import Android.text.method.HideReturnsTransformationMethod;
import Android.text.method.PasswordTransformationMethod;
import Android.view.View;
import Android.widget.CheckBox;
import Android.widget.CompoundButton;
import Android.widget.EditText;

public class password extends AppCompatActivity {


    EditText password;
    CheckBox show_hide_password;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.hide);
        findViewById();
        show_hide_pass();



    }//end onCreate



    public void show_hide_pass(){
        show_hide_password.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                if (!b){
                    // hide password
                    password.setTransformationMethod(PasswordTransformationMethod.getInstance());

                }else{
                    // show password
                    password.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                }
            }
        });
    } // end show_hide_pass




    public void findViewById(){ //  find ids ui and
        password = (EditText) findViewById(R.id.edtPass);
        show_hide_password = (CheckBox) findViewById(R.id.showPassword);
    }//end findViewById



}// end class
2
oktay

https://github.com/maksim88/PasswordEditText githubのプロジェクトを試してください。それを使用してJavaコードを変更する必要さえありません。ただ変える

EditText

にタグを付ける

com.maksim88.passwordedittext.PasswordEditText

xMLファイル内。

2
Anatoliy Shuba

SetTransformationMethodで試しましたか？ TextViewから継承され、パラメーターとしてTransformationMethodが必要です。

TransformationMethodsの詳細については、こちらをご覧ください こちら 。

また、文字の置換など、いくつかのクールな機能があります。

2
Hamcha

これは、TextInputEditTextおよびTransformationメソッドを使用しない私のソリューションです。

XML

<LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:orientation="vertical">

        <TextView
            style="@style/FormLabel"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:text="@string/username" />

        <EditText
            Android:id="@+id/loginUsername"
            style="@style/EditTextStyle"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:drawableLeft="@drawable/ic_person_outline_black_24dp"
            Android:drawableStart="@drawable/ic_person_outline_black_24dp"
            Android:inputType="textEmailAddress"
            Android:textColor="@color/black" />

        <TextView
            style="@style/FormLabel"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_marginTop="20dp"
            Android:text="@string/password" />

        <EditText
            Android:id="@+id/loginPassword"
            style="@style/EditTextStyle"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:drawableEnd="@drawable/ic_visibility_off_black_24dp"
            Android:drawableLeft="@drawable/ic_lock_outline_black_24dp"
            Android:drawableRight="@drawable/ic_visibility_off_black_24dp"
            Android:drawableStart="@drawable/ic_lock_outline_black_24dp"
            Android:inputType="textPassword"
            Android:textColor="@color/black" />
    </LinearLayout>

Javaコード

boolean VISIBLE_PASSWORD = false;  //declare as global variable befor onCreate() 
loginPassword = (EditText)findViewById(R.id.loginPassword);
loginPassword.setOnTouchListener(new View.OnTouchListener() {
        public boolean onTouch(View v, MotionEvent event) {
            final int DRAWABLE_LEFT = 0;
            final int DRAWABLE_TOP = 1;
            final int DRAWABLE_RIGHT = 2;
            final int DRAWABLE_BOTTOM = 3;

            if (event.getAction() == MotionEvent.ACTION_UP) {
                if (event.getRawX() >= (loginPassword.getRight() - loginPassword.getCompoundDrawables()[DRAWABLE_RIGHT].getBounds().width())) {
                    // your action here
                    //Helper.toast(LoginActivity.this, "Toggle visibility");
                    if (VISIBLE_PASSWORD) {
                        VISIBLE_PASSWORD = false;
                        loginPassword.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
                        loginPassword.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_lock_outline_black_24dp, 0, R.drawable.ic_visibility_off_black_24dp, 0);
                    } else {
                        VISIBLE_PASSWORD = true;
                        loginPassword.setInputType(InputType.TYPE_CLASS_TEXT);
                        loginPassword.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_lock_outline_black_24dp, 0, R.drawable.ic_visibility_black_24dp, 0);
                    }
                    return false;
                }
            }
            return false;
        }
    });
1
Sagar Chapagain

非常に単純な形式で：

private fun updatePasswordVisibility(editText: AppCompatEditText) {
        if (editText.transformationMethod is PasswordTransformationMethod) {
            editText.transformationMethod = null
        } else {
            editText.transformationMethod = PasswordTransformationMethod()
        }
        editText.setSelection(editText.length())
    }

それが役に立てば幸い。

1
Hiren Patel

私がしたことは

  1. テキスト編集ビューと通常のテキストビューを作成する
  2. 制約レイアウトを使用して（Facebookアプリのログイン画面のように）それらを互いに重複させます
  3. OnClickListenerを通常のテキストビューにアタッチして、それに応じて編集テキストビューの入力タイプを変更します（表示/非表示）

より詳細な手順と説明については、このビデオをご覧ください https://youtu.be/md3eVaRzdIM

それが役に立てば幸い ：）

1
Jack Tiong

私のKotlin拡張機能。どこでも一度使用して書く

fun EditText.tooglePassWord() {
this.tag = !((this.tag ?: false) as Boolean)
this.inputType = if (this.tag as Boolean)
    InputType.TYPE_TEXT_VARIATION_PASSWORD
else
    (InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_PASSWORD)

this.setSelection(this.length()) }

このメソッドを任意のファイルに保持し、どこでも使用できます

ivShowPassword.click { etPassword.tooglePassWord() }

ここで、ivShowPasswordはimageview（目）をクリックし、etPasswordはEditextです

0
Aklesh Singh

良い解決策。ボタンを設定してから、次のコードを使用します。

public void showPassword(View v)
{

    TextView showHideBtnText = (TextView) findViewById(R.id.textView1);

    if(showHideBtnText.getText().toString().equals("Show Password")){
        password.setTransformationMethod(null);
        showHideBtnText.setText("Hide");
    } else{
        password.setTransformationMethod(new PasswordTransformationMethod());
        showHideBtnText.setText("Show Password");
    }


}
0
matthewoak

this source によると、プロジェクトをAndroidXに移行した場合は、置き換えることができます

compile "com.Android.support:design:24.2.0"

と

implementation "com.google.Android.material:material:1.0.0"

次に、以下のコードをレイアウトファイルに追加するだけです。

<com.google.Android.material.textfield.TextInputLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    app:passwordToggleEnabled="true"
    Android:hint="@string/hint_text">

  <com.google.Android.material.textfield.TextInputEditText
      Android:layout_width="match_parent"
      Android:layout_height="wrap_content"/>

</com.google.Android.material.textfield.TextInputLayout>

素材に関する詳細情報TextInputLayoutは、 こちら にあります。

このソースへ 、AndroidサポートライブラリからAndroidXに移行することをお勧めします。

AndroidXは、AndroidチームがJetpack内でライブラリを開発、テスト、パッケージ、バージョン、およびリリースするために使用するオープンソースプロジェクトです。

AndroidXは、元のAndroidサポートライブラリを大幅に改善したものです。サポートライブラリと同様に、AndroidXはAndroid OSとは別に出荷され、Androidリリース間で後方互換性を提供します。 AndroidXは、機能パリティと新しいライブラリを提供することにより、サポートライブラリを完全に置き換えます。さらに、AndroidXには次の機能が含まれています。

AndroidXのすべてのパッケージは、文字列androidxで始まる一貫した名前空間に存在します。サポートライブラリパッケージは、対応するandroidx。*パッケージにマップされています。すべての古いクラスとビルドアーティファクトの新しいクラスへの完全なマッピングについては、パッケージリファクタリングページを参照してください。

サポートライブラリとは異なり、AndroidXパッケージは個別にメンテナンスおよび更新されます。 androidxパッケージは、バージョン1.0.0以降の厳密なセマンティックバージョニングを使用します。プロジェクト内のAndroidXライブラリを個別に更新できます。

新しいサポートライブラリの開発はすべて、AndroidXライブラリで行われます。これには、元のサポートライブラリアーティファクトのメンテナンスと新しいJetpackコンポーネントの導入が含まれます。

0
emiraslan

コンパイル 'com.Android.support:appcompat-v7:24.2.0'

コンパイル 'com.Android.support:design:24.2.0'

レイアウトで

    Android:inputType="textPassword"

機能している

0
Keshav Gera

XMLではこのようにします

    <LinearLayout
          Android:layout_height="wrap_content"
          Android:layout_width="fill_parent"
          Android:orientation="vertical"
          >
          <RelativeLayout
              Android:id="@+id/REFReLayTellFriend"
              Android:layout_width="match_parent"
              Android:layout_height="wrap_content"
              Android:orientation="horizontal"
              >
          <EditText
              Android:id="@+id/etpass1"
              Android:layout_width="fill_parent"
              Android:layout_height="wrap_content"
              Android:background="@Android:color/transparent"
              Android:bottomLeftRadius="10dp"
              Android:bottomRightRadius="50dp"
              Android:fontFamily="@font/frutiger"
              Android:gravity="start"
              Android:inputType="textPassword"
              Android:hint="@string/regpass_pass1"
              Android:padding="20dp"
              Android:paddingBottom="10dp"
              Android:textColor="#000000"
              Android:textColorHint="#d3d3d3"
              Android:textSize="14sp"
              Android:topLeftRadius="10dp"
              Android:topRightRadius="10dp"/>
              <ImageButton
                  Android:id="@+id/imgshowhide1"
                  Android:layout_width="40dp"
                  Android:layout_height="20dp"
                  Android:layout_marginTop="20dp"
                  Android:layout_marginRight="10dp"
                  Android:background="@drawable/showpass"
                  Android:layout_alignRight="@+id/etpass1"/>
          </RelativeLayout>    

 boolean show=true;
 //on image click inside password do this
 if(show){
                imgshowhide2.setBackgroundResource(0);
                imgshowhide2.setBackgroundResource(R.drawable.hide);
                etpass2.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
                etpass2.setSelection(etpass2.getText().length());

                show=false;
            }else{
                imgshowhide2.setBackgroundResource(0);
                imgshowhide2.setBackgroundResource(R.drawable.showpass);
                //etpass1.setInputType(InputType.TYPE_TEXT);
                etpass2.setInputType(InputType.TYPE_CLASS_TEXT |
                        InputType.TYPE_TEXT_VARIATION_PASSWORD);
                etpass2.setSelection(etpass2.getText().length());
                show=true;
            }
0
Syed Danish Haider

これを試してください：

まず、次のようにフラグをグローバルとして定義します。

private boolean isShowPassword = false;

そして、パスワードボタンの表示と非表示のタップを処理するようにリスナーを設定します。

imgPassword.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (isShowPassword) {
                    etPassword.setTransformationMethod(new PasswordTransformationMethod());
                    imgPassword.setImageDrawable(getResources().getDrawable(R.drawable.ic_eye_hide));
                    isShowPassword = false;
                }else{
                    etPassword.setTransformationMethod(null);
                    imgPassword.setImageDrawable(getResources().getDrawable(R.drawable.ic_eye_show));
                    isShowPassword = true;
                }
            }
        });
0
reza_khalafi