Different label and hint for TextInputLayout

Question

I want to make a EditTextLayout, but I want a different text for label and hint.

For example : The label's text is "Phone Number", and the hint text is "+6281342134".

Is it possible?

My code is:

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

        <android.support.design.widget.TextInputEditText
            android:id="@+id/phone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="+6281342134"
            android:inputType="phone" />
    </android.support.design.widget.TextInputLayout>

I tried to add on focus listener and change the hint when the edittext got focus. It works, but i don't think it is the best solution. — mutokenji, Jun 10 '16 at 05:03

score 52 · Answer 1 · answered Sep 22 '16 at 20:08

I took a similar approach to Rehan

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

editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            inputLayout.setHint("We did it!");
        } else {
            inputLayout.setHint("Testing 123");
        }
    }
});

The animation was good enough for me without disabling the animation:

you can compress the if statement, by using a command as follows: `inputLayout.setHint(hasFocus ? "We did it!" : "Testing 123");` — Aliton Oliveira, May 22 '19 at 23:59

score 29 · Answer 2 · answered Nov 20 '17 at 19:31

29

Here's how I'm doing it without code (just XML), while allowing both a label and a placeholder at the same time, as in the Material Design guidelines.

Layout XML:

<android.support.design.widget.TextInputLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:hint="My Label Text">
  <android.support.design.widget.TextInputEditText
    android:id="@android:id/input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColorHint="@drawable/hint_selector"
    android:hint="Placeholder Text"/>
</android.support.design.widget.TextInputLayout>

Color Selector XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_focused="true" android:color="?android:textColorHint" />
  <item android:color="@android:color/transparent" />
</selector>

The key here is to just make it transparent by default, and only show the placeholder text when it has focus. No need to change color either, since this will respect any custom theme in place, as well as light and dark themes.

answered Nov 20 '17 at 19:31

ShortFuse

5,970
3
36
36

?android:textColorHint requires min API level 21 – Johnny Five Dec 14 '18 at 12:40
1

@JohnnyFive You can easily replace it with any color you want, or use the appcompat support library. – ShortFuse Dec 19 '18 at 05:23
It's a good solution but when the user changes the focus to another EditText then the label text disappears. It's a little "ugly" when you are filling a form with several EditText. Is there a selector state to resolve this "problem"? Thank you. – Alex Jul 29 '19 at 13:00
@Alex, make sure you're using `android:hint` in both TextInputLayout (the label text) and in TextInputEditText (the placeholder text). Perhaps you didn't add one to TextInputLayout. – ShortFuse Jul 30 '19 at 15:49
This answer works better than the others because the other solution of using the `OnFocusChangeListener` requires a double tap of the EditText to show the keyboard. – Dhananjay Suresh Jun 22 '20 at 14:31

score 19 · Accepted Answer · answered Oct 22 '20 at 13:09

You can use these attribute:

android:hint: for the label

placeholderText: for the placeholder text inside the EditText

      <com.google.android.material.textfield.TextInputLayout
          android:id="@+id/phone_layout"
          android:layout_width="match_parent"
          android:hint="Phone Number"
          app:placeholderText="+6281342134"
          android:layout_height="wrap_content">

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

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

If the placeholder should be displayed also when the text field is empty just add the expandedHintEnabled="false":

        <com.google.android.material.textfield.TextInputLayout
            app:expandedHintEnabled="false"

Note: the expandedHintEnabled requires at least the version 1.3.0-alpha03.

This implements the requirements of the question using the latest enhancements of 1.3.0. The other solutions were workarounds using the older 1.2.0 library, hence this should now be flagged as the correct answer. — Eurig Jones, Nov 20 '20 at 11:48

score 4 · Answer 4 · answered Jun 10 '16 at 05:39

You can simply do it by this way:

<android.support.design.widget.TextInputLayout
    android:id="@+id/phone_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Phone Number">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="+6281342134"
        android:inputType="phone"/>
</android.support.design.widget.TextInputLayout>

But this will result overlapping of both hints i.e. Phone Number and +6281342134. So you need to implement OnFocusChangeListener for this. (Not so good solution but it'll work for you).

In your layout, add hint to TextInputLayout only. I have set hintAnimationEnabled to false because I think the animation might won't look smooth with different hints.

<android.support.design.widget.TextInputLayout
    android:id="@+id/phone_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Phone Number"
    app:hintAnimationEnabled="false">

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

In your java file, create OnFocusChangeListener:

private View.OnFocusChangeListener onPhoneNumberFocusChangeListener = new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            ((EditText)v).setHint("+6281342134");
        } else {
            ((EditText)v).setHint("");
        }
    }
};

and set it to your EditText

phone.setOnFocusChangeListener(onPhoneNumberFocusChangeListener);

I think we need to stop putting the word 'simply' in Android-related answers. — milosmns, Aug 14 '18 at 20:47
Is it possible without **TextInputLayout**? Actually i already set hint programmatically and it's working good. but now i want set text same way and issue was occur hint goes hide after setting the text — Arbaz.in, Mar 07 '19 at 13:29

score 1 · Answer 5 · answered Jun 13 '22 at 07:33

1

I tried setting the floating label using android:hint="@string/EMAIL". So for the hint inside the box, I used app:placeholderText="e.g. someone@mailbox.com".

To have a floating action button enabled all the time you have to use requestFocus().

answered Jun 13 '22 at 07:33

Maede Jalali

306
2
6

score -4 · Answer 6 · answered Jun 10 '16 at 05:00

-4

Go into the xml text editting mode and add this to the edittext:

android:label="Phone Number"
android:hint="+6281342134"

answered Jun 10 '16 at 05:00

Robert

119
8

Different label and hint for TextInputLayout

6 Answers6