Android EditText view Floating Hint in Material Design

Question

Does API 21 provide a method to use the following feature:

http://www.google.com/design/spec/components/text-fields.html#text-fields-floating-labels

I'm trying to float the EditText hints.

Thanks!

I ran into this as well during my search, but was wondering if Android provided a native method. — xsorifc28, Oct 20 '14 at 12:17
This make us think that something is wrong with Android. There are several missing gaps on the API for Material Design. Another example is Float Action Button. — motobói, May 27 '15 at 14:16

score 109 · Answer 1 · edited Jul 01 '15 at 07:35

109

Floating hint EditText:

Add below dependency in gradle:

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

In layout:

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

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

edited Jul 01 '15 at 07:35

Flexo

87,323
22
191
272

answered Jul 01 '15 at 05:36

arpit

1,462
1
12
12

4

Beware of: [TextInputLayout not showing EditText hint before user focus on it](http://stackoverflow.com/q/30537413/1608670) bug exists in design support library `22.2.0` – Ivan Chau Jan 09 '16 at 06:10
1

What's the difference between using EditText and TextInputEditText in this XML ? – android developer Jun 09 '16 at 08:46
2

The newly renamed dependency seems to be `implementation 'com.google.android.material:material:1.0.0-rc01'`. – rmtheis Aug 17 '18 at 02:02

score 60 · Answer 2 · answered Jun 02 '15 at 08:54

60

Yes, as of May 29, 2015 this functionality is now provided in the Android Design Support Library

This library includes support for

Floating labels
Floating action button
Snackbar
Navigation drawer
and more

answered Jun 02 '15 at 08:54

Dave Jensen

4,574
1
40
45

3

Do you happen to know of a tutorial for floating labels with EditTexts like OP mentioned? – AdamMc331 Aug 28 '15 at 00:53
11

Yes. https://blog.stylingandroid.com/textinputlayout/ and http://code.tutsplus.com/tutorials/creating-a-login-screen-using-textinputlayout--cms-24168 and http://hmkcode.com/android-textinputlayout/ – Dave Jensen Aug 28 '15 at 01:26
1

Wow, thanks! I will look through these and let you know how it goes! – AdamMc331 Aug 28 '15 at 01:41
2

The third one was what I was looking for. I stumbled upon TextInputLayout, but couldn't find a good example (probably searching all the wrong terms). Thanks! – AdamMc331 Aug 28 '15 at 01:52

score 18 · Answer 3 · answered Jun 10 '15 at 13:22

The Android support library can be imported within gradle in the dependencies :

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

It should be included within GradlePlease! And as an example to use it:

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

    <AutoCompleteTextView
        android:id="@+id/autoCompleteTextViewTo"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="To"
        android:layout_marginTop="45dp"
        />
</android.support.design.widget.TextInputLayout>

Btw, the editor may not understand that AutoCompleteTextView is allowed within TextInputLayout.

score 12 · Answer 4 · answered Nov 08 '14 at 14:37

12

Android hasn't provided a native method. Nor the AppCompat.

Try this library: https://github.com/rengwuxian/MaterialEditText

This might be what you want.

answered Nov 08 '14 at 14:37

rengwuxian

650
1
6
11

1

I get Error:(1) "Attribute "color" has already been defined" on gradle sync, probably because of the appcompat-v7. I can't get rid of it. Anny suggestions? – mdzeko Feb 17 '15 at 21:23
MaterialEditText hasn't defined an attribute named "color", so it must be something wrong elsewhere. – rengwuxian Mar 17 '15 at 05:43

score 9 · Answer 5 · answered Sep 01 '15 at 06:58

Import the Support Libraries, In your project's build.gradle file, add the following lines in the project's dependencies:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:appcompat-v7:22.2.0'
}

Use following TextInputLayout in your UI Layout:

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

    <EditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:hint="Username"/>

</android.support.design.widget.TextInputLayout>

Than, call setHint on TextInputLayout just after setContentView call because, to animate the floating label, you just need to set a hint, using the setHint method.

final TextInputLayout usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper);
usernameWrapper.setHint("Username");

Using 23.1.1 at least, you don't need to use an explicit call to `setHint()`. It works with the hint set on the `EditText` in the layout xml. — Ionoclast Brigham, Feb 25 '16 at 07:10

score 8 · Accepted Answer · answered Jul 10 '20 at 10:12

You need to add the following to your module build.gradle file:

implementation 'com.google.android.material:material:1.0.0'

And use com.google.android.material.textfield.TextInputLayout in your XML:

       <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/text_input_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/my_hint">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
   </com.google.android.material.textfield.TextInputLayout>

TalkLittle · Answer 7 · 2014-10-22T20:03:56.233

3

@andruboy's suggestion of https://gist.github.com/chrisbanes/11247418 is probably your best bet.

https://github.com/thebnich/FloatingHintEditText kind of works with appcompat-v7 v21.0.0, but since v21.0.0 does not support accent colors with subclasses of EditText, the underline of the FloatingHintEditText will be the default solid black or white. Also the padding is not optimized for the Material style EditText, so you may need to adjust it.

edited Oct 22 '14 at 20:03

answered Oct 22 '14 at 19:41

TalkLittle

8,866
6
54
51

Thank you. I'm guessing google also has not provided an api for creating material-style edit text warning, like in http://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field Sorry for the amateur questions, I'm trying to adapt to material design as much as I can using google's api/libraries and trying to figure out everything that has been provided vs any outside libraries. Thanks again! – xsorifc28 Oct 23 '14 at 16:27

score 0 · Answer 8 · answered Nov 06 '14 at 18:26

0

No it doesn't. I would expect this in a future api release, but for now we are stuck with EditText. Another option is this library:
https://github.com/marvinlabs/android-floatinglabel-widgets

answered Nov 06 '14 at 18:26

Patrick Jackson

18,766
22
81
141

score 0 · Answer 9 · answered Dec 22 '17 at 09:17

For an easier way to use the InputTextLayout, I have created this library that cuts your XML code to less than the half, and also provides you with the ability to set an error message as well as a hint message and an easy way to do your validations. https://github.com/TeleClinic/SmartEditText

Simply add

compile 'com.github.TeleClinic:SmartEditText:0.1.0'

Then you can do something like this:

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/emailSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Email"
    app:setMandatoryErrorMsg="Mandatory field"
    app:setRegexErrorMsg="Wrong email format"
    app:setRegexType="EMAIL_VALIDATION" />

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/passwordSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Password"
    app:setMandatoryErrorMsg="Mandatory field"
    app:setPasswordField="true"
    app:setRegexErrorMsg="Weak password"
    app:setRegexType="MEDIUM_PASSWORD_VALIDATION" />

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/ageSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Age"
    app:setMandatory="false"
    app:setRegexErrorMsg="Is that really your age :D?"
    app:setRegexString=".*\\d.*" />

score 0 · Answer 10 · answered Aug 16 '20 at 07:12

Use the TextInputLayout provided by the Material Components Library:

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

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

    </com.google.android.material.textfield.TextInputLayout>

Android EditText view Floating Hint in Material Design

10 Answers10

Linked

Related