Comment basculer entre masquer et afficher le mot de passe

176

Existe-t-il un moyen intelligent de permettre à l'utilisateur de basculer entre masquer et afficher le mot de passe dans un EditText Android? Un certain nombre d'applications basées sur PC permettent à l'utilisateur de le faire.

jacknad
la source

Réponses:

156

Vous pouvez modifier dynamiquement les attributs d'un TextView. Si vous définissez XML Atrribute android:passwordsur true, la vue affichera des points si vous la définissez sur false, le texte est affiché.

Avec la méthode setTransformationMethod, vous devriez pouvoir modifier ces attributs à partir du code. (Avertissement: je n'ai pas testé si la méthode fonctionne toujours après l'affichage de la vue. Si vous rencontrez des problèmes avec cela, laissez-moi un commentaire pour que je le sache.)

L'exemple de code complet serait

yourTextView.setTransformationMethod(new PasswordTransformationMethod());

pour masquer le mot de passe. Pour afficher le mot de passe, vous pouvez définir l'une des méthodes de transformation existantes ou implémenter une TransformationMethod vide qui ne fait rien avec le texte d'entrée.

yourTextView.setTransformationMethod(new DoNothingTransformation());
Janusz
la source
61
Pour afficher le mot de passe, vous n'avez pas besoin de créer de nouvelles classes. Appelez setTransformationMethod(null).
Matt Quigley
4
@Janusz, l'utilisation de ce qui suit donnera une solution gud. setTransformationMethod (PasswordTransformationMethod.getInstance ()); et setTransformationMethod (HideReturnsTransformationMethod.getInstance ());
sujith s
@Janusz mais comment afficher / masquer les touches du clavier?
Narendra Singh
lors de l'appel de setTransformationMethod sur un EditeText, le rappel onTextChanged du EditText est appelé ... est-il possible que cela ne se soit pas produit?
tsiro le
1
Correct. Le "setTransformationMethod () est la clé. Tout ce dont vous avez besoin est de basculer dans votre écouteur: etPassword.setTransformationMethod (null) / etPassword.setTransformationMethod (new PasswordTransformationMethod ()). Par défaut, défini dans votre xml EditView" android: inputType = "textPassword ""
Sergio
303

C'est vraiment facile à réaliser depuis la Support Library v24.2.0.

Ce que vous devez faire est juste:

  1. Ajoutez la bibliothèque de conception à vos dépendances

    dependencies {
         compile "com.android.support:design:24.2.0"
    }
  2. Utiliser TextInputEditTexten conjonction avecTextInputLayout

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

L' passwordToggleEnabledattribut fera l'affaire!

  1. Dans votre mise en page racine, n'oubliez pas d'ajouter xmlns:app="http://schemas.android.com/apk/res-auto"

  2. Vous pouvez personnaliser le basculement de votre mot de passe en utilisant:

app:passwordToggleDrawable- Dessiné à utiliser comme icône de bascule de visibilité d'entrée de mot de passe.
app:passwordToggleTint- Icône à utiliser pour la bascule de visibilité d'entrée de mot de passe.
app:passwordToggleTintMode- Mode de fusion utilisé pour appliquer la teinte d'arrière-plan.

Plus de détails dans la documentation TextInputLayout .

entrez la description de l'image ici

Pour AndroidX

  • Remplacer android.support.design.widget.TextInputLayoutparcom.google.android.material.textfield.TextInputLayout

  • Remplacer android.support.design.widget.TextInputEditTextparcom.google.android.material.textfield.TextInputEditText

mmBs
la source
Dans la version 25.1.0, j'ai un comportement étrange: il montre le basculement du mot de passe une fois mais si vous appuyez dessus, il disparaîtra o_O '
MiguelHincapieC
1
Ouais, il y a aussi quelques bizarreries avec android:textattribut activé TextInputEditText. Vous pouvez toujours soulever un problème sur Google Issues Tracker pour Android
mmBs
1
@ Delta7 Il existe des moyens et des solutions de contournement. S'il vous plaît, posez la question sur SO, collez un lien ici et je vais essayer de vous aider.
mmBs
1
Merci. Cependant, dans ma construction, les graphiques afficher / masquer sont étrangement inversés de votre capture d'écran - il montre l'œil barré lorsque le mot de passe est masqué - je suppose que quelqu'un a décidé que les boutons devraient afficher l'état actuel au lieu de l'action (ou l'état de l'objectif).
Josh Sutterfield
1
@JoshSutterfield est d'accord. donc si nous voulons un bouton d'action, nous devons l'inverser manuellement en utilisant app:passwordToggleDrawable(obsolète) ou app:endIconDrawableensuite utiliser un dessin personnalisé comme <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/ic_eye_close" android:state_checked="true"/> <item android:drawable="@drawable/ic_eye_open"/> </selector> je pense que Google devrait corriger ce problème. Bonne discussion
Rahmat Ihsan
112

Pour afficher les points au lieu du mot de passe, définissez la méthode PasswordTransformationMethod:

yourEditText.setTransformationMethod(new PasswordTransformationMethod());

bien sûr, vous pouvez le définir par défaut dans votre élément edittext dans la mise en page xml avec

android:password

Pour afficher à nouveau le mot de passe lisible, transmettez simplement null comme méthode de transformation:

yourEditText.setTransformationMethod(null);
Qlimax
la source
7
android:passwordest désormais obsolète et vous devriez l'utiliser à la android:inputTypeplace.
Wilka
54
Vous pouvez également rendre vos utilisateurs heureux en enregistrant la position du curseur avant de définir la méthode de transformation et en la restaurant après. Utilisez editText.getSelectionStart()et editText.getSelectionEnd()pour enregistrer la position du curseur et editText.setSelection(start, end)pour la restaurer.
Mostafa
2
@Wilka: android: inputType ne vous permet PAS de basculer entre les deux états au moment de l'exécution. Il ne vous permet de changer qu'une seule fois et une fois que vous le modifiez, vous ne pouvez pas le modifier. Et non, la méthode setTransformationMethod n'est PAS obsolète.
AndroidDev
@Qlimax mais comment afficher / masquer les touches du clavier?
Narendra Singh
@DroidWormNarendra vous attachez normalement un écouteur d'événement à une "image d'oeil" entre votre entrée de mot de passe, ou à l'intérieur de votre entrée de mot de passe comme expliqué ici: stackoverflow.com/questions/3554377/… . Ensuite, dans cet écouteur d'événements, vous pouvez afficher / masquer le mot de passe. AFAIK n'est pas possible d'avoir des touches afficher / masquer dans le clavier
Qlimax
82

Montrer:

editText.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);

Cacher:

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

Après chacun d'entre eux, le curseur est réinitialisé, donc:

editText.setSelection(editText.length());
Matt Logan
la source
Testé sur Android 4.3 et 5.0, fonctionne très bien! Docs donne l'impression que cela devrait fonctionner jusqu'à l'API 3 à.
James
@MattLogan mais comment afficher / masquer les touches du clavier?
Narendra Singh
5
C'est la réponse la plus simple ici. Merci. (bizarre ce n'est pas l'accepté)
Tina
Cela ne semble pas fonctionner lorsqu'il est modifié au moment de l'exécution. Il ne restaure pas non plus la dernière position / sélection du curseur de l'utilisateur si ce n'est à la fin de la ligne.
Tom
31

Vous pouvez utiliser app:passwordToggleEnabled="true"

voici l'exemple ci-dessous

<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">
Tabish Khan
la source
Aujourd'hui, il doit être préférable d'utiliser la réponse
Ruslan Berozov
Cela augmente la hauteur de la vue dans mon cas. Existe-t-il un moyen de supprimer le rembourrage de toggle drawable?
Sadda Hussain
Ceci est déconseillé dans les composants matériels. Utilisez app:endIconMode="password_toggle".
Nicolas
13

Utilisez la case à cocher et modifiez le type d'entrée en conséquence.

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);
    }
}
Praveena
la source
8
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;
}
Vladyslav Ulianytskyi
la source
Pas besoin de redéfinir le texte, appelez simplement firstEditText.invalidate ();
Gunavant Patel le
7

C'est du travail pour moi, cela vous aidera certainement

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());
                }

            }
        });
sujith s
la source
5

Je sens que je veux répondre à cette question même là de bonnes réponses,

selon la documentation TransformationMethod faire notre mission

TransformationMéthode

TextView utilise TransformationMethods pour faire des choses comme le remplacement des caractères des mots de passe par des points, ou pour empêcher les caractères de nouvelle ligne de provoquer des sauts de ligne dans les champs de texte sur une seule ligne.

Remarquez que j'utilise un couteau à beurre, mais c'est la même chose si l'utilisateur vérifie le mot de passe

@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());
    }
Mina Fawzy
la source
5

Je suis capable d'ajouter le code ShowPassword / HidePassword avec seulement quelques lignes, autonome dans un bloc:

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"
            }
        }
    } );
    ...
david m lee
la source
5

J'ai eu le même problème et c'est très facile à mettre en œuvre.

Tout ce que vous avez à faire est d'encapsuler votre champ EditText dans un (com.google.android.material.textfield.TextInputLayout) et dans cet add (app: passwordToggleEnabled = "true").

Cela montrera l'œil dans le champ EditText et lorsque vous cliquez dessus, le mot de passe apparaît et disparaît lorsque vous cliquez à nouveau.

<com.google.android.material.textfield.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:textColorHint="#B9B8B8"
                app:passwordToggleEnabled="true">

                <EditText
                    android:id="@+id/register_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="24dp"
                    android:layout_marginRight="44dp"
                    android:backgroundTint="#BEBEBE"
                    android:hint="Password"
                    android:inputType="textPassword"
                    android:padding="16dp"
                    android:textSize="18sp" />
            </com.google.android.material.textfield.TextInputLayout>
Morne
la source
4
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());

        }
    });
}
Shailesh Bhardwaj
la source
4

Sous une forme très simple:

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

J'espère que ça aide.

Hiren Patel
la source
3

Vous pouvez afficher / masquer le mot de passe en utilisant ce code ci-dessous:

CODE 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" />

CODE 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());
        }
    }
});
Nikunjkumar Kapupara
la source
3

Essaye ça:

Définissez d'abord un drapeau comme global comme ceci:

private boolean isShowPassword = false;

Et paramétrez l'auditeur pour qu'il gère le clic sur le bouton Afficher et masquer le mot de passe:

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;
                }
            }
        });
reza_khalafi
la source
2

Essayez le projet https://github.com/maksim88/PasswordEditText sur github. Vous n'avez même pas besoin de changer votre code Java en l'utilisant. Changez juste

Éditer le texte

tag à

com.maksim88.passwordedittext.PasswordEditText

dans votre fichier XML.

Anatoliy Shuba
la source
Avez-vous une idée de la façon d'utiliser setError avec ce composant, une fois l'erreur signalée, l'icône afficher / masquer devient invisible
guisantogui
2

afficher et masquer le mot de passe Edit_Text avec case à cocher

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>

code 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
Amin
la source
2

Avez-vous essayé avec setTransformationMethod? Il est hérité de TextView et souhaite un TransformationMethod comme paramètre.

Vous pouvez en savoir plus sur TransformationMethods ici .

Il a également quelques fonctionnalités intéressantes, comme le remplacement de personnage.

Hamcha
la source
2
Le lien dans la réponse est mort - "Code d'état: 404 introuvable" .
Pang le
developer.android.com/reference/android/text/method/… pourrait être une meilleure URL pour obtenir des informations sur les méthodes de transformation d'Android.
Mr.Drew le
1

Ce que j'ai fait était de

  1. Créer une vue de texte d'édition et une vue de texte normale
  2. Faites-les se chevaucher en utilisant la disposition des contraintes (tout comme l'écran de connexion de l'application Facebook)
  3. Attachez un onClickListener à la vue de texte normale afin qu'elle modifie le type d'entrée de la vue de texte d'édition en conséquence (visible / non visible)

Vous pouvez consulter cette vidéo pour des étapes et des explications plus détaillées https://youtu.be/md3eVaRzdIM

J'espère que ça aide :)

Jack Tiong
la source
1

Voici ma solution sans utiliser TextInputEditText et la méthode de 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>

Code 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;
        }
    });
Sagar Chapagain
la source
1

Selon cette source , si vous avez migré votre projet vers AndroidX, vous pouvez remplacer

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

avec

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

Ensuite, tout ce que vous avez à faire est de mettre le code ci-dessous dans votre fichier de mise en page:

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

Plus d' informations sur le matériel TextInputLayoutse trouve ici .

Pour cette source , il est recommandé de migrer vers AndroidX à partir de la bibliothèque de support Android:

AndroidX est le projet open-source que l'équipe Android utilise pour développer, tester, empaqueter, versions et publier des bibliothèques dans Jetpack.

AndroidX est une amélioration majeure de la bibliothèque de support Android d'origine. À l'instar de la bibliothèque d'assistance, AndroidX est livré séparément du système d'exploitation Android et offre une rétrocompatibilité entre les versions d'Android. AndroidX remplace entièrement la bibliothèque de support en fournissant la parité des fonctionnalités et de nouvelles bibliothèques. De plus, AndroidX comprend les fonctionnalités suivantes:

Tous les packages d'AndroidX vivent dans un espace de noms cohérent commençant par la chaîne androidx. Les packages de la bibliothèque de support ont été mappés dans les packages androidx. * Correspondants. Pour un mappage complet de toutes les anciennes classes et des artefacts de construction vers les nouveaux, consultez la page Refactoring de package.

Contrairement à la bibliothèque de support, les packages AndroidX sont maintenus et mis à jour séparément. Les packages androidx utilisent le contrôle de version sémantique strict à partir de la version 1.0.0. Vous pouvez mettre à jour les bibliothèques AndroidX dans votre projet indépendamment.

Tous les nouveaux développements de la bibliothèque de support auront lieu dans la bibliothèque AndroidX. Cela comprend la maintenance des artefacts d'origine de la bibliothèque de support et l'introduction de nouveaux composants Jetpack.

Amiraslan
la source
1

Au début, il s'agit de l'écran chargé avec une visibilité d'actif de vecteur d'image entrez la description de l'image ici

en cliquant dessus, la visibilité de cette image sera désactivée entrez la description de l'image ici

code pour le commutateur de mot de passe ci-dessus (code xml)

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/laypass"
    android:layout_width="330dp"
    android:layout_height="50dp"
    android:layout_marginTop="24dp"
    app:layout_constraintEnd_toEndOf="@+id/editText3"
    app:layout_constraintStart_toStartOf="@+id/editText3"
    app:layout_constraintTop_toBottomOf="@+id/editText3">

    <EditText
        android:id="@+id/edit_password"
        style="@style/EditTextTheme"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/round"
        android:drawableLeft="@drawable/ic_password"
        android:drawablePadding="10dp"
        android:ems="10"
        android:hint="Password"
        android:inputType="textPassword"
        android:paddingLeft="10dp"
        android:paddingRight="15dp"
        android:textColor="@color/cyan92a6"
        android:textColorHint="@color/cyan92a6"
        android:textCursorDrawable="@null"
        android:textSize="18sp"
        />

    <ImageView
        android:id="@+id/show_pass_btn"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="8dp"
        android:alpha=".5"
        android:onClick="ShowHidePass"
        android:padding="5dp"
        android:src="@drawable/ic_visibility"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/laypass"
        app:layout_constraintTop_toTopOf="@+id/edit_password" /> 
 </androidx.constraintlayout.widget.ConstraintLayout>

Code Java pour l'utilisation des boutons

public void ShowHidePass(View view) {

    if(view.getId()==R.id.show_pass_btn){
        if(edit_password.getTransformationMethod().equals(PasswordTransformationMethod.getInstance())){
            ((ImageView)(view)).setImageResource(R.drawable.ic_visibility_off);
            //Show Password
            edit_password.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
        }
        else{
            ((ImageView)(view)).setImageResource(R.drawable.ic_visibility);
            //Hide Password
            edit_password.setTransformationMethod(PasswordTransformationMethod.getInstance());
        }
    }
}
bunty785
la source
0

En XML, faites comme ça

    <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;
            }
Syed Danois Haider
la source
0

Mon extension Kotlin. écrire une fois utiliser partout

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()) }

Vous pouvez conserver cette méthode dans n'importe quel fichier et l'utiliser partout, utilisez-la comme ceci

ivShowPassword.click { etPassword.tooglePassWord() }

où l'on clique sur ivShowPassword imageview (eye) et etPassword est Editext

Aklesh Singh
la source
0

Une bonne solution. Configurez un bouton, puis utilisez ce code:

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");
    }


}
matthewoak
la source
0

Ajoutez cette méthode:

fun EditText.revertTransformation() {
    transformationMethod = when(transformationMethod) {
        is PasswordTransformationMethod -> SingleLineTransformationMethod.getInstance()
        else -> PasswordTransformationMethod.getInstance()
    }
}

L'appeler basculera entre l'état de type d'entrée (vous pouvez changer la transformation sur une seule ligne en votre favori). Exemple d'utilisation:

editText.revertTransformation()
Benny
la source
0
1> Make a selector file "show_password_selector.xml".

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/pwd_hide"
        android:state_selected="true"/>
    <item android:drawable="@drawable/pwd_show"
        android:state_selected="false" />
</selector>

2>set "show_password_selector" file into imageview.

<ImageView
                        android:id="@+id/iv_pwd"
                        android:layout_width="@dimen/_35sdp"
                        android:layout_height="@dimen/_25sdp"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="@dimen/_15sdp"
                        android:src="@drawable/show_password_selector" />

3> put below code in java file.
  iv_new_pwd.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (iv_new_pwd.isSelected()) {
                iv_new_pwd.setSelected(false);
                Log.d("mytag", "in case 1");
                edt_new_pwd.setInputType(InputType.TYPE_CLASS_TEXT);
            } else {
                Log.d("mytag", "in case 1");
                iv_new_pwd.setSelected(true);
                edt_new_pwd.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
            }
        }
    });
MEGHA DOBARIYA
la source
0
1> Make a selector file "show_password_selector.xml".

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/pwd_hide"
        android:state_selected="true"/>
    <item android:drawable="@drawable/pwd_show"
        android:state_selected="false" />
</selector>

2>set "show_password_selector" file into imageview.

<ImageView
                        android:id="@+id/iv_pwd"
                        android:layout_width="@dimen/_35sdp"
                        android:layout_height="@dimen/_25sdp"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="@dimen/_15sdp"
                        android:src="@drawable/show_password_selector" />

3> put below code in java file.
  iv_new_pwd.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (iv_new_pwd.isSelected()) {
                iv_new_pwd.setSelected(false);
                Log.d("mytag", "in case 1");
                edt_new_pwd.setInputType(InputType.TYPE_CLASS_TEXT);
            } else {
                Log.d("mytag", "in case 1");
                iv_new_pwd.setSelected(true);
                edt_new_pwd.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
            }
        }
    });
MEGHA DOBARIYA
la source
-2
if (inputPassword.getTransformationMethod() == PasswordTransformationMethod.getInstance()) {
 //password is visible
                inputPassword.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
            }
else if(inputPassword.getTransformationMethod() == HideReturnsTransformationMethod.getInstance()) {
 //password is hidden
                inputPassword.setTransformationMethod(PasswordTransformationMethod.getInstance());
            }
Ankit Tomer
la source