DrawableButton in EditText to Show/Hide Password and change 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

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>

Answer 2

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