Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove floating label from TextInputLayout with OutlinedBox style?

Is there way to remove floating label (hint) when the TextInputLayout is in focused mode?

When I try to set app:hintEnabled="false" and hint inside TextInputeEditText, the TextInputLayout behaves weird by hiding top stroke.

<com.google.android.material.textfield.TextInputLayout
      style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="Text">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

Important thing is that I use Material Components in version 1.1.0-alpha01.

Edit

This is what it looks like (when input is not focused):

Screenshot

Top stroke is cut.

like image 657
Nominalista Avatar asked Jan 01 '23 08:01

Nominalista


2 Answers

Yes there's a rather simple way to remove the floating label hint and only have a hint inside your TextInputLayout.

This can be easily achieved by disabling the hint in the TextInputLayout, and setting the hint on the TextInputEditText instead of the TextInputLayout like this:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintEnabled="false">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="hint text comes here" />

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

The result looks something like this: enter image description here

And when some text is added, it will look like this: enter image description here

I tried this out in Material Components v1.2.0

like image 77
Joen93 Avatar answered Jan 21 '23 16:01

Joen93


Just set hint for EditText programmatically and remove app:hintEnabled="false" from your TextInputLayout if you have, in my case worked :)

like image 28
Arman Bazarbayev Avatar answered Jan 21 '23 16:01

Arman Bazarbayev