Android Tutorial FloatLabeledEditText (ViewsEx)

Erel

Administrator
Staff member
Licensed User
upload_2016-2-28_15-46-20.png


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

Well-Known Member
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
 
Last edited:

Claudio Oliveira

Active Member
Licensed User
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.
B4X:
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

Member
Licensed User
hi Erel

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

regards
 

Erel

Administrator
Staff member
Licensed User
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.
 

Claudio Oliveira

Active Member
Licensed User
No HintColor property for FloatLabeledEditText?
Setting HintColor for it's embedded EditText at runtime, like this
B4X:
fleText1.EditText.HintColor=Colors.red
has no effect whatsoever.

Any "hint" on this? ;)
 

Erel

Administrator
Staff member
Licensed User
You can use this code:
B4X:
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

Active Member
Licensed User
"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

Well-Known Member
Licensed User
You can use this code:
B4X:
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

Active Member
Licensed User
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:
B4X:
txtVar.EditText.Color = RGB(20,120,160)
txtVar.TextSize = 16
Tested here, and worked pretty fine.

Regards
 
Last edited:

so27

Active Member
Licensed User
Great!:)
What's with the Autocompletetext? There is also a FloatLabel for?
 
Top