Disable/Remove floating label hint text in TextInputLayout XML

Question

This may seem counter-intuitive but is there a way to disable or remove the floating label hint in TextInputLayout? The reason I want to use TextInputLayout instead of just an EditText is for the counter that TextInputLayout provides.

Here is what I have so far:

<android.support.design.widget.TextInputLayout
            android:id="@+id/textContainer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollbars="vertical"
            app:counterEnabled="true"
            app:counterMaxLength="100">

            <EditText
                android:id="@+id/myEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" 
                android:gravity="top|left"
                android:inputType="textMultiLine|textCapSentences"
                android:maxLength="100"
                android:scrollbars="vertical"
                android:hint="This is my cool hint"/>

        </android.support.design.widget.TextInputLayout>

Best idea to programatically you have to give hint and textChange event time Give to null hint in editbox that idea may help you — Ravi Vaghela, Feb 16 '16 at 05:02
Problem is the hint color. It becomes white when typing something. Please change the hint color or change the background color. You will see the hint while typing. — charitha amarasinghe, Oct 16 '17 at 06:47

Gauthier · Accepted Answer · 2016-11-04T03:03:24.610

260

Starting version 23.2.0 of the Support Library you can call

setHintEnabled(false)

or putting it in your TextInputLayout xml as such :

app:hintEnabled="false"

Though the name might makes you think it removes all hints, it just removes the floating one.

Related docs and issue: http://developer.android.com/reference/android/support/design/widget/TextInputLayout.html#setHintEnabled(boolean)

https://code.google.com/p/android/issues/detail?id=181590

edited Nov 04 '16 at 03:03

answered Apr 27 '16 at 17:10

Gauthier

4,798
5
34
44

I'm having this hide the error as well, which is a little unexpected (version 27.1.1) – kassim Sep 18 '18 at 07:17
41

Extra note: In order for this to work, you need to set the hint on the `TextInputEditText`. If you set the hint on the `TextInputLayout` it won't be shown. – alexbchr Mar 07 '19 at 14:49
14

But it adds some strange padding on top when you set app:hintEnabled="false" :( If you use icons on the right, it will be noticeable. I've added paddingTop="12dp" to TextInputEditText, it looks fine then. – NixSam May 02 '20 at 08:35
I don't know why android decided to change what a hint is, they should have referenced the label with another property. – htafoya Jan 11 '23 at 07:18

score 65 · Answer 2 · answered Mar 05 '16 at 20:37

There may be three ways to go about achieving this:

1 Set android:hint on TextInputLayout to a space _ character, and keep android:hint="This is my cool hint" set on the EditText.

<android.support.design.widget.TextInputLayout
    ....
    ....
    android:hint=" ">       <<----------

    <EditText
        ....
        ....
        android:hint="This is my cool hint"/>    <<----------

</android.support.design.widget.TextInputLayout>

This works because TextInputLayout performs the following check before using the EditText's hint:

// If we do not have a valid hint, try and retrieve it from the EditText
if (TextUtils.isEmpty(mHint)) {
    setHint(mEditText.getHint());
    // Clear the EditText's hint as we will display it ourselves
    mEditText.setHint(null);
}

By setting android:hint=" ", if (TextUtils.isEmpty(mHint)) evaluates to false, and the EditText retains its hint.

2 Second option would be to subclass TextInputLayout and override its addView(View child, int index, ViewGroup.LayoutParams params) method:

public class CTextInputLayout extends TextInputLayout {

    public CTextInputLayout(Context context) {
        this(context, null);
    }

    public CTextInputLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CTextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void addView(View child, int index, ViewGroup.LayoutParams params) {
        if (child instanceof EditText) {
            // cache the actual hint
            CharSequence hint = ((EditText)child).getHint();
            // remove the hint for now - we don't want TextInputLayout to see it
            ((EditText)child).setHint(null);
            // let `TextInputLayout` do its thing
            super.addView(child, index, params);
            // finally, set the hint back
            ((EditText)child).setHint(hint);
        } else {
            // Carry on adding the View...
            super.addView(child, index, params);
        }
    }
}

Then use your custom CTextInoutLayout instead of the one from the design support library:

<your.package.name.CTextInputLayout
    ....
    .... >       <<----------

    <EditText
        ....
        ....
        android:hint="This is my cool hint"/>    <<----------

</your.package.name.CTextInputLayout>

3 Third, and probably the most straight-forward way would be to make the following calls:

// remove hint from `TextInputLayout`
((TextInputLayout)findViewById(R.id.textContainer)).setHint(null);
// set the hint back on the `EditText`
// The passed `String` could also be a string resource
((EditText)findViewById(R.id.myEditText)).setHint("This is my cool hinttt.");

This actually is solution for one more problem. When you set app:hintEnabled="false", you can get strange bug - top or bottom line of the box (with OutlinedBox style) is cut or even missing. CTextInputLayout is perfect solution for this bug. (I am using material:1.0.0, and tested on material:1.1.0 alfa 1 and 2) — Aleksandar Mironov, Feb 28 '19 at 07:21

score 36 · Answer 3 · answered Oct 10 '18 at 09:00

With com.google.android.material you can hide by

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

               ....

               app:hintAnimationEnabled="false"
               app:hintEnabled="false"
               >

                <com.google.android.material.textfield.TextInputEditText
                    ........
                    android:hint="@string/label_hint"
                    />

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

Ruslan Berozov · Answer 4 · 2019-10-09T16:30:27.297

I've tried all of answers, but non of them are working now (specifically for com.google.android.material:material:1.1.0-beta01). Even if we make changes to EditText addition logic in TextInputLayout, we have empty space on top of field that blanking half of text and hint. Now I have a solution for the problem. Main thing is a padding in EditText, as mentioned in material.io:

<com.google.android.material.textfield.TextInputLayout
             . . .
    android:layout_height="wrap_content"
    app:hintEnabled="false"
    app:startIconDrawable="@drawable/ic_search_black"
    app:endIconMode="clear_text">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/et_search"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="12dp"
        android:hint="@string/showcase_search_hint_text"
        android:inputType="text" />

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

It allows us to implement a 'SearchView'-like view with search icon and text deletion button without any ugly "magic" with custom views

using android:paddingVertical="10dp" is better – Muhammad Babar Jan 31 '23 at 11:21 — Muhammad Babar, Jan 31 '23 at 11:21

score 6 · Answer 5 · answered Nov 06 '20 at 10:35

6

if you have used app:hintEnabled="false" then also set android:paddingTop="8dp" in EditText and boom top hint space is gone, this worked for me hope this works for you too

answered Nov 06 '20 at 10:35

T-Shamspour

146
2
5

score 3 · Answer 6 · answered Jun 02 '20 at 02:22

If someone have problems like me:

The label make the text padding show wrong then do this:

<com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:paddingTop="@dimen/default_padding"
                    android:paddingBottom="@dimen/default_padding"
                    android:layout_height="wrap_content"
                    android:hint="@string/search_hint" />

Add padding top and padding bottom to the TextInputEditText that will fix the problem

score 1 · Answer 7 · answered Jul 29 '20 at 08:17

Answer by @Gauthier is correct, but in case you don't want just the floating Hint but you want the Hint before text edit then in addition to disabling Hint for TextInputLayout you should provide hint in EditText widget.

I guess this answers few of the question raised by some people in above comments.

score 0 · Answer 8 · answered May 12 '20 at 06:22

myEditText.setOnFocusChangeListener { _, hasFocus ->
            if (hasFocus) textContainer.hint = null
            else myEditText.hint = getString(R.string.your_string)
        }

it makes your hint gone perfectly in your textInputLayout, because if you want to make it gone with app:hintEnabled="false" that's make your textInputLayout not cool :)

Ankita Bhatt · Answer 9 · 2020-05-27T03:32:12.127

 <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/etemailLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint=" ">

            <EditText
                android:id="@+id/txtemail"
                style="@style/login_edittext"
                android:hint="Enter Your Email Address"
                android:inputType="textEmailAddress" />

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

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/etPasswordLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint=" "
            android:scrollbars="vertical"
            app:counterEnabled="true"
            app:passwordToggleEnabled="true">

            <EditText
                android:id="@+id/txtpassword"
                style="@style/login_edittext"
                android:fontFamily="@font/ubuntu"
                android:hint="Enter Password"
                android:inputType="textPassword"
                android:maxLength="8"
                android:scrollbars="vertical" />

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

for apply style to your EditText put below code in Styles.xml ..

<style name="login_edittext">
        <item name="android:layout_marginTop">15dp</item>
        <item name="android:background">@drawable/edittext_background</item>
        <item name="android:textColorHint">#FFFFFF</item>
        <item name="android:textColor">#FFFFFF</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

for backgroud effect create edittext_background.xml in drawable..

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="7dp" />
    <solid android:color="#80ffffff" />
    <padding android:left="10dp" android:right="10dp"
        android:top="10dp" android:bottom="10dp" />
    <stroke android:width="2dp" android:color="#FFFFFF" />
</shape>

This is easiest way to apply Hint but don't show it on upside when user clicks on EditeText. — Ankita Bhatt, May 27 '20 at 03:34
Must Try This Solution, It Will Not Have Any Error In Code. And No Need To Change Code.Directly Put This Code. — Ankita Bhatt, May 27 '20 at 03:36

score -1 · Answer 10 · answered Feb 16 '16 at 04:13

-1

I think this will help you:

textContainer.setHintAnimationEnabled(false);

answered Feb 16 '16 at 04:13

Darshak

2,298
4
23
45

Does not work my friend. I tried in code and via XML `app:hintAnimationEnabled="false"` and neither worked. I think this just disables the animation of that label floating up. – Micro Feb 16 '16 at 04:17
So, you want to remove hint text, is it? – Darshak Feb 16 '16 at 04:19
I want the hint text to appear inside of the `EditText` faded. Then when you click the `EditText` I want the hint text to disappear, instead of moving up to the floating label. Just like a regular `EditText` does it. – Micro Feb 16 '16 at 04:24

score -1 · Answer 11 · answered Mar 04 '16 at 14:31

-1

update the design library to v23 and add app:hintAnimationEnabled="false" in the TextInputLayout

answered Mar 04 '16 at 14:31

inkedTechie

684
5
13

Disable/Remove floating label hint text in TextInputLayout XML

11 Answers11

Linked