How to disable ripple effect on password toggle button of TextInputLayout

user_10394762 0
Viewed 1650

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>
android-textinputlayout material-components-android material-design android xml
3 Answers

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

user_40598490

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

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

user_20165620
Related