How to disable ripple effect on password toggle button of TextInputLayout

Question

I use TextInputLayout to show password toggle button. It is working but the ripple effect is behind the background of the EditText (I use drawable background for the EditText). How can I disable the ripple effect of the password button or bring the ripple in front of the EditText background? Here the recorded video that demonstrated the problem https://imgur.com/nYOB6Ye .

<com.google.android.material.textfield.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="25dp"
                app:hintEnabled="false"
                app:passwordToggleEnabled="true">

                <com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/bg_edit"
                    android:hint="••••••"
                    android:inputType="textPassword"
                    android:padding="18dp" />
            </com.google.android.material.textfield.TextInputLayout>

Answer 1

You can achieve the same result removing the android:background="@drawable/bg_edit" in your TextInputEditText and using an OutlinedBox style :

    <com.google.android.material.textfield.TextInputLayout
        android:hint="••••••"
        app:endIconMode="password_toggle"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:boxBackgroundColor="@color/....."
        ..>

           <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword"
                android:padding="18dp" />

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

Note: app:passwordToggleEnabled="true" is deprecated. Just add app:endIconMode="password_toggle" .

Answer 2

It is not brilliant solution, but it work for me.
materialVersion: 1.1.0

Koltin:

textInputLayout.apply {
        findViewById<View>(R.id.text_input_end_icon).setBackgroundColor(
            ResourcesCompat.getColor(resources, R.color.transparent, theme)
        )
    }

R.id.text_input_end_icon was find via Layout Inspector

Answer 3

A simple way, create a new theme for password toggle is shown below. Parent theme is your main(App) theme.

<style name="PasswordToggleTransparent" parent="NoActionBar">
        <item name="colorControlHighlight">#0000</item>
</style>

and apply this theme to your TextInputLayout :

android:theme="@style/PasswordToggleTransparent"