TextInputLayout and EditText double hint issue

Question

I want to set the hint with java in EditText(which is in TextInputLayout).

Code used for setting hint:

aET = (EditText) findViewById(R.id.aET); aET.setHint("h?");

But even when edittext is focused, Hint is displayed twice(inside edittext also).

Please let me know if anyone had faced and found some workaround

when editText is focused...

Second

when editText is not focused..

First

EDIT[10th July 2015]:

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

I use `AppCompatEditText` and have no problems with the hint, maybe that a requirement? I am not sure but its worth a try — tyczj, Jul 06 '15 at 16:59

score 42 · Answer 1 · answered Jul 09 '15 at 12:33

42

This problem occurs because the hint from the xml is passed on to the TextInputLayout, so it can be displayed as a floating hint. But when you set it programatically, the hint is set to the EditText, which then results in two hints (one from the xml that is a floating hint and one you set programatically and is a normal EditText hint). If you wish to change the floating hint, you must set the hint on TextInputLayout.

You code will then look like this:

aTIL = (TextInputLayout) findViewById(R.id.aTIL);
aTIL.setHint("h?");

answered Jul 09 '15 at 12:33

neits

1,963
1
18
32

1

Hello neits, In XML, I am giving the hint only in java(no hint in xml). I tried to sethint for TextInputLayout yet hint is not displayed. but when hint is set to edittext it is displaying twice. – karsas Jul 10 '15 at 02:54
Does the hint ever change? If it does not, the best option is to set it in your xml layout file. Could you show your xml? Setting the hint to TextInputLayout should work. If everything else is ok, it might be this [bug](https://code.google.com/p/android/issues/detail?id=175228). – neits Jul 10 '15 at 10:25
I faced this issue also, and I created using customTextInputLayout as solution. and I have added xml contents as an EDIT to the question please check the same. – karsas Jul 10 '15 at 10:38
1

this worked for me, and thank you very much for the explanation. – Cristian Hoyos Sep 16 '16 at 19:32
Thanks! I wasted too much time until realized that we should set hint of `TextInputLayout`, not inner `TextInputEditText` or `EditText`! – CoolMind Nov 11 '21 at 13:40

acs-team · Accepted Answer · 2015-07-20T19:06:54.380

12

I found the solution !

In your EditText add

android:textColorHint="@android:color/transparent"

And in the code set the hint from the EditText

aET.setHint("h?");

The hint in your editText is hidden and the hint from the TextInputLayout is shown.

EDIT :

Other solution (The best)

Update Graddle with the new version of android:design

compile 'com.android.support:design:22.2.1'

edited Jul 20 '15 at 19:06

answered Jul 19 '15 at 14:04

acs-team

602
6
14

This solution only helps with the hint text from xml and not with hint text being set programmitically. If we want to use the hint text from xml itslef then what is the need to set it dynamically? – Rahul Hawge Mar 10 '16 at 13:01
I don't understand your question. If you want to set the hint text by XML you can use android:hint="h?". By the way, you should use the last version of the library ! This bug is solved from a long time ! – acs-team Mar 11 '16 at 13:29
Previously, in July 2015, there was a bug in the design library. Now it's fixed from a long time ! – acs-team Nov 17 '16 at 16:35
This solution is wrong and it should not be marked as accepted. Solution from @neits below is the correct one. – JerabekJakub Sep 01 '17 at 12:28

score 12 · Answer 3 · answered Oct 27 '15 at 15:30

12

I also had this issue.

when I needed to update the hint, I (erroneously) did that on both the EditText and the TextInputLayout, which resulted in a blur.

solution was to not call EditText.setHint() but only TextInputLayout.setHint()

answered Oct 27 '15 at 15:30

axd

626
5
13

score 4 · Answer 4 · answered Jan 15 '18 at 06:27

You can go by using two hint texts. One for the TextInputLayout and other for the edit text inside it.Below is the reference:

<android.support.design.widget.TextInputLayout
                                    style="@style/editText_layout"
                                    android:id="@+id/entryScreenProduction_editText_percentCompleted_layout"
                                    android:hint="%Completed">

                                    <EditText
                                        android:id="@+id/entryScreenProduction_editText_percentCompleted"
                                        style="@style/editTextNotes"
                                        android:gravity="center_vertical|top"
                                        android:inputType="numberDecimal"
                                        android:textAlignment="viewStart"
                                        android:hint="0.0"/>
</android.support.design.widget.TextInputLayout>

But this has a problem. The UI will look like below. The hints will overlap.

To avoid the above ugly UI, you have to control this from program.Set the hint text of the EditText only when there is focus on the field, else remove the hint text.

android:hint="0.0"

Remove the above line from the layout xml file and do as below:

m_editText_completed = (EditText) findViewById(R.id.entryScreenProduction_editText_percentCompleted);
m_editText_completed.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean b) {
                if(b){
                    m_editText_completed.setHint("0.0");
                }
                else {
                    m_editText_completed.setHint("");
                }
            }
        });

I hope this solves you issue. God Speed !!!

you can compress the if statement, by using a command as follows: `m_editText_completed.setHint(b ? "0.0" : "");` — Aliton Oliveira, May 22 '19 at 23:55

score 1 · Answer 5 · answered Jul 06 '15 at 17:47

1

first compile dependency compile 'com.rengwuxian.materialedittext:library:2.1.3'

add this in your xml

<com.rengwuxian.materialedittext.MaterialEditText    
android:id="@+id/etId"    
android:layout_width="match_parent"    
android:layout_height="70dip"    
android:hint="Hint goes here"    
android:textColor = "#000000"    
android:textSize="15sp"    
app:met_accentTypeface="fonts/yourcustomfonts.ttf"   
app:met_floatingLabel="normal"    
app:met_floatingLabelTextColor="#ff0000"    
app:met_floatingLabelTextSize="15sp"    
app:met_hideUnderline="true"    
app:met_textColorHint="#ff00ff"    
app:met_typeface="fonts/yourcustomfont.ttf"/>

add xmlns:app="http://schemas.android.com/apk/res-auto"

answered Jul 06 '15 at 17:47

Ram Mandal

1,899
1
20
35

yes, working on studio. is it not possible fix with appcompat library? – karsas Jul 07 '15 at 04:41
no you cannot coz this isn't available in the inbuilt framework, rather you have to customize yourself. I do got the same issue and I've done it with customizing the layouts and using animations, but after few days of research I found this library very helpful which reduced a tons of code. – Ram Mandal Jul 07 '15 at 05:49

score 0 · Answer 6 · answered Dec 28 '17 at 16:33

Simple use this programmatically it's working for me

    TextInputLayout til = new TextInputLayout(this);
    til.setHintTextAppearance(android.R.style.TextAppearance_Large);

You can customize the style as i mention below...

<style name="TextInputLayout" parent="@android:style/TextAppearance">
        <item name="android:textColor">@color/colorPrimaryDark</item>
        <item name="android:textColorHint">@color/colorPrimaryDark</item>
        <item name="android:textSize">23sp</item>
    </style>

TextInputLayout til = new TextInputLayout(this);
        til.setHint("hai);
        til.setHintTextAppearance(R.style.TextInputLayout);

@karsas Try this still if you want...if it's usefull donot forgot to upvote guys — Gowthaman M, Dec 28 '17 at 16:34

score 0 · Answer 7 · edited Jan 10 '22 at 13:10

In my case, I follow this line of code in kotlin

kotlin code

val edPasswordSignIn = findViewById<TextInputEditText>(R.id.edPasswordSignIn)
        edPasswordSignIn.setHint("Password")

        edPasswordSignIn.setOnFocusChangeListener { v, hasFocus ->
            if (hasFocus){
                edPasswordSignIn.setHint("Password")
            }
            else
                edPasswordSignIn.setHint("")
        }

XML code

<!--TextInput layout which acts as a wrapper to the edit text-->
<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColorHint="#f29358"
    app:hintTextAppearance="@style/TextAppearance.AppCompat.Large"
 app:passwordToggleEnabled="true"
 app:passwordToggleTint="@color/colorPrimary"
    app:boxStrokeWidth="0dp"
    app:boxStrokeWidthFocused="0dp"

    android:scrollbarSize="25dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
    android:gravity="fill_vertical"

app:layout_constraintTop_toTopOf="parent">

<!--Using the TextInputEditText,which is
    same as the edit text,but remember-->
<!--that we need to use TextInputEditText
    with TextInputLayout-->
    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/edPasswordSignIn"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@null"
        android:backgroundTint="@color/white"
        android:gravity="center|left"
        android:inputType="textPassword"
        android:paddingTop="-2dp"
        android:paddingBottom="-1dp"

        android:textSize="@dimen/_11sdp" />
</com.google.android.material.textfield.TextInputLayout>

before enter the text

After the enter the text

score 0 · Answer 8 · answered Jan 25 '22 at 12:27

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/textInputLayout"
                app:hintEnabled="false"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/textField"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:hint="Hint" />

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

app:hintEnabled="false"

This is enough to hide the default label.

TextInputLayout and EditText double hint issue

8 Answers8

Linked