Library project with a custom view that implements the Float Label pattern

Overview

AndroidFloatLabel

This repository contains an Android library project for Android 4.0+ with a custom view that implements the Float Label pattern (http://dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction) and an example project using the Float Label library. The custom View, FloatLabel, basically consists of two pieces: the EditText and the label (a TextView).

Quick Overview

Getting Started

Download the source to use it as a library project or use it directly from Maven Central in your dependencies. For example:

dependencies {
	compile 'com.iangclifton.android:floatlabel:1.0.4'
}

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). You can dynamically set the text of the EditText with floatLabel.setText(). All the typical setText variations are supported. If you want to set the text without an animation (such as if you're programmatically preparing views in onCreate), use floatLabel.setTextWithoutAnimation() (again, all the usual variations are supported).

If you need a reference to the EditText, you can call floatLabel.getEditText().

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). 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>

Custom Animation

You can override the animations used to show and hide the label by implementing a FloatLabel.LabelAnimator and calling floatLabel.setLabelAnimator(new MyLabelAnimator());. Note that you should use the alpha property of the label to show and hide it rather than the View.setVisibility(int) method. Example:

private static class CustomLabelAnimator implements FloatLabel.LabelAnimator {
    /*package*/ static final float SCALE_X_SHOWN = 1f;
    /*package*/ static final float SCALE_X_HIDDEN = 2f;
    /*package*/ static final float SCALE_Y_SHOWN = 1f;
    /*package*/ static final float SCALE_Y_HIDDEN = 0f;

    @Override
    public void onDisplayLabel(View label) {
        final float shift = label.getWidth() / 2;
        label.setScaleX(SCALE_X_HIDDEN);
        label.setScaleY(SCALE_Y_HIDDEN);
        label.setX(shift);
        label.animate().alpha(1).scaleX(SCALE_X_SHOWN).scaleY(SCALE_Y_SHOWN).x(0f);
    }

    @Override
    public void onHideLabel(View label) {
        final float shift = label.getWidth() / 2;
        label.setScaleX(SCALE_X_SHOWN);
        label.setScaleY(SCALE_Y_SHOWN);
        label.setX(0f);
        label.animate().alpha(0).scaleX(SCALE_X_HIDDEN).scaleY(SCALE_Y_HIDDEN).x(shift);
    }
}

Related Projects

Comments
  • labels showing unexpectedly

    labels showing unexpectedly

    Hello thanks for the cool library. I am having an issue though. Sometimes the float label shows itself by default when the edit text is empty. There doesn't seem to be any rhyme or reason to it. Sometimes it shows and sometimes it doesn't.

    Here is snapshot of the xml file I'm using and a screenshot. As you can see sometimes the label shows and sometimes it doesn't. The only difference I see between the views in the xml file is the input type but setting them all to the same thing has no effect. Any idea whats going on?

     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="wrap_content">
    
        <TextView
            android:text="@string/title_payment_method"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    
        <com.iangclifton.android.floatlabel.FloatLabel
            android:id="@+id/name_on_card"
            android:hint="@string/name_on_card"
            android:inputType="textPersonName|textCapWords"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
        <com.iangclifton.android.floatlabel.FloatLabel
            android:id="@+id/card_number"
            android:hint="@string/card_number"
            android:inputType="number"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
        <com.iangclifton.android.floatlabel.FloatLabel
            android:id="@+id/security_code"
            android:hint="@string/security_code"
            android:inputType="text"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
        <com.iangclifton.android.floatlabel.FloatLabel
            android:id="@+id/exp_date"
            android:hint="@string/exp_date"
            android:inputType="text"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    

    device-2015-03-04-153337

    opened by nschwermann 14
  • FloatLabelEdittext

    FloatLabelEdittext

    Is there anyway how to use FloatLabelEdittext dynamically? (not in xml)

    I have problem with: floatLabel.setHint("test") - it does not show any hint.

    Thank you

    opened by beryone 9
  • Change color of FloatLabel

    Change color of FloatLabel

    how do you change the color of the FloatLabel? I tried doing this

    <com.iangclifton.android.floatlabel.FloatLabel
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/title"
                android:layout_marginLeft="26dip"
                android:layout_marginTop="5dip"
                android:layout_marginRight="26dip"
                android:minWidth="200dip"
                app:floatLabelColor="@color/main_app_color"/>
    

    but I get a build error saying

    Error:(42) No resource identifier found for attribute 'floatLabelColor' in package
    
    opened by tyczj 7
  • Views really should have unique ID's

    Views really should have unique ID's

    When rotating the device, focus is lost because each EditText has the same ID.

    In a view with 2 FloatLabel's and the second one focused, focus is granted to the first one on rotation.

    opened by GavinDBrown 5
  • Define nextFocus

    Define nextFocus

    I am trying to define android:nextFocusDown on my username FloatLabel so it jumps to the pwd FloatLabel when the user hits the Next key. Is this possible? I tried defining custom layouts and I still couldn't get it to function properly.

    opened by kyhule 5
  • Submit to maven central

    Submit to maven central

    Would be awesome i think =)

    For now I use the steps below to integrate (via local maven repository)

    • clone from git
    • run gradle build
    • locate FloatLabel.aar in build folder
    • install locally to maven using command below (1)
    • add (2) to your gradle dependencies

    (1) mvn install:install-file -Dfile=FloatLabel.aar -DgroupId=com.iangclifton.android -DartifactId=floatlabel -Dversion=0.1 -Dpackaging=aar

    (2) compile 'com.iangclifton.android:floatlabel:+@aar'

    enhancement 
    opened by markmooibroek 3
  • Provide custom ids for label and EditText

    Provide custom ids for label and EditText

    Situation

    Custom ids are extremely needed to use ButterKnife, to set sugar listeners, etc. No matter one uses custom layout or not, custom id will give access to view from out the AndroidFloatLabel as to ordinary view.

    Solution

    • Layout
    • Activity usage with ButterKnife sugar
    • or without custom layout
    opened by almozavr 2
  • Themes' clash

    Themes' clash

    Hi, the AndroidFloatLabel's theme clashes with my app's theme.

    Error:(10, 9) Execution failed for task ':app:processDebugManifest'. Manifest merger failed : Attribute application@theme value=(@style/MyAppTheme) from AndroidManifest.xml:10:9 is also present at com.iangclifton.android:floatlabel:1.0.1:15:9 value=(@style/AppTheme) Suggestion: add 'tools:replace="android:theme"' to element at AndroidManifest.xml:6:5 to override

    I resolved adding this in my gradle:

    android { useOldManifestMerger true }

    I think it is not an error, but it is my first time with this issue and I want to share my experience in order to help somebody with this beautiful library.

    opened by claudiopastorini 2
  • Added getter for label TextView

    Added getter for label TextView

    Much like one can get the EditText of the float label at times it can be helpful to get the actual TextView portion.

    In my case this was needed to set a custom typeface on both the EditText and Textview. Besides this change, it would also have been valid to simply add a setTypeface(Typeface) method to FloatLabel that applies the parameter to both the TextView and EditText, but just exposing the TextView is more general-purpose.

    opened by GavinDBrown 1
  • Methods for setting EditText text

    Methods for setting EditText text

    Need some pass-through methods for setting the EditText:

    setText(int resid) setText(char[] text, int start, int len) setText(int resid, TextView.BufferType type) setText(CharSequence text) setText(CharSequence text, TextView.BufferType type)

    Plus equivalent methods for setting the text without triggering an animation.

    enhancement 
    opened by IanGClifton 1
  • Resource conflict: ic_launcher / app icon in library

    Resource conflict: ic_launcher / app icon in library

    After adding your lib to my app dependencies I cannot build my project:

    Error:(13, 9) Execution failed for task ':app:processDevDebugManifest'.
    Manifest merger failed : Attribute application@icon value=(@mipmap/ic_launcher) from AndroidManifest.xml:13:9
        is also present at com.iangclifton.android:floatlabel:1.0.2:12:9 value=(@drawable/ic_launcher)
        Suggestion: add 'tools:replace="android:icon"' to <application> element at AndroidManifest.xml:10:5 to override
    

    I'm not sure it is relevant to have a launcher icon in a library. Can you remove it?

    opened by clemp6r 1
Owner
Ian G. Clifton
Ian G. Clifton
Android Floating Label

FloatingLabel FloatingLabel Allows you to create a blow kind of EditText. To explain the concept well I have taken below image from http://dribbble.co

Hardik Trivedi 290 Nov 30, 2022
一个可配置的迷你版轻量级 Label 辅助类,支持多种配置效果。

AvatarLabelView 一个可配置的迷你版轻量级 Label 辅助类,支持多种配置效果,具体不同配置展示效果如下图。 说明文档 如下是关于 Label View 的相关使用方式、属性说明、拓展自定义的解释说明。 使用样例 <cn.label.avatarlabelview.LabelImag

yanbo 572 Nov 19, 2022
A single EditText instead of a classical form. Library that implements flavienlaurent's singleinputform

material-singleinputform A single EditText instead of a classical form. This Library is a library implementation of flavienlaurent's "Single input for

Jan Heinrich Reimer 200 Nov 14, 2022
A single EditText instead of a classical form. Library that implements flavienlaurent's singleinputform

material-singleinputform A single EditText instead of a classical form. This Library is a library implementation of flavienlaurent's "Single input for

Jan Heinrich Reimer 200 Nov 14, 2022
Custom view to expand long text with view more,less action , you can customize min lines , action color

ExpandableTextView Custom expadable text view Examples : <mostafa.projects.expandabletextview.ExpandableTextView android:layout_wi

Mostafa Gad 8 Jan 25, 2022
Android Custom View for prevent the view behind on-screen keyboard when edit text is focused

Group Focusable Prevent the view behind on-screen keyboard when edit text is focused in Android UI Download Gradle implementation 'com.akexorcist:grou

Akexorcist 8 Jun 22, 2022
Android library contain custom realisation of EditText component for masking and formatting input text

Masked-Edittext Masked-Edittext android library EditText widget wrapper add masking and formatting input text functionality. Install Maven <dependency

Evgeny Safronov 600 Nov 29, 2022
A Custom TextView with trim text

ReadMoreTextView A Custom TextView with trim text Download To add the ReadMoreTextView library to your Android Studio project, simply add the followin

Borja B. 1.7k Dec 29, 2022
A custom EditText with a switchable icon which shows or hides the password

Deprecated This library is deprecated now as there is an official way to use the password toggle with the TextInputLayout (inside the support library

Maksim 430 Nov 20, 2022
An Android App example of how to create a custom EditText using DoubleLinkedList Data Structure

DoubleLinkedListEditText Library This is a library to create an EditText based on the Doubly Linked List data structure so that the user can enter cod

Layon Martins 1 Nov 9, 2021
LocalizedEditText - Custom edit text that allow only one language

LocalizedEditText Custom edit text that allow only one language Supported languages : Arabic , English Default language : English Examples

Mostafa Gad 1 Nov 28, 2021
Android Bubble View

BubbleTextView Custom arrow position Custom fillet radius Custom background color Can be placed anywhere Two default style Two default theme Snapshot

null 669 Nov 11, 2022
A Material Android password view that toggles password visibility via an eye icon.

8/17/2016: As of about an hour ago, this library is deprecated! Support for password visibility is now included in the Design Support Library in TextI

Lisa Wray 715 Dec 29, 2022
Provides a set of views which allows to adjust the spacing between the characters of that view, AKA, Kerning effect.

KerningViews KerningViews provides a set of views (currently only TextView and Button) which lets you adjust the spacing between the characters in the

Aritra Roy 148 Aug 7, 2022
RTL marquee text view android right to left moving text - persian - farsi - arabic - urdo

RTL marquee text view android right to left moving text - persian - farsi - arabic - urdo

mehran elyasi 4 Feb 14, 2022
Light-weighted, convenient implementation of expandable text view that supports expanding & collapsing animations for Android projects

ExpandableTextView Light-weighted, convenient implementation of expandable text view that supports expanding & collapsing animations for Android proje

Giang H. Pham 22 Jan 6, 2023
Irineu A. Silva 2 Feb 17, 2022
A library to show emoji in TextView, EditText (like WhatsApp) for Android

Discontinued This projected is discontinued. Please consider using other alternative, i.e EmojiCompat. Contact me if you want to continue working on a

Hieu Rocker 3.6k Jan 5, 2023
library to implement and render emojis For Android

Release Notes SuperNova-Emoji SuperNova-Emoji is a library to implement and render emojis. Minimum SDK Level: 9 (2.3) Contact Java Usage To use defaul

Hani Al-momani 360 Jan 3, 2023