Remove floating label hint text in TextInputLayout

Question

Is there any way to remove floating label (hint) when the user clicks on the text field? When I click on the text field, the hint just automatically moves above the editText but it does not disappear. I want the hint to disappear whenever the user clicks on the text field and enters some texts in it.

Here is the XML code:

 <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/etPasswordLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:passwordToggleEnabled="true"
                app:hintTextAppearance="@style/MyHintStyle"
                android:textColorHint="@android:color/white"
                app:hintAnimationEnabled="false">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/password_login"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    android:background="@drawable/edittext_background"
                    android:hint="@string/password"
                    android:inputType="textPassword"
                    android:padding="15dp"
                    android:textColor="@android:color/white"
                    android:textColorHint="@android:color/white" />
            </com.google.android.material.textfield.TextInputLayout>

Yashovardhan99 · Accepted Answer · 2020-07-20T14:32:12.000

app:hintEnabled="false"

Just add this in your TextInputLayout. Despite what the name suggests, it only removes the floating label hint but leaves the EditText hint intact.

Alternatively, you can achieve the same results by calling setHintEnabled(false) on the TextInputLayout from your code.

Pro tip: You might see your EditText not being aligned properly inside the TextInputLayout if you disable the hint. This is a known issue. A fix for this is to simply add a top padding of 8dp in your EditText. (Reference)

You can refer the documentation for a better understanding

score 5 · Answer 2 · answered Jul 19 '20 at 16:04

5

Remove the android:hint and use the app:placeholderText

   <com.google.android.material.textfield.TextInputLayout
        app:endIconMode="password_toggle"
        app:placeholderText="Password"
        ..>

Note: it requires at least the version 1.2.0-alpha03.

answered Jul 19 '20 at 16:04

Gabriele Mariotti

320,139
94
887
841

With this approach the placeholder text is not entered vertically within the TextInputLayout? – Izak Mar 08 '22 at 03:58

score 1 · Answer 3 · answered Jul 19 '20 at 14:39

     <com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/etPasswordLayout"
                    app:hintEnabled="false"
      
  android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:passwordToggleEnabled="true"
                    app:hintTextAppearance="@style/MyHintStyle"
                    android:textColorHint="@android:color/white"
                    app:hintAnimationEnabled="false">
    
                    <com.google.android.material.textfield.TextInputEditText
                        android:id="@+id/password_login"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="10dp"
                        android:background="@drawable/edittext_background"
                        android:hint="@string/password"
                        android:inputType="textPassword"
                        android:padding="15dp"
                        android:textColor="@android:color/white"
                        android:textColorHint="@android:color/white" />
                </com.google.android.material.textfield.TextInputLayout>

app:hintEnabled="false" remove the floating of hint not disabling the hint.

score 0 · Answer 4 · answered Mar 15 '21 at 13:39

This function can help you (Kotlin)

fun hintRemover(textInputLayout: TextInputLayout, textInputEditText: TextInputEditText, text: String) {
    textInputEditText.setOnFocusChangeListener { _, hasFocus ->
        if (hasFocus) {
            textInputLayout.hint = null
        }
        else {
            textInputLayout.hint = text
        }
    }
}

Remove floating label hint text in TextInputLayout

4 Answers4