├── .gitignore ├── README.md ├── build.gradle ├── example ├── .gitignore ├── build.gradle ├── proguard-rules.txt └── src │ └── main │ ├── AndroidManifest.xml │ ├── java │ └── com │ │ └── wrapp │ │ └── example │ │ └── floatlabelededittext │ │ └── MainActivity.java │ └── res │ ├── drawable-hdpi │ └── ic_launcher.png │ ├── drawable-mdpi │ └── ic_launcher.png │ ├── drawable-xhdpi │ └── ic_launcher.png │ ├── drawable-xxhdpi │ └── ic_launcher.png │ ├── layout │ └── activity_main.xml │ ├── menu │ └── main.xml │ ├── values-w820dp │ └── dimens.xml │ └── values │ ├── dimens.xml │ ├── strings.xml │ └── styles.xml ├── gradle.properties ├── library ├── AndroidManifest.xml ├── build.gradle ├── res │ └── values │ │ └── attrs.xml └── src │ └── com │ └── wrapp │ └── floatlabelededittext │ ├── FloatLabeledEditText.java │ └── Utils.java └── settings.gradle /.gitignore: -------------------------------------------------------------------------------- 1 | # Eclipse 2 | .project 3 | .classpath 4 | .settings 5 | .checkstyle 6 | 7 | # IntelliJ IDEA 8 | .idea 9 | *.iml 10 | *.ipr 11 | *.iws 12 | classes 13 | gen-external-apklibs 14 | 15 | # Gradle 16 | gradle/ 17 | .gradle 18 | build 19 | gradlew 20 | gradlew.bat 21 | # Gradle 22 | gradle.properties 23 | 24 | # Maven 25 | target 26 | release.properties 27 | pom.xml.* 28 | 29 | # Ant 30 | bin 31 | gen 32 | build.xml 33 | ant.properties 34 | local.properties 35 | proguard.cfg 36 | proguard-project.txt 37 | 38 | # Other 39 | .DS_Store 40 | tmp 41 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Float Labeled EditText 2 | ============== 3 | 4 | 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. 5 | 6 | iOS implementation by [@jverdi](http://www.twitter.com/jverdi): [JVFloatLabeledTextField](https://github.com/jverdi/JVFloatLabeledTextField) 7 | 8 | Credits for the concept to Matt D. Smith ([@mds](http://www.twitter.com/mds)). 9 | 10 | ![Android Version](http://i.imgur.com/ucRd1jm.gif) 11 | 12 | http://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction?list=users 13 | 14 | Notice 15 | ============== 16 | 17 | The usage has significantly changed in version 0.0.5 inspired by [chrisbanes](https://github.com/chrisbanes) [implementation](https://gist.github.com/chrisbanes/11247418) which makes styling easier. If you want to use the old style, use version 0.0.4. 18 | 19 | 20 | Usage 21 | ===== 22 | 23 | Add the library project or grab to build.gradle: 24 | ```groovy 25 | compile 'com.wrapp.floatlabelededittext:library:0.0.6' 26 | ``` 27 | or plain maven: 28 | ```maven 29 | 30 | com.wrapp.floatlabelededittext 31 | library 32 | 0.0.6 33 | aar 34 | 35 | ``` 36 | and then insert the view in XML: 37 | 38 | ```xml 39 | 42 | 43 | 47 | 48 | 49 | 50 | 54 | 55 | 59 | 60 | 61 | 62 | 66 | 67 | 72 | 73 | 74 | 75 | 80 | 81 | 86 | 87 | ``` 88 | Developed By 89 | ============ 90 | 91 | * Henrik Sandström [@heinrisch](https://twitter.com/Heinrisch) 92 | 93 | Styled By 94 | ========= 95 | 96 | * Marcus Gellemark [Dribbble](http://dribbble.com/Gellermark) 97 | 98 | Additional Credit 99 | ================= 100 | 101 | * Chris Banes [chrisbanes](https://github.com/chrisbanes) 102 | * Quentin DOMMERC [dommerq](https://github.com/dommerq) 103 | * Aaron Rietschlin [@AaronRietschlin](https://twitter.com/AaronRietschlin) 104 | * Guillaume Imbert [HozakaN](https://github.com/HozakaN) 105 | 106 | 107 | 108 | License 109 | ======= 110 | Licensed under the Apache License, Version 2.0 (the "License"); 111 | you may not use this file except in compliance with the License. 112 | You may obtain a copy of the License at 113 | http://www.apache.org/licenses/LICENSE-2.0 114 | 115 | Unless required by applicable law or agreed to in writing, software 116 | distributed under the License is distributed on an "AS IS" BASIS, 117 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 118 | See the License for the specific language governing permissions and 119 | limitations under the License. 120 | -------------------------------------------------------------------------------- /build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | repositories { 3 | mavenCentral() 4 | } 5 | dependencies { 6 | classpath 'com.android.tools.build:gradle:1.0.0' 7 | } 8 | } 9 | 10 | allprojects { 11 | group = 'com.wrapp.floatlabelededittext' 12 | 13 | repositories { 14 | mavenCentral() 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | -------------------------------------------------------------------------------- /example/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'android' 2 | 3 | android { 4 | compileSdkVersion 19 5 | buildToolsVersion '19.1.0' 6 | 7 | defaultConfig { 8 | minSdkVersion 7 9 | targetSdkVersion 19 10 | versionCode 1 11 | versionName "1.0" 12 | } 13 | buildTypes { 14 | release { 15 | minifyEnabled false 16 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.txt' 17 | } 18 | } 19 | } 20 | 21 | dependencies { 22 | compile fileTree(dir: 'libs', include: ['*.jar']) 23 | compile 'com.android.support:appcompat-v7:19.+' 24 | //compile 'com.wrapp.floatlabelededittext:library:0.0.6' 25 | compile project(":library") 26 | } 27 | -------------------------------------------------------------------------------- /example/proguard-rules.txt: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /Users/henrik/Android-SDK/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the ProGuard 5 | # include property in project.properties. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} -------------------------------------------------------------------------------- /example/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /example/src/main/java/com/wrapp/example/floatlabelededittext/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.wrapp.example.floatlabelededittext; 2 | 3 | import android.support.v7.app.ActionBarActivity; 4 | import android.os.Bundle; 5 | import android.view.Menu; 6 | import android.view.MenuItem; 7 | 8 | 9 | public class MainActivity extends ActionBarActivity { 10 | 11 | @Override 12 | protected void onCreate(Bundle savedInstanceState) { 13 | super.onCreate(savedInstanceState); 14 | setContentView(R.layout.activity_main); 15 | } 16 | 17 | 18 | @Override 19 | public boolean onCreateOptionsMenu(Menu menu) { 20 | // Inflate the menu; this adds items to the action bar if it is present. 21 | getMenuInflater().inflate(R.menu.main, menu); 22 | return true; 23 | } 24 | 25 | @Override 26 | public boolean onOptionsItemSelected(MenuItem item) { 27 | // Handle action bar item clicks here. The action bar will 28 | // automatically handle clicks on the Home/Up button, so long 29 | // as you specify a parent activity in AndroidManifest.xml. 30 | int id = item.getItemId(); 31 | if (id == R.id.action_settings) { 32 | return true; 33 | } 34 | return super.onOptionsItemSelected(item); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /example/src/main/res/drawable-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrapp-archive/floatlabelededittext/3cfca3afdc2358894dbb157958d2f7c6f42a00c6/example/src/main/res/drawable-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/src/main/res/drawable-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrapp-archive/floatlabelededittext/3cfca3afdc2358894dbb157958d2f7c6f42a00c6/example/src/main/res/drawable-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/src/main/res/drawable-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrapp-archive/floatlabelededittext/3cfca3afdc2358894dbb157958d2f7c6f42a00c6/example/src/main/res/drawable-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/src/main/res/drawable-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrapp-archive/floatlabelededittext/3cfca3afdc2358894dbb157958d2f7c6f42a00c6/example/src/main/res/drawable-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/src/main/res/layout/activity_main.xml: -------------------------------------------------------------------------------- 1 | 12 | 13 | 16 | 17 | 21 | 22 | 23 | 24 | 28 | 29 | 33 | 34 | 35 | 36 | 40 | 41 | 46 | 47 | 48 | 49 | 54 | 55 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /example/src/main/res/menu/main.xml: -------------------------------------------------------------------------------- 1 | 5 | 9 | 10 | -------------------------------------------------------------------------------- /example/src/main/res/values-w820dp/dimens.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 64dp 6 | 7 | -------------------------------------------------------------------------------- /example/src/main/res/values/dimens.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16dp 4 | 16dp 5 | 6 | -------------------------------------------------------------------------------- /example/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Float Labeled Edittext Example 5 | Hello world! 6 | Settings 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /gradle.properties: -------------------------------------------------------------------------------- 1 | VERSION_NAME=0.0.6 2 | VERSION_CODE=6 3 | GROUP=com.wrapp.floatlabelededittext 4 | 5 | POM_DESCRIPTION=Float Label Edittext for Android 6 | POM_URL=https://github.com/wrapp/floatlabelededittext 7 | POM_SCM_URL=https://github.com/wrapp/floatlabelededittext 8 | POM_SCM_CONNECTION=scm:git@github.com:wrapp/floatlabelededittext.git 9 | POM_SCM_DEV_CONNECTION=scm:git@github.com:wrapp/floatlabelededittext.git 10 | POM_LICENCE_NAME=MIT License, Version 2.0 11 | POM_LICENCE_URL=http://opensource.org/licenses/MIT 12 | POM_LICENCE_DIST=repo 13 | POM_DEVELOPER_ID=heinrisch 14 | POM_DEVELOPER_NAME=Henrik Sandström 15 | -------------------------------------------------------------------------------- /library/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /library/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.library' 2 | 3 | dependencies { 4 | compile 'com.nineoldandroids:library:2.4.0' 5 | } 6 | 7 | android { 8 | compileSdkVersion 19 9 | buildToolsVersion '19.1.0' 10 | 11 | defaultConfig { 12 | versionCode 6 13 | versionName "0.0.6" 14 | minSdkVersion 7 15 | targetSdkVersion 19 16 | } 17 | 18 | sourceSets { 19 | main { 20 | manifest.srcFile 'AndroidManifest.xml' 21 | java.srcDirs = ['src'] 22 | res.srcDirs = ['res'] 23 | } 24 | } 25 | } 26 | 27 | apply from: 'https://raw.github.com/chrisbanes/gradle-mvn-push/master/gradle-mvn-push.gradle' 28 | -------------------------------------------------------------------------------- /library/res/values/attrs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /library/src/com/wrapp/floatlabelededittext/FloatLabeledEditText.java: -------------------------------------------------------------------------------- 1 | package com.wrapp.floatlabelededittext; 2 | 3 | import android.annotation.SuppressLint; 4 | import android.annotation.TargetApi; 5 | import android.content.Context; 6 | import android.content.res.TypedArray; 7 | import android.graphics.drawable.Drawable; 8 | import android.os.Build; 9 | import android.text.Editable; 10 | import android.text.TextUtils; 11 | import android.text.TextWatcher; 12 | import android.util.AttributeSet; 13 | import android.util.TypedValue; 14 | import android.view.Gravity; 15 | import android.view.View; 16 | import android.view.ViewGroup; 17 | import android.widget.EditText; 18 | import android.widget.FrameLayout; 19 | import android.widget.TextView; 20 | 21 | import com.nineoldandroids.animation.Animator; 22 | import com.nineoldandroids.animation.AnimatorListenerAdapter; 23 | import com.nineoldandroids.animation.AnimatorSet; 24 | import com.nineoldandroids.animation.ObjectAnimator; 25 | import com.nineoldandroids.view.animation.AnimatorProxy; 26 | 27 | public class FloatLabeledEditText extends FrameLayout { 28 | 29 | private static final int DEFAULT_PADDING_LEFT= 2; 30 | 31 | private TextView mHintTextView; 32 | private EditText mEditText; 33 | 34 | private Context mContext; 35 | 36 | public FloatLabeledEditText(Context context) { 37 | super(context); 38 | mContext = context; 39 | } 40 | 41 | public FloatLabeledEditText(Context context, AttributeSet attrs) { 42 | super(context, attrs); 43 | mContext = context; 44 | setAttributes(attrs); 45 | } 46 | 47 | @TargetApi(Build.VERSION_CODES.HONEYCOMB) 48 | public FloatLabeledEditText(Context context, AttributeSet attrs, int defStyle) { 49 | super(context, attrs, defStyle); 50 | mContext = context; 51 | setAttributes(attrs); 52 | } 53 | 54 | private void setAttributes(AttributeSet attrs) { 55 | mHintTextView = new TextView(mContext); 56 | 57 | final TypedArray a = mContext.obtainStyledAttributes(attrs, R.styleable.FloatLabeledEditText); 58 | 59 | final int padding = a.getDimensionPixelSize(R.styleable.FloatLabeledEditText_fletPadding, 0); 60 | final int defaultPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_PADDING_LEFT, getResources().getDisplayMetrics()); 61 | final int paddingLeft = a.getDimensionPixelSize(R.styleable.FloatLabeledEditText_fletPaddingLeft, defaultPadding); 62 | final int paddingTop = a.getDimensionPixelSize(R.styleable.FloatLabeledEditText_fletPaddingTop, 0); 63 | final int paddingRight = a.getDimensionPixelSize(R.styleable.FloatLabeledEditText_fletPaddingRight, 0); 64 | final int paddingBottom = a.getDimensionPixelSize(R.styleable.FloatLabeledEditText_fletPaddingBottom, 0); 65 | Drawable background = a.getDrawable(R.styleable.FloatLabeledEditText_fletBackground); 66 | 67 | if (padding != 0) { 68 | mHintTextView.setPadding(padding, padding, padding, padding); 69 | } else { 70 | mHintTextView.setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom); 71 | } 72 | 73 | if (background != null) { 74 | setHintBackground(background); 75 | } 76 | 77 | mHintTextView.setTextAppearance(mContext, a.getResourceId(R.styleable.FloatLabeledEditText_fletTextAppearance, android.R.style.TextAppearance_Small)); 78 | 79 | //Start hidden 80 | mHintTextView.setVisibility(INVISIBLE); 81 | AnimatorProxy.wrap(mHintTextView).setAlpha(0); 82 | 83 | addView(mHintTextView, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 84 | 85 | a.recycle(); 86 | } 87 | 88 | @SuppressLint("NewApi") 89 | private void setHintBackground(Drawable background) { 90 | if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { 91 | mHintTextView.setBackground(background); 92 | } else { 93 | mHintTextView.setBackgroundDrawable(background); 94 | } 95 | } 96 | 97 | @Override 98 | public final void addView(View child, int index, ViewGroup.LayoutParams params) { 99 | if (child instanceof EditText) { 100 | if (mEditText != null) { 101 | throw new IllegalArgumentException("Can only have one Edittext subview"); 102 | } 103 | 104 | final LayoutParams lp = new LayoutParams(params); 105 | lp.gravity = Gravity.BOTTOM; 106 | lp.topMargin = (int) (mHintTextView.getTextSize() + mHintTextView.getPaddingBottom() + mHintTextView.getPaddingTop()); 107 | params = lp; 108 | 109 | setEditText((EditText) child); 110 | } 111 | 112 | super.addView(child, index, params); 113 | } 114 | 115 | private void setEditText(EditText editText) { 116 | mEditText = editText; 117 | 118 | mEditText.addTextChangedListener(new TextWatcher() { 119 | 120 | @Override 121 | public void afterTextChanged(Editable s) { 122 | setShowHint(!TextUtils.isEmpty(s)); 123 | } 124 | 125 | @Override 126 | public void beforeTextChanged(CharSequence s, int start, int count, int after) { 127 | } 128 | 129 | @Override 130 | public void onTextChanged(CharSequence s, int start, int before, int count) { 131 | } 132 | 133 | }); 134 | 135 | mEditText.setOnFocusChangeListener(new OnFocusChangeListener() { 136 | @Override 137 | public void onFocusChange(View view, boolean gotFocus) { 138 | onFocusChanged(gotFocus); 139 | } 140 | }); 141 | 142 | mHintTextView.setText(mEditText.getHint()); 143 | 144 | if(!TextUtils.isEmpty(mEditText.getText())){ 145 | mHintTextView.setVisibility(VISIBLE); 146 | } 147 | } 148 | 149 | private void onFocusChanged(boolean gotFocus) { 150 | if (gotFocus && mHintTextView.getVisibility() == VISIBLE) { 151 | ObjectAnimator.ofFloat(mHintTextView, "alpha", 0.33f, 1f).start(); 152 | } else if (mHintTextView.getVisibility() == VISIBLE) { 153 | AnimatorProxy.wrap(mHintTextView).setAlpha(1f); //Need this for compat reasons 154 | ObjectAnimator.ofFloat(mHintTextView, "alpha", 1f, 0.33f).start(); 155 | } 156 | } 157 | 158 | private void setShowHint(final boolean show) { 159 | AnimatorSet animation = null; 160 | if ((mHintTextView.getVisibility() == VISIBLE) && !show) { 161 | animation = new AnimatorSet(); 162 | ObjectAnimator move = ObjectAnimator.ofFloat(mHintTextView, "translationY", 0, mHintTextView.getHeight() / 8); 163 | ObjectAnimator fade = ObjectAnimator.ofFloat(mHintTextView, "alpha", 1, 0); 164 | animation.playTogether(move, fade); 165 | } else if ((mHintTextView.getVisibility() != VISIBLE) && show) { 166 | animation = new AnimatorSet(); 167 | ObjectAnimator move = ObjectAnimator.ofFloat(mHintTextView, "translationY", mHintTextView.getHeight() / 8, 0); 168 | ObjectAnimator fade; 169 | if (mEditText.isFocused()) { 170 | fade = ObjectAnimator.ofFloat(mHintTextView, "alpha", 0, 1); 171 | } else { 172 | fade = ObjectAnimator.ofFloat(mHintTextView, "alpha", 0, 0.33f); 173 | } 174 | animation.playTogether(move, fade); 175 | } 176 | 177 | if (animation != null) { 178 | animation.addListener(new AnimatorListenerAdapter() { 179 | @Override 180 | public void onAnimationStart(Animator animation) { 181 | super.onAnimationStart(animation); 182 | mHintTextView.setVisibility(VISIBLE); 183 | } 184 | 185 | @Override 186 | public void onAnimationEnd(Animator animation) { 187 | super.onAnimationEnd(animation); 188 | mHintTextView.setVisibility(show ? VISIBLE : INVISIBLE); 189 | AnimatorProxy.wrap(mHintTextView).setAlpha(show ? 1 : 0); 190 | } 191 | }); 192 | animation.start(); 193 | } 194 | } 195 | 196 | public EditText getEditText() { 197 | return mEditText; 198 | } 199 | 200 | public void setHint(String hint) { 201 | mEditText.setHint(hint); 202 | mHintTextView.setText(hint); 203 | } 204 | 205 | public CharSequence getHint() { 206 | return mHintTextView.getHint(); 207 | } 208 | 209 | } 210 | -------------------------------------------------------------------------------- /library/src/com/wrapp/floatlabelededittext/Utils.java: -------------------------------------------------------------------------------- 1 | package com.wrapp.floatlabelededittext; 2 | 3 | import java.util.concurrent.atomic.AtomicInteger; 4 | 5 | import android.annotation.SuppressLint; 6 | import android.os.Build; 7 | import android.view.View; 8 | 9 | public class Utils { 10 | 11 | private static final AtomicInteger sNextGeneratedId = new AtomicInteger(1); 12 | 13 | /** 14 | * Generate a value suitable for use in {@link #setId(int)}. 15 | * This value will not collide with ID values generated at build time by aapt for R.id. 16 | * 17 | * @return a generated ID value 18 | */ 19 | private static int generateViewId() { 20 | for (;;) { 21 | final int result = sNextGeneratedId.get(); 22 | // aapt-generated IDs have the high byte nonzero; clamp to the range under that. 23 | int newValue = result + 1; 24 | if (newValue > 0x00FFFFFF) newValue = 1; // Roll over to 1, not 0. 25 | if (sNextGeneratedId.compareAndSet(result, newValue)) { 26 | return result; 27 | } 28 | } 29 | } 30 | 31 | @SuppressLint("NewApi") 32 | public static int generateId() { 33 | if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1) { 34 | 35 | return generateViewId(); 36 | } else { 37 | 38 | return View.generateViewId(); 39 | } 40 | } 41 | 42 | } 43 | -------------------------------------------------------------------------------- /settings.gradle: -------------------------------------------------------------------------------- 1 | include ':library', ':example' 2 | --------------------------------------------------------------------------------