Floating hint from edit text - inspired by Matt D. Smith's design: http://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction?list=users

Overview

Float Labeled EditText

Simple implementation of a Float Labeled EditText: An Android ViewGroup which uses a child EditText and puts the hint on top of the EditText when it is populated with text.

iOS implementation by @jverdi: JVFloatLabeledTextField

Credits for the concept to Matt D. Smith (@mds).

Android Version

http://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction?list=users

Notice

The usage has significantly changed in version 0.0.5 inspired by chrisbanes implementation which makes styling easier. If you want to use the old style, use version 0.0.4.

Usage

Add the library project or grab to build.gradle:

compile 'com.wrapp.floatlabelededittext:library:0.0.6'

or plain maven:

<dependency>
  <groupId>com.wrapp.floatlabelededittext</groupId>
  <artifactId>library</artifactId>
  <version>0.0.6</version>
  <type>aar</type>
</dependency>

and then insert the view in XML:

    <com.wrapp.floatlabelededittext.FloatLabeledEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="This is the hint" />
    </com.wrapp.floatlabelededittext.FloatLabeledEditText>

    <!-- add some padding -->
    <com.wrapp.floatlabelededittext.FloatLabeledEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        float:fletPadding="10dp">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Username" />
    </com.wrapp.floatlabelededittext.FloatLabeledEditText>

    <!-- password input -->
    <com.wrapp.floatlabelededittext.FloatLabeledEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        float:fletPaddingBottom="10dp">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="textPassword" />
    </com.wrapp.floatlabelededittext.FloatLabeledEditText>

    <!-- change color of hint text-->
    <com.wrapp.floatlabelededittext.FloatLabeledEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        float:fletPaddingBottom="10dp"
        float:fletTextAppearance="@style/floatlabelededittext">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Styled Hint"
            android:inputType="textPassword" />
    </com.wrapp.floatlabelededittext.FloatLabeledEditText>

Developed By

Styled By

Additional Credit

License

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Comments
  • float:fletImeOptions=

    float:fletImeOptions="actionNext" doesn't work

    I'm not really sure if it's a problem or not, but I'm not be able to use actionNext properly in my xml. Here is the code I use, I tried different things but I wasn't successful.

        <!-- Email TextField -->
        <com.wrapp.floatlabelededittext.FloatLabeledEditText
            android:id="@+id/loginEmail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="@dimen/login_box_top_margin"
            android:layout_marginLeft="@dimen/login_box_left_margin"
            android:layout_marginRight="@dimen/login_box_right_margin"
            float:fletHintTextColor="#333333"
            float:fletTextColor="#000000"
            float:fletFloatingHint="username"
            float:fletImeOptions="actionNext"
            float:fletSingleLine="true"/>
    
        <!-- Password TextField -->
        <com.wrapp.floatlabelededittext.FloatLabeledEditText
            android:id="@+id/loginPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/login_box_left_margin"
            android:layout_marginRight="@dimen/login_box_right_margin"
            float:fletHintTextColor="#333333"
            float:fletTextColor="#000000"
            float:fletFloatingHint="Password"
            float:fletInputType="textPassword"/>
    
        <!-- Login Button -->
        <Button
            android:id="@+id/btnLogin"
            android:layout_width="230dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:layout_marginLeft="@dimen/login_box_left_margin"
            android:layout_marginRight="@dimen/login_box_right_margin"
            android:layout_marginBottom="@dimen/login_box_bottom_margin"
            android:text="@string/loginBtnLogin"
            android:textColor="#FFFFFF"/>
    

    I will appreciate your support. Thanks!

    opened by nelo686 6
  • Wrong working

    Wrong working

    When I open activity in first time, it looks right 1

    When I select first editText, the hint from second editText have dissapeared 2

    When I change focus to second field, its hint haven't appeared 3

    That issue looks like this (https://github.com/wrapp/floatlabelededittext/issues/22), which you have closed

    opened by dmitrikudrenko 5
  • support set lines, minlines, maxlines

    support set lines, minlines, maxlines

    tomorrow, when i add library to application, i find can't set maxLines in FloatLabeledEditText. although i can modify layout of FloatLabeledEditText, but if each edittext has different needs, it so inconvenient! so, i add attr(fletEditTextLine,fletEditTextMinLine,fletEditTextMaxLine) in FloatLabeledEditText.

    opened by kk-java 3
  • InflateException

    InflateException

    I've been getting this exception with the new support library, using AS 3.0 and API 26, https://hastebin.com/utujofiyip.sql

    it was working just fine before the update, any idea?

    opened by Odaym 2
  • EditText gets cut off when padding bottom is added

    EditText gets cut off when padding bottom is added

    Here is my scenario

    1. My layout.xml
    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:padding="@dimen/padding_xxlarge">
    
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <com.wrapp.floatlabelededittext.FloatLabeledEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/padding_normal"
                app:fletTextAppearance="@style/FloatLabelStyle"
                app:fletPaddingBottom="@dimen/padding_normal">
    
                <AutoCompleteTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/txt_email"
                    android:hint="@string/email_user_name"
                    android:inputType="textEmailAddress"
                    android:imeOptions="actionNext" />
    
            </com.wrapp.floatlabelededittext.FloatLabeledEditText>
    
    
            <com.wrapp.floatlabelededittext.FloatLabeledEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/padding_normal"
                app:fletTextAppearance="@style/FloatLabelStyle"
                app:fletPaddingBottom="@dimen/padding_normal">
    
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/txt_password"
                    android:hint="@string/password"
                    android:inputType="textPassword"
                    android:imeOptions="actionDone"
                    android:maxLines="1"
                    android:singleLine="true" />
    
            </com.wrapp.floatlabelededittext.FloatLabeledEditText>
    
    
        </LinearLayout>
    </ScrollView>
    
    1. When soft keyboard is up, the result is as follows screen shot 2014-12-16 at 6 06 26 pm

    But when I remove fletPaddingBottom of password section, everything works fine. So, can't we use fletPaddingBottom in my scenario.

    My device Nexus 4 running Android L. Thanks

    opened by leapfrog-santosh 2
  • New functionalities aren't merged with master

    New functionalities aren't merged with master

    I can see in a commit that change hint color is implemented yet but, in master branch these changes are not implemented. The commit is:

    https://github.com/ademar111190/floatlabelededittext/commit/4addc6ee867796d428b7aa90b759792b723c8100

    Please merge it.

    Thanks.

    opened by franshua91 2
  • AAPT error 139

    AAPT error 139

    I migrated a project from Eclipse to Android Studio. In my project I'm using Android Maps utils: compile 'com.google.maps.android:android-maps-utils:0.3+') But when add FLET generate an AAPT error 139. I tested creating a simple project only adding FLET and Android Maps Utils and is crashing instantly. Unfortunately AAPT is not delivering specific details about the error.

    opened by ClarkXP 2
  • Added listeners to be able to catch OnClick and OnFocusChange events

    Added listeners to be able to catch OnClick and OnFocusChange events

    Hi there,

    This is the first time that I do this, so I'm not pretty sure what I should write here... The thing is that I took your code to use it in a form, but also I needed that EditText was be able to react to onClick events and to onFocusChange events, so I added them through interfaces to not break encapsulation.

    I hope you'll like it. Cheers.

    opened by nelo686 2
  • Am now mirroring EditText API. Added more style attributes.

    Am now mirroring EditText API. Added more style attributes.

    This commit has a few improvements.

    • Am now mirroring the EditText api for the most part. This helps fix issue #1 .
    • Added more style attributes. This is part of the EditText/TextView api that allows the user to define, in XML, the various attributes like imeOptions, inputType, etc.
    • I also renamed the style attribute names to prevent any name conflicts.
    • Added text and hint text color. Defaults to black
    • Added state saving. Not sure if this is needed, exactly.
    • Am now using dimens file for all of the values. This will allow the user to override.
    opened by AaronRietschlin 2
  • nineoldandroid dependency as

    nineoldandroid dependency as "library-2.4.0.jar"

    Hello,

    Today I ran into an issue with multiple dex files when I added another library (MaterialDesignLibrary) to my project which was using floatlabelededittext.

    Through research I found out that the conflict is from using nineoldandroids as a dependency. I tested and saw that floatlabelededittext leads my project to add "library-2.4.0.jar" in my external libraries when gradle syncs instead of "nineoldandroids-2.4.0.jar" from the other library I'm using.

    I'm suspecting that this is the cause of the conflict where dex merger cannot merge them but it still found duplicates thus generating the multiple dex error.

    I use "compile 'com.wrapp.floatlabelededittext:library:0.0.5' " in the gradle of my project, but I see from the source code on this github page, this project uses "compile 'com.nineoldandroids:library:2.4.0'".

    Does anyone have any idea why there are differences in jar file names?

    EDIT:

    Now that I test more on it, I do not think it is simply a problem of a jar file name. And I'm not that expert on gradle / android build stuff... Still no idea.

    opened by jinkim608 1
  • Small bug fixes

    Small bug fixes

    Hello,

    This is the first time I have done this so please excuse any mistakes I may have made. I used your library for a school project and I noticed and fixed a couple of bugs:

    1. If we have multiple controls on the same activity, with different texts, whenever the activity is recreated(on rotation for example), all the controls take the same text.

    This was fixed by giving each editText an unique id. The method that generates the ids is in a different class but I suppose it can be moved as a private static method if you prefer so.

    1. When we have multiple controls on the same activity, and set texts to each one programmatically at the same time, all hint text views have an alpha of 1 - only the currently selected one should have alpha = 1, the rest should have alpha = 0.33.

    I edited the files using the browser so I hope that there aren't any mistakes in the commits.

    opened by andreidd 1
  • Can't Build

    Can't Build

    Error:Could not get unknown property 'POM_ARTIFACT_ID' for object of type org.gradle.api.publication.maven.internal.deployer.DefaultGroovyMavenDeployer.

    Following your advise,i add the library you provide and add "compile 'com.wrapp.floatlabelededittext:library:0.0.6'" to my build.gradle but it's no use, em,I don't know how to plain maven.... I don't find the pom.xml Could you tell me how to resolve the issue plz? Sincerely appreciate.

    wow,i have done . i have add those in gradle.properties but i don't know whether it is correct or not,but it goes successfuly!

    POM_NAME=Local Repository POM_PACKAGING=aar POM_ARTIFACT_ID=library

    opened by Aflexiblebox 0
  • wrong in text color

    wrong in text color

    i create the fletTextAppearance in style,and set textcolor,when the edittext get focus,flettext's color is right,but the textcolor is not work when lose focus.why? how to solve ?

    opened by i2863CookieZJ 5
  • Hint Gravity cant change to Right.

    Hint Gravity cant change to Right.

    -- Orignal in Class addView(mHintTextView, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

    -- Replace With addView(mHintTextView, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);

    After that user can change it from app:fletTextAppearance attribute.

    opened by a2zZuhaib 0
  • Is there any way to change hint programmatically?

    Is there any way to change hint programmatically?

    I've integrated floatlabelededittext, which works fine. But I need to change text(placeholder) and hint on a button click. As I do change the placeholder and hint on button click, hint is not changing. It shows the hint which I placed in XML layout. Is it possible to change hint from button action programmatically? If yes, can anyone please show me how?

    opened by mjhassan 2
Owner
Wrapp Archive
Wrapp Archive
A editable text with a constant text/placeholder for Android.

ParkedTextView A EditText with a constant text in the end. How to use <com.goka.parkedtextview.ParkedTextView xmlns:app="http://schemas.android.co

goka 270 Nov 11, 2022
A lightweight Kotlin library for a form state management and field validation.

Chassis A lightweight Kotlin library for a form state management and field validation. Setup Library and it's snapshots are available on Maven Central

Bogusz Pawłowski 30 Dec 12, 2022
A TextView that automatically resizes text to fit perfectly within its bounds.

AutoFitTextView A TextView that automatically resizes text to fit perfectly within its bounds. Usage dependencies { compile 'me.grantland:autofitt

Grantland Chew 4.2k Jan 8, 2023
:page_facing_up: Android Text Full Jusiftication / Wrapping / Justify / Hyphenate - V2.0

LIBRARY IS NO LONGER MAINTAINED If you want to adopt + maintain this library, please drop me a message - [email protected] Android Full Justific

Mathew Kurian 1.9k Dec 29, 2022
A periodic text updating library

RotatingText Rotating text is an Android library that can be used to make text switching painless and beautiful, with the use of interpolators, typefa

Mobile Development Group 1.6k Dec 30, 2022
EditText in Material Design

MaterialEditText NOTE: 2.0 is NOT BACKWARDS COMPATIBLE! See more on wiki or 中文看这里 AppCompat v21 makes it easy to use Material Design EditText in our a

Kai Zhu 6.1k Dec 30, 2022
The implementation of https://dribbble.com/shots/2067564-Replace

FlyRefresh The Android implementation of Replace, designed by Zee Youn. I implement this as a FlyRefresh layout. The content of the layout can be any

吴晶 2.9k Nov 29, 2022
Android form edit text is an extension of EditText that brings data validation facilities to the edittext.

Android Form EditText Android form edit text is an extension of EditText that brings data validation facilities to the edittext. Example App I built a

Andrea 1.5k Dec 14, 2022
Floating Action Menu for Android. Inspired by the Google Plus floating menu

android-floating-action-menu Floating Action Menu for Android. Inspired by the Google Plus floating menu. Demo Setup The simplest way to use this libr

Alessandro Crugnola 242 Nov 10, 2022
A different beautiful Floating Edit Text

MaterialTextField A different beautiful Floating Edit Text Usage Surround your EditText by a MaterialTextField <com.github.florent37.materialtextfield

Florent CHAMPIGNY 1.5k Nov 11, 2022
Matt Kuhn 2021, Implemented in Kotlin

Advent of Code Matt Kuhn 2021, Implemented in Kotlin

null 3 Dec 30, 2021
An Android library to build form and form validations easily.

FormBuilder An Android library to build form and form validations easily. Example COMING SOON Requirements Android 4.3+ Installation Add edit your bui

Dario Pellegrini 48 Jun 30, 2022
Android Material Json Form Wizard is a library for creating beautiful form based wizards within your app just by defining json in a particular format.

Android Json Wizard Android Json Wizard is a library for creating beautiful form based wizards within your app just by defining json in a particular f

Vijay Rawat 355 Nov 11, 2022
Simple-Claim-Form - Android App for creating a simple dynamic form with MVVM architecture

Simple-Claim-Form Android App for creating a simple dynamic form with MVVM archi

Shubham Gangpuri 1 Aug 14, 2022
An MVP Dribbble client for Android Mobile, Tablet, Wear and TV.

Bourbon ![Sidebar] (https://img.shields.io/badge/Sidebar-06%2F05%2F2016-orange.svg) Bourbon is a simple Dribbble client built for Android Mobile, Wear

Joe Birch 1.1k Dec 12, 2022
Menyimpan source code tugas User Interaction and Control, mata kuliah Pemrograman Mobile Teori, semester lima tahun 2021.

android-uic About This Project Android-uic adalah sebuah aplikasi sederhana yang dibuat untuk menyelesaikan tugas dua mata kuliah pemrograman mobile.

Galang Aidil Akbar 1 Nov 8, 2021
Menyimpan source code tugas User Interaction and Control, mata kuliah Pemrograman Mobile Teori, semester lima tahun 2021.

android-uic About This Project Android-uic adalah sebuah aplikasi sederhana yang dibuat untuk menyelesaikan tugas dua mata kuliah pemrograman mobile.

Galang Aidil Akbar 1 Nov 8, 2021
LNSocial is a social media app dedicated to short-form videos created for and consumed by users.

LNSocial is a social media app dedicated to short-form videos created for and consumed by users. The length of videos is between 15-30 second

null 10 Jan 5, 2023
A library that gives full control over text related technologies such as bidirectional algorithm, open type shaping, text typesetting and text rendering

Tehreer-Android Tehreer is a library which gives full control over following text related technologies. Bidirectional Algorithm OpenType Shaping Engin

Tehreer 61 Dec 15, 2022