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> 

Answer 1

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:

Answer 2

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.