passwordToggleEnabled set to true but not working

Question

I'm looking to use passwordToggleEnabled with TextInputLayout and TextInputEditText. The problem I'm having is that the icon appears but when clicking it, nothing happens. It almost seems like clicking it just refocuses on the TextInputEditText rather than unmasking the password. I'm thinking this because the pointer under the cursor will very quickly pulse lighter then back to default color as if I'm clicking within the focused EditText.

I'm using a custom background for the TextInputEditText to have white, circular bubbles when inputting information, but I realized the white background in my custom drawable was covering the icon. So when the field is focused, the bubble now has a stroke and a transparent background so the icon is visible.

I've tried completely removing the background but the icon still didn't do anything.

Here's the custom background (rounded_edit_text.xml):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="false">
        <layer-list>
            <item android:top="@dimen/_3sdp">
                <shape
                    android:shape="rectangle" android:padding="10dp">
                    <solid android:color="@color/white"/>
                    <corners
                        android:bottomRightRadius="30dp"
                        android:bottomLeftRadius="30dp"
                        android:topLeftRadius="30dp"
                        android:topRightRadius="30dp"/>
                </shape>
            </item>

        </layer-list>
    </item>

    <item android:state_focused="true">
        <layer-list>
            <item android:top="@dimen/_3sdp">
                <shape
                    android:shape="rectangle" android:padding="10dp">
                    <solid android:color="@color/Transparent"/>
                    <corners
                        android:bottomRightRadius="30dp"
                        android:bottomLeftRadius="30dp"
                        android:topLeftRadius="30dp"
                        android:topRightRadius="30dp"/>
                    <stroke
                        android:color="@color/evenlightergrey"
                        android:width="@dimen/_1sdp"/>
                </shape>
            </item>

        </layer-list>
    </item>
</selector>

And here is the password bit of the layout:

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/password_textInput"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:clipToPadding="false"
        android:clipChildren="false"
        app:layout_constraintTop_toBottomOf="@id/email_bottom_guideline"
        app:layout_constraintStart_toStartOf="@id/start_guideline"
        app:layout_constraintEnd_toStartOf="@id/end_guideline"
        app:layout_constraintBottom_toTopOf="@id/password_bottom_guideline"
        app:hintTextAppearance="@style/PurpleFloatingHintStyle"
        app:errorEnabled="true"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/main_purple">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/password_editText"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_32sdp"
            android:textCursorDrawable="@drawable/main_purple_cursor"
            android:elevation="@dimen/_10sdp"
            android:importantForAutofill="no"
            android:background="@drawable/rounded_edit_text"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:gravity="center_vertical|start"
            android:inputType="textPassword"

            android:textSize="@dimen/_16sdp"
            android:paddingTop="@dimen/_3sdp"
            android:paddingLeft="@dimen/_10sdp"
            android:paddingRight="@dimen/_10sdp"
            android:paddingStart="@dimen/_10sdp"
            android:paddingEnd="@dimen/_10sdp"
            android:hint="Password"
            app:layout_constraintStart_toStartOf="@id/start_guideline"
            app:layout_constraintEnd_toStartOf="@id/end_guideline"/>

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

And some screenshots to round things out:

Is there something I'm missing? I've watched some YouTube videos that seem to do it the same way as I have here, and an older version of this code also has a lot of the same stuff and it's working. Thank you!

Answer 1

Remove the android:elevation="@dimen/_10sdp" in your TextInputEditText

With elevation

Without elevation

It is not related to your issue but use:

  app:endIconMode="password_toggle"
  app:endIconTint="@color/..."

instead of:

    app:passwordToggleEnabled="true"
    app:passwordToggleTint="@color/main_purple"