Android Tutorial FloatLabeledEditText (ViewsEx)

FloatLabeledEditText is an improved EditText where the hint moves to the top instead of disappearing when there is text in the field.

With the floating hint you no longer need to add a label to describe the field.

The implementation is based on this open source project: https://github.com/wrapp/floatlabelededittext

It is implemented as a custom view. You need to add it from the designer. Note that you can change the text properties.

Technically FloatLabeledEditText wraps an EditText. You can get this EditText with the EditText property.
This is useful if you want to configure the internal EditText.

This library is part of the ViewsEx library (v1.10+). It is supported by Android 4+ and requires B4A v5.8+.

 

[ArminKH]

awsome erel.
since past week to now you've share some useful classes,wrapper for some views,etc and this is one of them
please don't stop this way.that's it
This is what we want to see in the forum
THE LIVE FORUM

 

[Claudio Oliveira]

Absolutely awsome!!!

 

[Claudio Oliveira]

Hi!
I've changed all EditText to FloatLabeledEditText views on an activity, and noticed that the soft keyboard covers the views wich are close to the activity bottom.
With normal EditText, Android system automatically pans the activity in order to show the view that has focus, which is expected.
But this doesn't happen with FloatLabeledEditText.
I added this line to the manifest file, and it worked.

SetActivityAttribute(Main, android:windowSoftInputMode, adjustPan)

My App uses "Theme.AppCompat.Light". I don't know if this has something to do with this theme or what, and I don't know if that's the right thing to do in such case either, but it's working pretty fine anyway.

Regards.

 

[JNG]

hi Erel

how to get FloatLabeledEditText custom type in designer I am using B4A ver 5.8+ I am missing something

regards

 

[Erel]

I added this line to the manifest file, and it worked.

This is the correct solution if you want to use pan mode.

how to get FloatLabeledEditText custom type in designer I am using B4A ver 5.8+ I am missing something

Check ViewsEx in the libraries tab and then in the designer: Add View - CustomView - FloatLabeledEditText.

 

[konradwalsh]

Hey
Should I expect this to work?

txtSugar.EditText.INPUT_TYPE_DECIMAL_NUMBERS = 1

 

[Erel]

No. You should expect this to work:

txtSugar.EditText.InputType = txtSugar.EditText.INPUT_TYPE_DECIMAL_NUMBERS

 

[konradwalsh]

Always amazing support... THANKS!

 

[Claudio Oliveira]

No HintColor property for FloatLabeledEditText?
Setting HintColor for it's embedded EditText at runtime, like this

fleText1.EditText.HintColor=Colors.red

has no effect whatsoever.

Any "hint" on this?

 

[Erel]

You can use this code:

Sub SetHintColor(fl As FloatLabeledEditText, Color As Int)
   Dim jo As JavaObject = fl
   Dim r As Reflector
   r.Target = jo
   Dim lbl As Label = r.GetField("mHintTextView")
   fl.EditText.HintColor = Color
   lbl.TextColor = Color
End Sub

Depends on JavaObject and Reflection libraries.

 

[Claudio Oliveira]

Brilliant!
Thank you, Erel

 

[Claudio Oliveira]

"FloatLabeledEditText" is not raising the FocusChanged event.
TextChanged and EnterPressed events are ok.
This is an awsome and very useful view, so I believe it's worth this feedback.

Regards

EDIT: Sorry!!! I've just read about new version 1.11
Thanks!

 

[asales]

You can use this code:

Sub SetHintColor(fl As FloatLabeledEditText, Color As Int)
   Dim jo As JavaObject = fl
   Dim r As Reflector
   r.Target = jo
   Dim lbl As Label = r.GetField("mHintTextView")
   fl.EditText.HintColor = Color
   lbl.TextColor = Color
End Sub

Depends on JavaObject and Reflection libraries.

I use this values to the text style of the FloatLabeledEditText:
- TextColor = RGB(20,120,160)
- TextSize = 16
but If I use this code the values returns to default.

How can I fix it?

 

[Claudio Oliveira]

I use this values to the text style of the FloatLabeledEditText:
- TextColor = RGB(20,120,160)
- TextSize = 16
but If I use this code the values returns to default.

How can I fix it?

As explained by Erel in the first post, this view wraps an EditText, so it "heirs" it's properties which, at run time, are default.
The "SetHintColor" sub changes a property of the embedded EditText so, I SUPPOSE, the FloatLabeledEditText will bring back these default values.
Try to change these properties at run time on the embedded editText.
Supposing your variable name is txtVar, do this:

txtVar.EditText.Color = RGB(20,120,160)
txtVar.TextSize = 16

Tested here, and worked pretty fine.

Regards

 

[so27]

Great!
What's with the Autocompletetext? There is also a FloatLabel for?

 

[Erel]

You can use SearchView which is better than the built-in AutoCompleteEditText control. You can replace the EditText in SearchView with this control.

 

[so27]

All right, thank you.

 

[shashkiranr]

Hi All,

How to set custom typeface for this edit text?

Best,
SK

 

[Erel]

FloatLabeledEditText.EditText.Typeface = ...