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>

Hegira

Answer 1

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

Escarole

Answer 2

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.

Core

With this approach the placeholder text is not entered vertically within the TextInputLayout? – Septet

Answer 3

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

Deaf

Answer 4

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
        }
    }
}

Externalize