EditText 中的 DrawableButton 以显示/隐藏密码并更改 DrawableEnd

Question

This is the activity_register.xml :

<EditText
    android:id="@+id/editTextTextPassword"
    android:layout_width="346dp"
    android:layout_height="49dp"
    android:layout_marginTop="32dp"
    android:drawableStart="@drawable/ic_vpn_key"
    android:drawableEnd="@drawable/ic_visibility"
    android:ems="10"
    android:hint="@string/password_hint"
    android:inputType="textPassword"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.502"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/editTextTextEmailAddress" />

So,

I have password EditText

When you click the drawableEnd , you should see the password and the drawable should change to another one, which then hides the password again.

I found tutorials where you can show the password -> worked
_________________________change the drawable -> didn't work
But, I found no tutorial for a onClickListener inside a drawable for kotlin

Problem short
Code to show the password if the drawable is clicked, and if it clicked another time the password hides again.

Answer 1

What you want is TextInputLayout from the Material Componenets.

Here's how you do it:

• Implement Material Library in your build.gradle(app) file as:

   implementation 'com.google.android.material:material:1.3.0-alpha01'

• Then, change the XML's EditText to

  <com.google.android.material.textfield.TextInputLayout android:id="@+id/passwordLayout" style="@style/TextInputLayoutAppearanceFilled" android:layout_width="0dp" android:layout_height="wrap_content" android:hint="@string/password" app:endIconMode="password_toggle" //This is used to set the password toggle behavior app:startIconDrawable="@drawable/ic_lock_black_24dp"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/password" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPassword" android:textSize="@dimen/_12ssp" /> </com.google.android.material.textfield.TextInputLayout>

• Then, Change the Style as you want in styles.xml :

   <style name="TextInputLayoutAppearanceFilled" parent="Widget.MaterialComponents.TextInputLayout.FilledBox"> <item name="hintTextAppearance">@style/HintText</item> <item name="helperTextTextAppearance">@style/HelperText</item> <item name="android:textColor">@color/dark_grey</item> <item name="android:textColorHint">@color/color</item> <item name="hintTextColor">@color/color</item> <item name="boxStrokeColor">@color/color</item> <item name="startIconTint">@color/color</item> <item name="endIconTint">@color/color</item> <item name="boxBackgroundColor">@color/white</item> <item name="boxCornerRadiusBottomEnd">@dimen/_26sdp</item> <item name="boxCornerRadiusBottomStart">@dimen/_26sdp</item> <item name="boxCornerRadiusTopEnd">@dimen/_26sdp</item> <item name="boxCornerRadiusTopStart">@dimen/_26sdp</item> <item name="boxStrokeWidthFocused">0dp</item> <!--This destroys the visible layout in layout editor so first comment this out to design--> <!--<item name="boxStrokeWidth">0dp</item>--> <item name="hintEnabled">true</item> </style>

• Here's how the output will look like:

  

The Password toggle will work exactly how you want it, also, the icon changes to the other one as well. You can further customize it as you want, have a look at the official documentation first - TextInputLayout

Answer 2

Just use the TextInputLayout provided by the Material Components Library with the password toggle end icon:

<com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:startIconDrawable="@drawable/..."
        app:endIconMode="password_toggle"
        android:hint="Password">

        <com.google.android.material.textfield.TextInputLayout
            android:inputType="textPassword"
            .../>

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