Android EditText with floating label and placeholder

Question

How can I create an editText that looks like this?

Answer 1

You can do this using TextInputLayout and EditText .

Here is your XML:

 <android.support.design.widget.TextInputLayout android:id="@+id/text_input_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Label"> <EditText android:id="@+id/edit_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="text" /> </android.support.design.widget.TextInputLayout> 

1. Add the android:hint="Label" attribute to the TextInputLayout to always show its Label prompts.

2. Programmatically install Placeholder EditText only when EditText focuses.

Add the following lines to your activity:

  ......... ................. final EditText editText = (EditText) findViewById(R.id.edit_text); editText.setOnFocusChangeListener(new View.OnFocusChangeListener() { @Override public void onFocusChange(View view, boolean hasFocus) { if (hasFocus) { editText.setHint("Placeholder"); } else { editText.setHint(""); } } }); ......... .................. 

OUTPUT:

Hope this helps ~

Answer 2

 <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Label"> <android.support.design.widget.TextInputEditText android:hint="Placeholder" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textEmailAddress" /> </android.support.design.widget.TextInputLayout> 

Note that android:hint="Placeholder" from TextInputEditText displayed at the same time as android:hint="Label" from TextInputLayout when the view is not focused. You can do some extra checking in your Java code to show and hide this shortcut. Or just leave android:hint="Placeholder" from TextInputLayout .

To change the color, you need to set the theme using android:theme="@style/TextLabel for TextInputLayout and a color accent will be set there.

 <style name="TextLabel" parent="TextAppearance.AppCompat.Light"> <item name="colorAccent">@color/yourColor</item> </style> 

Answer 3

You can use the following code (in kotlin). It will show the placeholder after a delay of 200 ms (to avoid a match between the hint and the placeholder).

 class PlaceholderEditText : TextInputEditText { constructor(context: Context) : super(context) constructor(context: Context, attrs: AttributeSet) : super(context, attrs) constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr) private val placeholder = hint init { hint = "" onFocusChangeListener = OnFocusChangeListener { _, hasFocus -> if (hasFocus) { postDelayed({ hint = placeholder }, 200) } else { hint = "" } } } } 

and then in the layout of the xml class:

  <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="ALWAYS VISIBLE LABEL"> <com.myapp.widget.PlaceholderEditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="DISAPPEARING PLACEHOLDER" /> </android.support.design.widget.TextInputLayout> 

Answer 4

You can use the XML file below as shown below.

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:text="Label" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView2" android:textColor="@color/wallet_holo_blue_light" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPersonName" android:text="Name" android:ems="10" android:id="@+id/editText2" android:hint="Placeholder" /> </LinearLayout> 

Answer 5

If you use textinputlayout, then in focus edittext you did not get any placeholder.

Markup:

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

You must install the edittext focus change listener.

Java:

 usernameTxt.setOnFocusChangeListener(new View.OnFocusChangeListener() { @Override public void onFocusChange(View v, boolean hasFocus) { if (hasFocus) { usernameTxt.setHint("Label"); } else { usernameTxt.setHint("Placeholder"); } } }); 

Answer 6

GIFT: TextInputEditText nested in TextInputLayout !

TL DR!: Use this Kotlin extension feature

 fun EditText.setHintAndLabel( textInputLayout: TextInputLayout, label: String?, // hint in the TextInputLayout hint: String? // hint in the EditText ) { this.hint = "" textInputLayout.hint = label this.onFocusChangeListener = View.OnFocusChangeListener { _, hasFocus -> if (hasFocus) { this.hint = hint ?: "" } else { this.hint = "" } } } 

What is the problem and how to solve it?

The problem is that the EditText tooltip overlaps if there is a tooltip in the TextInputLayout . Which show in this case? Good question: we want the EditText tooltip to appear only when it is in the TextInputLayout / cursor is inside, and the TextInputLayout tooltip should always be displayed.

⮑ Thus, we set the tooltip for EditText when it has focus, and delete it as soon as it loses focus. 🐙