CODEWITHSUNDEEP
androidandroid-textinputlayout
Micro
Micro

Reputation: 10891

Disable/Remove floating label hint text in TextInputLayout XML

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>

Upvotes: 115

Views: 90753

Answers (11)

T-Shamspour
T-Shamspour

Reputation: 186

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

Upvotes: 10

ritesh4302
ritesh4302

Reputation: 386

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.

Upvotes: 1

Kyo Huu
Kyo Huu

Reputation: 578

If someone have problems like me:

Bug lable padding

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

Upvotes: 3

Ankita Bhatt
Ankita Bhatt

Reputation: 21

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

Upvotes: 0

Abdhi P
Abdhi P

Reputation: 79

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 :)

Upvotes: 0

Ruslan Berozov
Ruslan Berozov

Reputation: 569

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

Upvotes: 14

Campino
Campino

Reputation: 862

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>

Upvotes: 37

Gauthier
Gauthier

Reputation: 4978

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

Upvotes: 272

Vikram
Vikram

Reputation: 51581

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.");

Upvotes: 70

inkedTechie
inkedTechie

Reputation: 684

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

Upvotes: -1

Darshak
Darshak

Reputation: 2326

I think this will help you:

textContainer.setHintAnimationEnabled(false);

Upvotes: -1

Related Questions