B4A Library [Lib] Masked EditText

This EditText fixes a few issues with the standard EditText and adds new features:
- Filter: you can transform any input before the text is changed;
- Mask: you can define an input mask;
- Read-only: you can protect your EditText against changes;
- Floating hint: the hint moves above the EditText when the user starts typing;
- Error popup: you can display a message in a popup to warn the user:

met.png


v1.1:
- It is now a custom view supported by the designer
- I fixed a bug when Format was set after WithSuggestions

v1.2:
- I moved the CompactText function from the example to the library;
- I fixed a bug with SelectionStart;
- I fixed a bug when InputType is set to NONE.

v1.3:
- WithSuggestions works now as expected on Samsung devices.
- Suggestions are automatically disabled in password mode.

v1.4:
- I added the EnableFloatingHint function;
- I added the custom view properties for the designer.

v1.41:
- I improved the animation of the floating hint;
- I fixed an issue with the hint color.

v1.42:
- I fixed a bug with the floating hint when the EditText is moved.

v1.5:
- I rewrote the code of floating hints to make it more robust and fix a few issues;
- I added the SetFromHTML function.

v1.51:
- A few properties set in the designer were not taken into account.

v1.52:
- There was an issue with the background drawable as it was set by default by the designer to a white colored drawable. The support of this property in the designer was removed to keep the original default background.

This library does not work with Android versions < 2.
 

Attachments

  • MaskedEditText v1.52.zip
    24.9 KB · Views: 2,710
  • Java source - MaskedEditText.zip
    9.2 KB · Views: 1,081
  • MaskedEditText v1.53.zip
    25.2 KB · Views: 1,687
Last edited:

incendio

Well-Known Member
Licensed User
Longtime User
Hello,
I tried to add another function to this Library.

Have created a class with designer support, this is the initialization code
B4X:
Sub Class_Globals
    Private pnlTxt As Panel
    Private pnlClick As Panel
    Private edt As MaskedEditText
    Private mTarget As Object
    Private mEventName As String
    Private PanelBkcdClr = Colors.White As Int
    Private BorderWidth = 4 As Int
    Private BorderGotFocusClr = Colors.RGB(255,128,0) As Int
    Private BorderLostFocusClr = Colors.RGB(192,192,192) As Int

End Sub

Public Sub Initialize (Target As Object, EventName As String )
    Dim views As ViewSetting
    mTarget    = Target
    mEventName = EventName
    edt.Initialize("edt")
    edt.TextColor = Colors.Black
    views.setCursorDrawableColor(edt,Colors.RGB(255,128,0))
End Sub

Public Sub DesignerCreateView(Base As Panel, lbl As Label, props As Map)
    Private CD As ColorDrawable
    CD.Initialize2(PanelBkcdClr,7,BorderWidth, BorderLostFocusClr)   
    Base.Background = CD
    Base.AddView(edt, 0, 5, Base.Width, Base.Height+5dip)
    edt.Text = lbl.Text
    pnlTxt      = Base
End Sub

All worked, except for Softkeyboard. When MaskEdit HasFocus, key on softkeyboard where it should display Next/Done symbol,replaced with ENTER symbol.

if I changed this code
B4X:
Private edt As MaskedEditText

to this
B4X:
Private edt As EditText
SoftKeyboard shows correct key (Next/Done).

Can this anomaly be corrected?

Thanks in advance.
 

Informatix

Expert
Licensed User
Longtime User
Hello,
I tried to add another function to this Library.

Have created a class with designer support, this is the initialization code
B4X:
Sub Class_Globals
    Private pnlTxt As Panel
    Private pnlClick As Panel
    Private edt As MaskedEditText
    Private mTarget As Object
    Private mEventName As String
    Private PanelBkcdClr = Colors.White As Int
    Private BorderWidth = 4 As Int
    Private BorderGotFocusClr = Colors.RGB(255,128,0) As Int
    Private BorderLostFocusClr = Colors.RGB(192,192,192) As Int

End Sub

Public Sub Initialize (Target As Object, EventName As String )
    Dim views As ViewSetting
    mTarget    = Target
    mEventName = EventName
    edt.Initialize("edt")
    edt.TextColor = Colors.Black
    views.setCursorDrawableColor(edt,Colors.RGB(255,128,0))
End Sub

Public Sub DesignerCreateView(Base As Panel, lbl As Label, props As Map)
    Private CD As ColorDrawable
    CD.Initialize2(PanelBkcdClr,7,BorderWidth, BorderLostFocusClr) 
    Base.Background = CD
    Base.AddView(edt, 0, 5, Base.Width, Base.Height+5dip)
    edt.Text = lbl.Text
    pnlTxt      = Base
End Sub

All worked, except for Softkeyboard. When MaskEdit HasFocus, key on softkeyboard where it should display Next/Done symbol,replaced with ENTER symbol.

if I changed this code
B4X:
Private edt As MaskedEditText

to this
B4X:
Private edt As EditText
SoftKeyboard shows correct key (Next/Done).

Can this anomaly be corrected?

Thanks in advance.
There's no anomaly. The IME button is set to Next/Done when SingleLine = true. You can force it to Done with ForceDoneButton.
 

incendio

Well-Known Member
Licensed User
Longtime User
I never change the value of SingleLine, but I think, its default value is True.

Also have tried MaskEdit alone, without add it to CustomView, Softkeyboard shows correct value.

It seems that MaskEdit is not compatible to add to CustomView. I will test again later, just to make sure.

Thanks anyway .
 

incendio

Well-Known Member
Licensed User
Longtime User
Have tested again, somehow when MaskEdit used in CustomView , SingleLine property set to False.

Setting SingleLine to True solved SoftKeyboard problem, but another problem rose,
method SelectAll didn't work.
 

incendio

Well-Known Member
Licensed User
Longtime User
It works fine here, so could you post a project showing the issue?
Thanks for your replied, but i have already made a big changes in my Custom View, now it is not using MaskEdit, just using EditText and build functions that i needed from a scratch.

I did this cause I am afraid it could have compability issues if build a Custom View based on another Custom View.

Perhaps, it is more safer if i give you my source code to you & you rebuild again your library to include my function.

Sorry for the off topic.
I got problem when using IME set filter. I guess you also using this, to filter softkeyboard, only accept numeric value & minus sign, but without a dot sign. It is workings OK on Nexus 7 & emulator, but on my phone, cannot type minus sign.
I will try your MaskEdit on my phone, & if it is working fine, i have to ask your secret :)
 

Informatix

Expert
Licensed User
Longtime User
It is a function to format numeric value such as 1000->1,000.
And a few miscelaneous functions. See the sample project.
Very easy to do with MET. Either with a mask:
B4X:
ET1.Initialize("ET1")
Dim ThousandSep As String = " "
ET1.Format = "###" & ThousandSep & "###" & ThousandSep & "###" & ThousandSep & "###"
ET1.InputType = ET1.INPUT_TYPE_NUMBERS_WITH_SIGN
ET1.SingleLine = True
or with an event:
B4X:
Sub ET1_TextChanged(Old As String, New As String)
    If FormattingText Then Return
    FormattingText = True
    If New.Length > 0 Then
        New = New.Replace(ThousandSeparator, "")
        New = NumberFormat2(New, 1, 0, 0, True)
        ET1.Text = New.Replace(",", ThousandSeparator)
        ET1.SelectionStart = ET1.Text.Length
    End If
    FormattingText = False
End Sub
 

Rusty

Well-Known Member
Licensed User
Longtime User
Very nice lib.
I would like to customize it considerably for my own purposes. (Like make ##, have 1 required character and a few things like that).
Is it possible to get source code?
Thanks,
Rusty
 

rleiman

Well-Known Member
Licensed User
Longtime User
I love your Masked EditText library but can't figure out how your sample app displayed the edit text fields in the white colour and display a nice orange focus border when I put focus onto the edit text fields.

I can set the properties in my app such as the mask, etc but don't get that nice focus frame that your sample app displays.

Please let me know how to activate that.

I set the fields in my app using the Custom view from the designer.

Thanks.
 

incendio

Well-Known Member
Licensed User
Longtime User
Look at manifest editor. It was compiled with target sdk 4, that gives orange frame around edittext.
 

rleiman

Well-Known Member
Licensed User
Longtime User
Hi incendio,

I tried this coding in the manifest editor but it did not change. Looks like he did something else.

B4X:
'This code will be applied to the manifest file during compilation.
'You do not need to modify it in most cases.
'See this link for for more information: https://www.b4x.com/forum/showthread.php?p=78136
AddManifestText(
<uses-sdk android:minSdkVersion="4" android:targetSdkVersion="4"/>
<supports-screens android:largeScreens="true"
    android:normalScreens="true"
    android:smallScreens="true"
    android:anyDensity="true"/>)
SetApplicationAttribute(android:icon, "@drawable/icon")
SetApplicationAttribute(android:label, "$LABEL$")
SetApplicationAttribute(android:theme, "@android:style/Theme.Holo")
'End of default text.

I'm going to try and add a masked edit text view directly by code into my app and see if that make a difference because I used the designer to add those into my app.

Truly,
Emad
 

rleiman

Well-Known Member
Licensed User
Longtime User
Hi incendio,

I tried this coding in the manifest editor but it did not change. Looks like he did something else.

B4X:
'This code will be applied to the manifest file during compilation.
'You do not need to modify it in most cases.
'See this link for for more information: https://www.b4x.com/forum/showthread.php?p=78136
AddManifestText(
<uses-sdk android:minSdkVersion="4" android:targetSdkVersion="4"/>
<supports-screens android:largeScreens="true"
    android:normalScreens="true"
    android:smallScreens="true"
    android:anyDensity="true"/>)
SetApplicationAttribute(android:icon, "@drawable/icon")
SetApplicationAttribute(android:label, "$LABEL$")
SetApplicationAttribute(android:theme, "@android:style/Theme.Holo")
'End of default text.

I'm going to try and add a masked edit text view directly by code into my app and see if that make a difference because I used the designer to add those into my app.

Truly,
Emad

Hi Everyone,

I was able to get it going.

I changed:
B4X:
    <uses-sdk android:minSdkVersion="4" android:targetSdkVersion="4"/>

To:
B4X:
    <uses-sdk android:minSdkVersion="4"/>

I removed:

B4X:
    SetApplicationAttribute(android:theme, "@android:style/Theme.Holo")

Now I have the nice orange border on the masked edit text view when it gets focus.
 

rleiman

Well-Known Member
Licensed User
Longtime User
I would like to know if there is a property I can set to change the default "Insert" mode of the masked edit text view to use "Replace" mode?
 

rleiman

Well-Known Member
Licensed User
Longtime User
Hi Everyone,

I tried this but it crashes my app. It crashes on the line that sets the Text property to Old.

B4X:
Sub edtId_TextChanged(Old As String, New As String)

    edtId.Text = Old
    edtId.ShowError ("Sorry, you can't change anything here.")
End Sub

But these don't crash it.

B4X:
Sub edtId_TextChanged(Old As String, New As String)

    edtId.Text = New
    edtId.ShowError ("Sorry, you can't change anything here.")
End Sub

B4X:
Sub edtId_TextChanged(Old As String, New As String)
 
    edtId.Text = "testing"
    edtId.ShowError ("Sorry, you can't change anything here.") 
End Sub

B4X:
Sub edtId_TextChanged(Old As String, New As String)
   
    edtId.Text = strOridinalId
    edtId.ShowError ("Sorry, you can't change anything here.")   
End Sub

For now, I will use the one with the string variable.
 
Last edited:

Informatix

Expert
Licensed User
Longtime User
Hi Everyone,

I tried this but it crashes my app. It crashes on the line that sets the Text property to Old.

B4X:
Sub edtId_TextChanged(Old As String, New As String)

    edtId.Text = Old
    edtId.ShowError ("Sorry, you can't change anything here.")
End Sub

But these don't crash it.

B4X:
Sub edtId_TextChanged(Old As String, New As String)

    edtId.Text = New
    edtId.ShowError ("Sorry, you can't change anything here.")
End Sub

B4X:
Sub edtId_TextChanged(Old As String, New As String)

    edtId.Text = "testing"
    edtId.ShowError ("Sorry, you can't change anything here.")
End Sub

B4X:
Sub edtId_TextChanged(Old As String, New As String)
  
    edtId.Text = strOridinalId
    edtId.ShowError ("Sorry, you can't change anything here.")  
End Sub

For now, I will use the one with the string variable.
If you want a read-only field, then set the read-only property to true.
 

rleiman

Well-Known Member
Licensed User
Longtime User
Hi Informatix,

I tried the read only mode as well but it allows the user to put focus into the view. I love the error message option that your view displays so I simulated a read only field except it displays the error message as soon as the user tries to type anything in it.
 
Top