Android EditText with different floating label and placeholder

user_1266391 0
Viewed 26515

How can i create an editText that looks like this?

Edit Text with placeholder and label

material-design android
8 Answers

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"

enter image description here

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

user_20165620

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

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

user_14310440

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