Android EditText with different floating label and placeholder

Question

How can i create an editText that looks like this?

score 26 · Answer 1 · answered May 24 '17 at 18:19

26

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 attribute android:hint="Label" to TextInputLayout to show its hints Label always.

2. Programmatically set EditText hints Placeholder only when EditText get focused.

Add below lines in 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 will help~

answered May 24 '17 at 18:19

Ferdous Ahamed

21,438
5
52
61

2

Is there a way to keep the label and placeholder like the screenshot in unfocused state? – Mohammad Shabaz Moosa May 29 '17 at 09:56
1

Yes its possible. Use `android:focusableInTouchMode="true"` to parent/container layout. – Ferdous Ahamed May 29 '17 at 10:10
2

Floating label and hint do work, but I need to tap twice on the field in order to show up the keyboard. Any suggestions? – andrea simeoni Jun 16 '21 at 08:18
@andreasimeoni - use `focusableInTouchMode="false"` to prevent the double-tap issue. When you set `focusableInTouchMode` to`true` you're telling the View that it should _only_ focus the view on first tap, without performing the action (showing the keyboard in this case), resulting in the user needing to tap the View twice to show the keyboard. A different example of this would be setting `focusableInTouchMode` to `true` on a `Button` doing so would require 2 taps for `onClickEvent` to be called - since the first tap _only_ focuses views when `focusableInTouchMode="true"`. – Sakiboy Dec 02 '22 at 22:01
@andreasimeoni - I usually solve these "automatic focus" issues that occur by focusing the layouts parent/root view when created or whenever I need to remove focus from a view in a layout. You'll need to give the parent/root Layout an `android:id` and set `focusable="true"` on it, NOT `focusableInTouchMode` on the parent/root layout. – Sakiboy Dec 02 '22 at 22:11

score 13 · Answer 2 · answered Jul 27 '20 at 21:54

13

With the Material Components Library you can use:

app:placeholderText: to add a placeholder text in the EditText
android:hint: to add a floating label

They can work together:

<com.google.android.material.textfield.TextInputLayout
        android:hint="Label"
        app:placeholderText="Placeholder Text"

Note: it requires at least the version 1.2.0-alpha03.

answered Jul 27 '20 at 21:54

Gabriele Mariotti

320,139
94
887
841

2

note that this will only work when the edit text is in focus. when not in focus, the hint ("label") will show instead of the placeholder – or_dvir Jun 08 '21 at 08:21

Cătălin Florescu · Answer 3 · 2017-05-24T17:04:03.673

<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>

Notice that android:hint="Placeholder" from TextInputEditText is visible at the same time with android:hint="Label" from TextInputLayout when view is not focused. You could do some extra checking in your java code to show and hide that label. Or just leave android:hint="Placeholder" from TextInputLayout.

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

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

score 3 · Answer 4 · answered Sep 20 '21 at 21:37

As i know, best possible way how to solve this task with 2 different texts (placeholder and hint) together is to use the code below:

 <com.google.android.material.textfield.TextInputLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:hintEnabled="true" // enable hint/placeholder on EditText
            android:hint="@string/title_of_input" // title shown above EditText
            app:expandedHintEnabled="false" // disable move placeholder to hint place
            app:placeholderText="@string/placeholder_for_edittetx" // placeholder shown in EditText when no text is filled by user
>

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>
        </com.google.android.material.textfield.TextInputLayout>

score 2 · Answer 5 · answered Nov 13 '17 at 14:03

You can use following code (in kotlin). It will show placeholder after 200 ms delay (to avoid overlapping hint and 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 layout 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>

Langusten Gustel · Answer 6 · 2019-01-17T12:32:15.287

GIVEN: A TextInputEditText nested in TextInputLayout!

TL;DR!: Use this Kotlin Extension Function

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's the problem and how does it solve it?

The Problem is that the hint of the EditText gets overlapped if there is a hint in the TextInputLayout. Which one to show in this case? Good question: We only want the EditText's hint to be displayed when it's focused/the cursor is inside but the TextInputLayout hint to be displayed always.

⮑ So we only set the hint for the EditText when it has the focus and remove it once it loses focus

score 0 · Answer 7 · answered May 24 '17 at 16:46

You can use below layout xml file as 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>

score 0 · Answer 8 · answered May 24 '17 at 17:44

If you use textinputlayout then on focus of edittext, you didn't get any placeholder.

Layout:

<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 have to set a focus change listener of the edittext.

Java:

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

Android EditText with different floating label and placeholder

8 Answers8

Linked

Related