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,741
  • Java source - MaskedEditText.zip
    9.2 KB · Views: 1,108
  • MaskedEditText v1.53.zip
    25.2 KB · Views: 1,720
Last edited:

rleiman

Well-Known Member
Licensed User
Longtime User
Hi Everyone,

My app has multiple Masked EditText views going across the screen. It has an address view 1, an address view 2 which are side by side. And under the address view is a city view, a state view, and a zip view which is also side by side.

Is there a way to control which Masked EditText view will receive focus when the "Next" button is tapped on the keyboard?

What happens now is tapping the "Next" button on the keyboard jumps from address view 1 to the state view instead of jumping over to address view 2.

Sometimes the "Done" button on the keyboard is displayed instead of the "Next" button when focus is on the first Masked EditText view. This is intermittent I think.

Thanks.
 

Informatix

Expert
Licensed User
Longtime User
Hi Everyone,

My app has multiple Masked EditText views going across the screen. It has an address view 1, an address view 2 which are side by side. And under the address view is a city view, a state view, and a zip view which is also side by side.

Is there a way to control which Masked EditText view will receive focus when the "Next" button is tapped on the keyboard?

What happens now is tapping the "Next" button on the keyboard jumps from address view 1 to the state view instead of jumping over to address view 2.

Sometimes the "Done" button on the keyboard is displayed instead of the "Next" button when focus is on the first Masked EditText view. This is intermittent I think.

Thanks.
The behavior is exactly the same as for a standard EditText. Any method that works for an EditText will work for a MET. You should modify this class to allow the use of MaskedEditText and see whether that works for you.
 

Informatix

Expert
Licensed User
Longtime User
[This is not a criticism of this excellent library]

As a user, I can not easily enter an email address.
There's not a lot of options. Either you enter it without a mask (it's what you do with a basic edittext), or you enter it with a mask and I agree that's not much better. You can enter it in two separate fields too. It's probably what I would do.

Is it better to use a simple EditText (or this View but unformatted)?
MaskedEditText has a few advantages over EditText that are listed at the beginning of the first thread.
 

compilador

New Member
Licensed User
Longtime User
Hello Informatix, I'm trying out your lib. I can add a MaskedEtitText by code but it isn't shown in the "Add View" list at the designer. Do I have to do something else to add your view to the designer?
I have B4A ver. 5.02

Thanks
 

Dave O

Well-Known Member
Licensed User
Longtime User
Hi there,

I'm trying out MET to replace normal editText fields because I want to show validation errors using the ShowError method.

So far so good - it was easy to drop in a MET field as a replacement and set a few properties.

The only difference I've noticed so far is that, when a field is disabled, the text color does not dim (e.g. from black to a shade of gray if I'm using Holo Light).

I can manually set the textColor whenever I enable/disable the field, but is there a reason it doesn't do this automatically like the stock editText view?

Merci!
 

Informatix

Expert
Licensed User
Longtime User
Hi there,

I'm trying out MET to replace normal editText fields because I want to show validation errors using the ShowError method.

So far so good - it was easy to drop in a MET field as a replacement and set a few properties.

The only difference I've noticed so far is that, when a field is disabled, the text color does not dim (e.g. from black to a shade of gray if I'm using Holo Light).

I can manually set the textColor whenever I enable/disable the field, but is there a reason it doesn't do this automatically like the stock editText view?

Merci!
??? If I set Enabled to False, the color changes to a dimmed shade. I didn't add/change anything to the standard behavior.
 

Dave O

Well-Known Member
Licensed User
Longtime User
??? If I set Enabled to False, the color changes to a dimmed shade. I didn't add/change anything to the standard behavior.

Hmm, strange. On the devices I've tried (Samsung Note 3, emulated Nexus S and Nexus 9), the disabled text is not dimmed (although the bottom line of the view is). And I'm not touching the textColor value in the designer or in the code.

If you can't reproduce it, I'll upload a minimal example so you can check if it behaves differently on your devices.

Merci encore
 

Dave O

Well-Known Member
Licensed User
Longtime User
Noticed another strange behaviour, perhaps related: If I disable a MET in the designer, it is still enabled when the app runs.

(If I disable it in code, then it does disable.)

I will post a minimal example tomorrow if I get a chance.

Cheers!
 

Dave O

Well-Known Member
Licensed User
Longtime User
Just tried v1.51, and the Enabled property is now behaving well.

However, there is no longer a horizontal line drawn under the field's value (regardless of enabled or disabled).

Perhaps related to that, the default background color shown in the designer is white (not "Default color") as opposed to the normal EditText (which doesn't expose color, but seems to default to transparent). I can change this manually to no color. Doesn't affect the continuing absence of the horizontal line.

Hope this helps!
 

Informatix

Expert
Licensed User
Longtime User
Just tried v1.51, and the Enabled property is now behaving well.

However, there is no longer a horizontal line drawn under the field's value (regardless of enabled or disabled).

Perhaps related to that, the default background color shown in the designer is white (not "Default color") as opposed to the normal EditText (which doesn't expose color, but seems to default to transparent). I can change this manually to no color. Doesn't affect the continuing absence of the horizontal line.

Hope this helps!
I'm going to remove the support of the background property when set in the designer. I have no other choice because there's a background set by default by the designer (what a strange idea!) and I have no control on it.
 

Informatix

Expert
Licensed User
Longtime User
Just tried v1.51, and the Enabled property is now behaving well.

However, there is no longer a horizontal line drawn under the field's value (regardless of enabled or disabled).

Perhaps related to that, the default background color shown in the designer is white (not "Default color") as opposed to the normal EditText (which doesn't expose color, but seems to default to transparent). I can change this manually to no color. Doesn't affect the continuing absence of the horizontal line.

Hope this helps!
Fixed. Sorry for the inconvenience.
 
Top