B4A Library [B4X] [XUI] AS TextFieldAdvanced - Title, Information, Counter, Password, Button, Prefix, Suffix, Icons, Multiline

Alexander Stolte · Jul 12, 2023

Update

1.23
- BugFixes
- RevealButton and ClearButton TextColor - Can now also be seen in light mode
- Add Designer Property ClearAndRevealButtonColor - is per default transparent
  - If the alpha value is set to 0, then a color that matches the background color is automatically used
- Add Designer Property FocusedTitleTextColor
  - Default: White
- Add Deigner Property NonFocusedTitleTextColor
  - Default: White
  - Would interfere too much with the design of already existing layouts if another white would be used
- Add Designer Property NonFocusedShapeColor

@Lucas Siqueira Looks great!
Your suggestion is built in. In addition to the request from @jahswant , I have added another designer property (ClearAndRevealButtonColor). If the alpha value there is 0, then the background color is used to check whether the icon color should be white or black.

Lucas Siqueira said:

Daica said:
I'm trying to make the textfield look something like this:

Example ist attached. You need Version 1.23+

Daica · Jul 12, 2023

I"m trying to use it as a button as well, is there a better way to center align the text if we are using a leading or trailing icon?

Currently I just set a blank leading Icon and add 10dip or so to the LeftGap.

Also, is there a way to control the border size?

Alexander Stolte · Jul 12, 2023

Daica said:
is there a better way to center align the text

No. It's a TextField and not a Button.
Add a Panel, add a label to it and a imageview -> Done, your login button

Daica · Jul 12, 2023

Could you add in an option to control the border width of the focused shape?
Being able to change the color of the border of the textbox is nice, but it would be very helpful to adjust the border size as well

Alexander Stolte · Jul 13, 2023

Update

1.24
- Add new Type ASTextFieldAdvanced_TextFieldProperties
- Properties
  - FocusedShapeColor
  - NonFocusedShapeColor
  - CornerWidth - NEW
  - CornerRadius

Example

B4X:

AS_TextFieldAdvanced1.TextFieldProperties.BorderWidth = 5dip
AS_TextFieldAdvanced1.Refresh

Alexander Stolte · Jul 16, 2023

Update

1.25
- BugFixes

yiankos1 · Jul 19, 2023

Hello Alex,

At designer, Counter Max and Info Text is the same. Counter and Info again the same.

Alexander Stolte · Jul 19, 2023

yiankos1 said:
At designer, Counter Max and Info Text is the same. Counter and Info again the same.

and what is the statement supposed to tell me now? Info text is its own label and the counter display is its own label.

yiankos1 · Jul 19, 2023

Alexander Stolte said:
and what is the statement supposed to tell me now? Info text is its own label and the counter display is its own label.

Alexander Stolte · Jul 19, 2023

Ahhh, you mean the description text. I have not been able to read out so. I'm sorry. Thanks for reporting.

yiankos1 · Jul 19, 2023

Alexander Stolte said:
Ahhh, you mean the description text. I have not been able to read out so. I'm sorry. Thanks for reporting.

BTW thank you again for your views. I keep donating you when i can....

Alexander Stolte · Jul 20, 2023

Update

1.26
- BugFixes

Daica · Aug 1, 2023

What is the recommended icon size for the leading and trailing icons? I'm using 512x512 and the icons are blurry

Alexander Stolte · Aug 1, 2023

It depends. The size of the ImageView depends on the height of the text field.

The image view is this size: TextField.Height/2

The blur could also come from the icon being made smaller. I resize the image before loading it into the imageview.

yiankos1 · Aug 1, 2023

Hello again,

I am trying to figure it out but i can't last five hours. For no reason when page is loaded TextChanged event loads couple of time as you see... it drives me crazy. New text is blank. If i try to log it, i does not log anything, not even "". Attaching screenshot and my code:

B4X:

Sub Class_Globals
    Private Root As B4XView 'ignore
    Private xui As XUI 'ignore
    Private etMail As AS_TextFieldAdvanced
    Private etPassword As AS_TextFieldAdvanced
    Private lblRestore As Label
    Private pnlLogin As Panel
'    Private ime As IME
End Sub

'You can add more parameters here.
Public Sub Initialize As Object
    Return Me
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    'load the layout to Root
   
    Root.LoadLayout("login")
'    ime.Initialize("")
End Sub

Sub B4XPage_CloseRequest As ResumableSub
    Return True
End Sub

Private Sub etPassword_EnterPressed
    btnLogin_Click
End Sub


Private Sub lblRegister_Click
   
    B4XPages.ShowPage("registerPage")
   
End Sub

Private Sub lblRestore_Click
   
    B4XPages.ShowPage("restorePasswordPage")
   
End Sub

Sub IME_HeightChanged (NewHeight As Int, OldHeight As Int)
    pnlLogin.Top=NewHeight-pnlLogin.Height
End Sub

Private Sub etPassword_TextChanged(Text As String)
    Log("SD")
End Sub

Private Sub etMail_TextChanged(Text As String)
    Log("SD2")
End Sub

EDIT:
Only solution i found out is editing source code(but i am not sure if i am allowed):

B4X:

Private Sub xtf_TextField_TextChanged (Old As String, New As String)
    If New.Trim.Length<>0 Then TextChanged(New)
End Sub

Alexander Stolte · Aug 1, 2023

Update

1.27
- BugFixes

yiankos1 said:
Only solution i found out is editing source code(but i am not sure if i am allowed):

No, because this is not a solution. We want to have a TextCahnge Event if the user deletes all the input. The Error was on a other position.
It's now fixed, thanks for reporting.

Just describe the behavior to me, preferably with an example project and its own thread. Instead of searching hours for a solution.

wimpie3 · Aug 3, 2023

Is it possible to add a date or time field type, which pops up your date or time selector?

Alexander Stolte · Aug 3, 2023

wimpie3 said:
Is it possible to add a date or time field type, which pops up your date or time selector?

Set the "Mode" at the designer to "Button" and show the date or time selector on the "ButtonClick" Event.

fbritop · Aug 4, 2023

I think there is a Bug on line 1117, the function ClearButton_Click does not include a ClearButton action in case of MultiLine edit.

B4X:

Private Sub ClearButton_Click
    If m_ReadOnly Then Return
    TextChanged("")
    If xtf_TextField.IsInitialized Then xtf_TextField.Text = ""
    If xtf_TextFieldPassword.IsInitialized Then xtf_TextFieldPassword.Text = ""
    If xtf_Multiline.IsInitialized Then xtf_Multiline.Text = "" '<----THIS LINE SHOULD BE INCLUDED
    xlbl_ButtonText.Text = ""
    ClearButtonClick
End Sub

On the other hand, ClearButton does not have the same alignment with TextField and TextFieldMultiLine, I could not figure it out digging into the library

Great Library anyway!
Cheers

Alexander Stolte · Aug 4, 2023

Well that's not a bug, actually it's intentional because I actively hide the clear button when multiline text is selected. So I don't know how you managed to get it to show up, that's more the bug. I will try to integrate the clear button properly in mutline mode.

B4A Library [B4X] [XUI] AS TextFieldAdvanced - Title, Information, Counter, Password, Button, Prefix, Suffix, Icons, Multiline

Attachments

Expert

Attachments

Active Member

Expert

Active Member

Expert

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Active Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Active Member

Expert

Similar Threads