B4A Library [Lib] Masked EditText

Informatix · Jul 3, 2013

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:

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.

incendio · Oct 7, 2015

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 · Oct 7, 2015

incendio said:
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 · Oct 7, 2015

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 · Oct 8, 2015

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.

Informatix · Oct 9, 2015

incendio said:
method SelectAll didn't work.

It works fine here, so could you post a project showing the issue?

incendio · Oct 9, 2015

Informatix said:
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 · Oct 9, 2015

incendio said:
I am afraid it could have compability issues if build a Custom View based on another Custom View.

I can't see why.

incendio said:
to include my function.

What is this function?

incendio · Oct 12, 2015

Informatix said:
What is this function?

It is a function to format numeric value such as 1000->1,000.
And a few miscelaneous functions. See the sample project.

Informatix · Oct 12, 2015

incendio said:
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 · Nov 11, 2015

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

Informatix · Nov 11, 2015

Rusty said:
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

This library is written in Java so it's probably not what you expect. Anyway, you're allowed to decompile this library.

rleiman · Dec 5, 2015

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 · Dec 6, 2015

Look at manifest editor. It was compiled with target sdk 4, that gives orange frame around edittext.

rleiman · Dec 6, 2015

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 · Dec 6, 2015

rleiman said:
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 · Dec 6, 2015

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 · Dec 6, 2015

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.

Informatix · Dec 7, 2015

rleiman said:
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?

This mode does not exist.

Informatix · Dec 7, 2015

rleiman said:

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 · Dec 7, 2015

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.

B4A Library [Lib] Masked EditText

Attachments

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Attachments

Expert

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Expert

Expert

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency