material design - Android EditText with different 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 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~