Implementing floating inline labels (with EditText?)

Question

Google's Material Design text field guidelines present floating labels for text input:

With floating inline labels, when the user engages with the text input field, the labels move to float above the field.

Simple question: what's the best way to implement floating labels (on Android 5.0+)? Can you easily do it with standard components like EditText, and if so, how? Or is it simpler to go with a 3rd party lib?

Answer 1

You can now use the official Android DESIGN Support Library (available from support library 22.2.0)

http://android-developers.blogspot.dk/2015/05/android-design-support-library.html

Add this dependency to start using the library:

compile 'com.android.support:design:22.2.0'

Wrap the EditText in a TextInputLayout.

<android.support.design.widget.TextInputLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            android:layout_marginLeft="32dp"
            app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout">

you can customize TextInputLayout style

<style name="TextAppearence.App.TextInputLayout" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/accentColor</item>
</style>

Answer 2

You can use this Library AndroidFloatLabel:

For most use, you can simply use the custom view in your XML layout, specifying a label to use as both the EditText hint and the label TextView with the android:hint property. Example:

<com.iangclifton.android.floatlabel.FloatLabel
    android:id="@+id/float_label_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/example_label" />

You can also dynamically set the label with floatLabel.setLabel("Custom Label") or floatLabel.setLabel(R.string.custom_label).

Custom Layout

If you want to specify a custom layout to use, you can do something like this:

<com.iangclifton.android.floatlabel.FloatLabel
    android:id="@+id/float_label_custom_layout_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/example_label"
    android:layout="@layout/custom_float_label" />

Your custom layout should include a label TextView (id/float_label) and an EditText (id/edit_text). Right now, the custom layouts are extremely limited because the FloatLabel simply lays out the label and the EditText and ignores all other views. This is very efficient but also prevents you from creating a much more complex layout. Here's an example:

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
    <TextView
        android:id="@id/float_label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:lines="1"
        android:textIsSelectable="true"
        android:textAppearance="?android:attr/textAppearanceSmall" />
    <EditText
        android:id="@id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text|textAutoCorrect|textCapSentences|textAutoComplete" />
</merge>