TextInputLayout not showing EditText hint before user focus on it

AndroidMaterial DesignAndroid Design-Library

Android Problem Overview


I am using recently released Android Design Support Library to show floating label with EditTexts. But i am facing the problem that the Hint on the EditText is not showing when UI is rendered, but i see the Hint after i focus on the EditTexts.

My Layout is as follows:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <ScrollView
        android:id="@+id/ScrollView01"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin">

            <android.support.design.widget.TextInputLayout
                android:id="@+id/name_et_textinputlayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/activity_vertical_margin">

                <EditText
                    android:id="@+id/FeedBackerNameET"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/feedbackname"
                    android:inputType="textPersonName|textCapWords" />
            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:id="@+id/email_textinputlayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/FeedBackerEmailET"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/feedbackemail"
                    android:inputType="textEmailAddress" />

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

            <Spinner
                android:id="@+id/SpinnerFeedbackType"
                android:layout_width="fill_parent"
                android:layout_height="48dp"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                android:entries="@array/feedbacktypelist"
                android:prompt="@string/feedbacktype" />

            <android.support.design.widget.TextInputLayout
                android:id="@+id/body_textinputlayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/EditTextFeedbackBody"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/feedbackbody"
                    android:inputType="textMultiLine|textCapSentences"
                    android:lines="5" />

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

            <CheckBox
                android:id="@+id/CheckBoxFeedBackResponse"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                android:text="@string/feedbackresponse" />

            <Button
                android:id="@+id/ButtonSendFeedback"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                android:text="@string/feedbackbutton" />
        </LinearLayout>
    </ScrollView>

</FrameLayout>

<View
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:background="@drawable/toolbar_shadow" />
</FrameLayout>

I have also tried to set hint for the TextInputLayout using method setHint but no luck.

mNameTextInputLayout = (TextInputLayout) v.findViewById(R.id.name_et_textinputlayout);
mNameTextInputLayout.setErrorEnabled(true);
mNameTextInputLayout.setHint(feedBackerNameET.getHint());

mEmailTextInputLayout = (TextInputLayout) v.findViewById(R.id.email_textinputlayout);
mEmailTextInputLayout.setErrorEnabled(true);
mEmailTextInputLayout.setHint(feedBackerEmail.getHint());

mBodyTextInputLayout = (TextInputLayout) v.findViewById(R.id.body_textinputlayout);
mBodyTextInputLayout.setErrorEnabled(true);
mBodyTextInputLayout.setHint(feedBackBody.getHint());

Android Solutions


Solution 1 - Android

Update:

This is a bug that has been fixed in version 22.2.1 of the library.

Original Answer:

As mentioned by @shkschneider, this is a known bug. Github user @ljubisa987 recently posted a Gist for a workaround:

https://gist.github.com/ljubisa987/e33cd5597da07172c55d

As noted in the comments, the workaround only works on Android Lollipop and older. It does not work on the Android M Preview.

Solution 2 - Android

That is a known bug of the Android Design library. It has been accepted and assigned.

So you should have this fixed in the next Android Design library release.

In the meantime, you could watch the issue tracker for a hacky-fix that might get posted there, but I don't know any as of now.

And yes, it only affect Lollipop and above.

Solution 3 - Android

This works for me in Design Library 23.1.1:

Set the hint color in xml attributes of TextInputLayout:

    <android.support.design.widget.TextInputLayout
        ....
        android:layout_margin="15dp"
        android:textColorHint="@color/hintColor"
        android:layout_width="match_parent"
        ...

Solution 4 - Android

This issue is fixed in version 22.2.1

Solution 5 - Android

you should use android.support.v7.widget.AppCompatEditText as EditText and set android:hint like below

<android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        <android.support.v7.widget.AppCompatEditText
                android:id="@+id/etx_first_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"                    
                android:inputType="text"
                android:hint="@string/hint_first_name"/>
    </android.support.design.widget.TextInputLayout>

Solution 6 - Android

   <android.support.design.widget.TextInputLayout
            android:id="@+id/editText1"
            android:layout_margin="15dp"
            android:layout_centerVertical="true"
            android:layout_width="match_parent"

            android:layout_height="wrap_content">

              <AutoCompleteTextView
                android:id="@+id/editText"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:singleLine="true"
                android:hint="Add City" />

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

Use this code snippet.Make sure your activity is AppCompatActivity. And dependency are also with latest versions

compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.android.support:design:22.2.0'

Update the android studio to latest version. see output here

Solution 7 - Android

If you are setting your EditText hint programmatically it wouldn't work! You need to set the hint on the TextInputLayout it self.

TextInputLayout textInputLayout = (TextInputLayout) findViewById(R.id.usernameTextInputLayout);
textInputLayout.setHint(getString(R.string.username_hint));

Here is the XML in case you are wondering:

        <android.support.design.widget.TextInputLayout
            android:id="@+id/usernameTextInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.AppCompatEditText
                android:id="@+id/usernameEt"
                android:layout_width="match_parent"
                android:layout_height="@dimen/default_height"
                android:layout_marginEnd="@dimen/default_margin"
                android:layout_marginStart="@dimen/default_margin"
                android:maxLength="@integer/username"
                tools:hint="Username" />

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

Solution 8 - Android

This issue is resolved in v23.0.1 of support design library. I also updated my appcompat-v7 to 23.0.1, compileSdkVersion to 23 & buildToolsVersion to 23.0.1 in build.gradle.

android {    
compileSdkVersion 23
buildToolsVersion "23.0.1"
}

dependencies {
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:23.0.1'
}

Solution 9 - Android

I solved my problem with this code:

new Handler().postDelayed(
        new Runnable() {
            @Override
            public void run() {
                TextInputLayout til = (TextInputLayout) someParentView.findViewById(R.id.til);
                til.setHint("Your Hint Text");
                til.bringToFront();
            }
        }, 10);

The key here is the bringToFront. It forces the TextInputLayout to redo its drawing, which is not the same as doing invalidate(). If you are trying to display the TextInputLayout on a view that has animations or tranistions, you need to execute the above code at the end of the animation or transition. Just make sure that the code above runs on the UI thread.

Solution 10 - Android

Set hint color that contrast to the EditText background.

<item name="android:textColorHint">#FF424242</item>

Related:
https://stackoverflow.com/q/6438478/1608670
https://stackoverflow.com/q/30824009/1608670
https://stackoverflow.com/q/30546430/1608670

Solution 11 - Android

Looks like this issue appears when you set onFousListener on EditText - try to extend EditText and support multiple onFocusListeners

Solution 12 - Android

Problem solved: Goto build.gradle of ur app and check design library. compile 'com.android.support:design:22.2.1' It should be 22.2.1 or newer.

Solution 13 - Android

I found something different.

When setting the style for the fragment,

f1.setStyle(DialogFragment.STYLE_NO_FRAME,android.R.style.Theme_DeviceDefault_Light);

The bug was gone when I tried different Styles than "Theme_DeviceDefault_Dialog".

Give it a try.

Solution 14 - Android

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.

Solution 15 - Android

There is a simple solution to this as this worked for me

<android.support.design.widget.TextInputLayout
    android:id="@+id/activity_login_til_password"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="27dp"
    android:layout_marginTop="24dp"
    android:padding="10dp"
    app:passwordToggleEnabled="true"
    app:passwordToggleTint="#000000"
    app:passwordToggleDrawable="@drawable/passwordviewtoggleselector"
    android:theme="@style/Base.TextAppearance.AppCompat">
      <!---- add this line and theme as you need ----->
    <android.support.design.widget.TextInputEditText
        android:id="@+id/activity_login_et_password"
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:hint="Password"
        android:inputType="textPassword"
        android:padding="10dp"
        android:textColor="#f5ab3a"
        android:textColorHint="#e6d2d1cf"
        android:textSize="20dp" />

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

Just add android:theme="@style/Base.TextAppearance.AppCompat" to the TextEditLayout and it should work and you can change the theme as you need.

Solution 16 - Android

Just add: android:hint="your_hint" for TextInputLayout.

Solution 17 - Android

if you have set your layout background white please use it in your Activity Theme

 parent="Theme.MaterialComponents.Light.NoActionBar"

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionShajeel AfzalView Question on Stackoverflow
Solution 1 - AndroidDave JensenView Answer on Stackoverflow
Solution 2 - AndroidshkschneiderView Answer on Stackoverflow
Solution 3 - AndroidEmbydextrousView Answer on Stackoverflow
Solution 4 - AndroidJdruweView Answer on Stackoverflow
Solution 5 - AndroidAhmadView Answer on Stackoverflow
Solution 6 - AndroidAjinkyaView Answer on Stackoverflow
Solution 7 - AndroidMuhammad AlfaifiView Answer on Stackoverflow
Solution 8 - AndroidWahib Ul HaqView Answer on Stackoverflow
Solution 9 - AndroidJohannView Answer on Stackoverflow
Solution 10 - AndroidIvan ChauView Answer on Stackoverflow
Solution 11 - AndroidnartusView Answer on Stackoverflow
Solution 12 - AndroidAbhishekView Answer on Stackoverflow
Solution 13 - AndroidJorge CardenasView Answer on Stackoverflow
Solution 14 - Androidcharitha amarasingheView Answer on Stackoverflow
Solution 15 - AndroidManish Kumar SinghView Answer on Stackoverflow
Solution 16 - AndroidPratik KaraleView Answer on Stackoverflow
Solution 17 - AndroidHiPradeepView Answer on Stackoverflow