Getting overlapping hint over com.google.android.material.textfield.OutlinedBox

Question

While working with com.google.android.material.textfield.TextInputLayout, I am getting overlapping hint over the outlined box. This is the style I'm using:

Widget.MaterialComponents.TextInputLayout.OutlinedBox

Here's my code:

<com.google.android.material.textfield.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColorHint="@color/gray"
                app:passwordToggleDrawable="@drawable/show_password"
                android:hint="Password"
                android:focusable="true"
                app:hintTextColor="@color/black"
                app:endIconMode="password_toggle"
                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/etLoginPassword"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/aileron_regular_webfont"
                    android:textCursorDrawable="@null"
                    android:layout_gravity="center_vertical"
                    android:inputType="textPassword"
                    android:imeOptions="actionDone"
                    android:tag="Please enter password."
                    android:background="@drawable/edittextbox"/>
            </com.google.android.material.textfield.TextInputLayout>

Here's my edittextbox.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="270"
                android:endColor="@color/white"
                android:startColor="@color/white" />
            <stroke
                android:width="1dp"
                android:color="@color/black" />
            <corners
                android:radius="4dp" />
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>
</selector>

Here's what I'm getting:

Please let me if there's any solution. Thanks in advance.

score 0 · Answer 1 · answered Jul 20 '21 at 12:22

You have to remove the custom android:background in your TextInputEditText

   <com.google.android.material.textfield.TextInputEditText
          android:background="@drawable/edittextbox"/>

and use something like:

<com.google.android.material.textfield.TextInputLayout
    app:endIconDrawable="@drawable/..."
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    app:shapeAppearanceOverlay="@style/radius4dp"
    app:boxStrokeColor="@color/black"
    app:boxStrokeWidth="1dp"
    app:boxStrokeWidthFocused="1dp"
     ...>

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

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

Getting overlapping hint over com.google.android.material.textfield.OutlinedBox

1 Answers1