1. *** New version of B4J is available ***
    B4J v7.8
    Dismiss Notice

Android Tutorial FloatLabeledEditText (ViewsEx)

Discussion in 'Tutorials & Examples' started by Erel, Feb 28, 2016.

  1. Erel

    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.

    [​IMG]

    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+.
     
    fredo, metrick, invaderwt and 27 others like this.
  2. ArminKH

    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: Feb 29, 2016
  3. Claudio Oliveira

    Claudio Oliveira Active Member Licensed User

    Absolutely awsome!!! :cool:
     
  4. Claudio Oliveira

    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.
    Code:
    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.
     
    fabricio, Multiverse app and Mashiane like this.
  5. JNG

    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
     
  6. Erel

    Erel Administrator Staff Member Licensed User

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

    Check ViewsEx in the libraries tab and then in the designer: Add View - CustomView - FloatLabeledEditText.
     
    Claudio Oliveira likes this.
  7. konradwalsh

    konradwalsh Active Member Licensed User

    Hey
    Should I expect this to work?

    txtSugar.EditText.INPUT_TYPE_DECIMAL_NUMBERS = 1
     
  8. Erel

    Erel Administrator Staff Member Licensed User

    No. You should expect this to work:
    Code:
    txtSugar.EditText.InputType = txtSugar.EditText.INPUT_TYPE_DECIMAL_NUMBERS
     
    DonManfred likes this.
  9. konradwalsh

    konradwalsh Active Member Licensed User

    Always amazing support... THANKS!
     
  10. Claudio Oliveira

    Claudio Oliveira Active Member Licensed User

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

    Any "hint" on this? ;)
     
  11. Erel

    Erel Administrator Staff Member Licensed User

    You can use this code:
    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.
     
  12. Claudio Oliveira

    Claudio Oliveira Active Member Licensed User

    Brilliant!
    Thank you, Erel
     
  13. Claudio Oliveira

    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!
     
  14. asales

    asales Well-Known 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?
     
  15. Claudio Oliveira

    Claudio Oliveira Active Member Licensed User

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

    Regards
     
    Last edited: Mar 8, 2016
    asales likes this.
  16. so27

    so27 Active Member Licensed User

    Great!:)
    What's with the Autocompletetext? There is also a FloatLabel for?
     
  17. Erel

    Erel Administrator Staff Member Licensed User

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

    so27 Active Member Licensed User

    All right, thank you.
     
  19. shashkiranr

    shashkiranr Active Member Licensed User

    Hi All,

    How to set custom typeface for this edit text?

    Best,
    SK
     
  20. Erel

    Erel Administrator Staff Member Licensed User

    Code:
    FloatLabeledEditText.EditText.Typeface = ...
     
    shashkiranr likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice