在Android EditText中，将隐藏/显示密码的默认眼睛图标更改为自定义图标。

Question

在Android EditText中，将隐藏/显示密码的默认眼睛图标更改为自定义图标。

40

我想在Android EditText中更改/显示不同的密码显示图标。我正在使用以下代码来显示图标。

<android.support.design.widget.TextInputLayout
    android:id="@+id/layoutTextInput"
    android:textColorHint="@color/aluminium">
    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/editTextValue"
        android:imeOptions="actionNext"
        android:layout_marginBottom="8dp"
        android:inputType="text"/>
</android.support.design.widget.TextInputLayout>

我想使用自定义图标而不是普通图标（眼睛图标）。请帮助我。

- Saianuradha Jandhyala

1

你是否尝试查看文档？ - Mike M.

我认为你的代码不会显示“普通图标（眼睛图标）”。 - Vladyslav Matviienko

请查看此链接：https://dev59.com/3lkT5IYBdhLWcg3wIsId - Manikandan K

您可以查看此链接：http://codevscolor.com/2016/08/android-material-design-tutorial-10-password-visibility-toggle/。 - Ratilal Chopda

10个回答

9

使用app：passwordToggleDrawable更改图标。使用app：passwordToggleTint更改图标的颜色，只有当图标是矢量可绘制对象时才有效。

   <android.support.design.widget.TextInputLayout
            android:id="@+id/layoutTextInput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@color/colorPrimary"
            app:passwordToggleDrawable="@drawable/ic_visibility_on">

        <android.support.design.widget.TextInputEditText
                android:id="@+id/editTextValue"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:drawablePadding="5dp"
                android:imeOptions="actionNext"
                android:inputType="textPassword"
                android:hint="Password"/>

    </android.support.design.widget.TextInputLayout>

- Hussain

7

如果您想使用默认的眼睛图标（显示/隐藏密码），但更改图标颜色，那么您只需输入以下代码即可：<i class="icon-eye"></i>。

app:passwordToggleTint="@color/yourColor"

如果您想使用自定义的眼睛图标，您应该使用：

app:passwordToggleDrawable

更改图标并使用。

app:passwordToggleTint

改变图标颜色。您自定义的图标颜色不会显示，而是显示着色颜色。整个XML代码如下：

<android.support.design.widget.TextInputLayout
        android:id="@+id/text_input_layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColorHint="@color/yourColor"
        android:theme="@style/TextLabelLogin"
        app:hintTextAppearance="@style/TextAppearance.App.TextInputLayout"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/yourColor"
        app:passwordToggleDrawable="@drawable/show_password_selector">

        <EditText
            android:id="@+id/etPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bottom_line_shape"
            android:hint="@string/password"
            android:textColorHint="@color/yourColor"
            android:inputType="textPassword"
            android:textColor="@color/yourColor"/>
    </android.support.design.widget.TextInputLayout>

以下是show_password_selector.xml的代码：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_hide_password" android:state_checked="true" />
<item android:drawable="@drawable/ic_show_password" /></selector>

希望这能帮到大家。

- Zahidul

4

例如更改显示/隐藏密码图标（ic_baseline_add_24 <=> 隐藏密码，ic_baseline_edit_24 <=> 显示密码）

drawable/ic_showhide_password.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_baseline_add_24" android:state_checked="true"/>
    <item android:drawable="@drawable/ic_baseline_edit_24"/>
</selector>

xml

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:endIconDrawable="@drawable/ic_showhide_password"
    app:endIconMode="password_toggle">

    <androidx.appcompat.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />

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

- Linh

这帮助我实现了我的目标。我想使用自定义的眼睛和带斜杠的眼睛图标。与 password_toggle 的默认行为相同，但图标不同。这完美地运作。谢谢。 - whitaay

注意：我知道OP要求自定义图标，但是如果你只需要一个密码切换按钮，那么app:endIconMode="password_toggle"已经提供了默认图标。 - undefined

4

TextInputLayout中的app:passwordToggleEnabled属性

添加依赖项

compile 'com.android.support:design:25.0.1'
    compile 'com.android.support:support-v4:25.0.1'
    compile 'com.android.support:appcompat-v7:25.0.1'
    compile 'com.android.support:support-vector-drawable:25.0.1'

  <android.support.design.widget.TextInputLayout
        android:id="@+id/layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/layout_email"
        android:textColorHint="@color/colorHint"
        app:passwordToggleEnabled="true">

        <EditText
            android:id="@+id/editTextPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="45dp"
            android:hint="@string/hint_password"
            android:inputType="textPassword"
            android:textColor="@color/textColor" />
    </android.support.design.widget.TextInputLayout>

- Keshav Gera

2

在您的Xml中创建一个RelativeLayout，其中包含TextInputLayout和Imageview。

 <RelativeLayout
            android:id="@+id/relative"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/relativeone"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:orientation="horizontal"
            android:weightSum="5">

            <android.support.design.widget.TextInputLayout
                android:id="@+id/layoutTextInput"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_gravity="center_vertical"
                android:layout_weight="5"
                android:gravity="center_vertical"
                android:hint="Password"
                android:paddingTop="4dp"
                android:textColorHint="#3f3f3f">

                <EditText
                    android:id="@+id/passwordedit"
                    android:layout_width="match_parent"
                    android:layout_height="60dp"
                    android:drawableLeft="@mipmap/bluelocked"
                    android:drawablePadding="13dp"
                    android:gravity="center_vertical"
                    android:inputType="textPassword"
                    android:paddingLeft="15dp"
                    android:textColor="#3f3f3f"
                    android:textColorHint="#3f3f3f"
                    android:textSize="13sp" />

            </android.support.design.widget.TextInputLayout>

            <ImageView
                android:id="@+id/imagepassword"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_gravity="center_vertical"
                android:paddingBottom="20dp"
                android:paddingRight="10dp"
                android:src="@mipmap/IMAGEYOUWANT" />

        </RelativeLayout>

在您的活动中添加onTouch()方法以显示和隐藏密码。

    ImageView imagepass = (ImageView) findViewById(R.id.imagepassword);
    imagepass .setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View view, MotionEvent motionEvent) {

            switch (motionEvent.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    editpass.setInputType(InputType.TYPE_CLASS_TEXT);
                    break;
                case MotionEvent.ACTION_UP:
                    editpass.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
                    break;
            }
            return true;
        }
    });

- Haris ali

1

使用 Material Components 库时，只需使用 app:endIconDrawable 属性即可：

<com.google.android.material.textfield.TextInputLayout
    app:endIconMode="password_toggle"
    app:endIconDrawable="@drawable/...."
    ..>

    <com.google.android.material.textfield.TextInputEditText
      ../>

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

- Gabriele Mariotti

0

1. 创建一个 XML 布局...我已经按照自己的方式创建了

                   <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/_50dp"
                    android:layout_marginTop="@dimen/_15dp">

                    <android.support.v7.widget.AppCompatEditText
                        android:id="@+id/etCurrentPassword"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/drawable_edit_text_2"
                        android:fontFamily="@font/poppins"
                        android:hint="@string/old_password"
                        android:inputType="textPassword"
                        android:padding="@dimen/_10dp" />

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/imgShowPassword1"
                        android:layout_width="@dimen/_50dp"
                        android:layout_height="@dimen/_50dp"
                        android:layout_gravity="end|center_vertical"
                        android:layout_marginRight="@dimen/_10sp"
                        android:padding="@dimen/_12dp"
                        android:tint="@android:color/darker_gray"
                        app:srcCompat="@drawable/ic_eye" />
                </FrameLayout>

2. 在 activity 类中：调用具有匹配参数的方法

showORhidePass(view,etRetypePassword,showPassword3 = !showPassword3);

void showORhidePass(AppCompatImageView imageView, AppCompatEditText editText, Boolean save){

        if (TextUtils.isEmpty(editText.getText())){
            return;
        }

        if (save){
            editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
            editText.setSelection(editText.length());
            imageView.setColorFilter(ContextCompat.getColor(requireContext(), android.R.color.darker_gray));
        }else{
            editText.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
            editText.setSelection(editText.length());
            imageView.setColorFilter(ContextCompat.getColor(requireContext(), R.color.colorPrimary));
        }

    }

- mainak

0

使用Android Material库，你只需要添加以下代码即可 -> app:passwordToggleEnabled="true"

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/TextInputLayout_password"
    style="@style/TextInputLayoutStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="24dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="24dp"
    android:hint="Password"
    app:passwordToggleEnabled="true">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/password_EditText"
        style="@style/EditText_Common_style"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:imeOptions="actionDone"
        android:inputType="textPassword"
        app:errorEnabled="true" />
        
</com.google.android.material.textfield.TextInputLayout>

- Awesome Jim

0

我使用文本实现它，即“显示”和“隐藏”

textViewShowPassword.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (textViewShowPassword.getText().toString().equalsIgnoreCase("Show")) {
                editTextPassword.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                textViewShowPassword.setText("Hide");
                editTextPassword.setSelection(editTextPassword.getText().length());
            } else {
                textViewShowPassword.setText("Show");
                editTextPassword.setTransformationMethod(new PasswordTransformationMethod());
                editTextPassword.setSelection(editTextPassword.getText().length());
            }

        }
    });

希望这对你有所帮助..!!

- RoHiT

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- shyam.y · Accepted Answer

创建一个新的可绘制文件，并将其命名为show_password_selector.xml。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_visibility_black_18dp" android:state_checked="true"/>
<item android:drawable="@drawable/ic_visibility_off_black_18dp"/>
</selector>

在您的布局文件中，需要在TextInputLayout中添加app:passwordToggleDrawable属性：

<android.support.design.widget.TextInputLayout
    android:id="@+id/layoutTextInput"
    app:passwordToggleEnabled="true"
    app:passwordToggleDrawable="@drawable/show_password_selector"
    android:textColorHint="@color/gray">
    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/editTextValue"
        android:imeOptions="actionNext"
        android:layout_marginBottom="8dp"
        android:inputType="text"/>
</android.support.design.widget.TextInputLayout>

供参考：https://www.youtube.com/watch?v=dW0YIV0Z9qk