CODEWITHSUNDEEP
androidmaterial-componentsmaterial-components-android
Nominalista
Nominalista

Reputation: 4838

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.

Upvotes: 6

Views: 5768

Answers (4)

Arman Bazarbayev
Arman Bazarbayev

Reputation: 69

Just set hint for EditText programmatically and remove app:hintEnabled="false" from your TextInputLayout if you have.

Upvotes: 4

Joen93
Joen93

Reputation: 1217

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

Upvotes: 7

milad salimi
milad salimi

Reputation: 1660

You should use this style in first :

<style name="TextInputLayoutOutlinedBoxStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="android:textColorHint">#F5F5F5</item>
    <item name="hintTextAppearance">@style/HintTextAppearance</item>
    <item name="boxCornerRadiusBottomEnd">20dp</item>
    <item name="boxCornerRadiusBottomStart">20dp</item>
    <item name="boxCornerRadiusTopEnd">20dp</item>
    <item name="boxCornerRadiusTopStart">20dp</item>
</style>

And you should have textinputlayout that contain this style like this :

  <com.google.android.material.textfield.TextInputLayout
        style="@style/TextInputLayoutOutlinedBoxStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/relativelayout_activatetoken_main"
        android:layout_marginStart="20dp"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="20dp"
        android:hint="@string/activatetoken_passwordhint"
        android:textColorHint="@color/colorText"
        app:helperText="@string/activatetoken_passwordhelpertext"
        app:helperTextTextAppearance="@style/TextAppearanceHelper"
        app:hintTextAppearance="@style/TextAppearanceBase"
        app:passwordToggleTint="@color/text_50">

And for the border color use this in colors :

 <color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#F5F5F5</color>

Upvotes: 0

DeePanShu
DeePanShu

Reputation: 1326

Try to set hint empty of both text layout and edit text:-

<com.google.android.material.textfield.TextInputLayout
      app:boxBackgroundMode="outline"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="">

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

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

If you want to use hint then you can use custom drawable as background of EditText :- 

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="10dp"/>
    <solid android:color="#ffffff"/>
    <stroke android:color="#000000"
    android:width="2dp"/>

</shape>

Upvotes: 0

Related Questions