B4A Library [B4A] [B4i] [XUI] MetroUI_TextView

Hello,

We have made our first special component and put it into use. We Have No Expectations. If you want, you can take the codes with winrar and open B4Xlib codes, edit and duplicate them. Because Sharing is Good.

Report bugs and requests to us in response.

1. gif



MetroUI_TextView

Authors : @Ertan, By_Cod3rs
Versions :
3.3

Versions :

V1.00
-Release

V2.00

  1. - The library has been optimized.
  2. - Hint Up Enable feature added. With this feature;
  3. - Hint Text can now customize its color as you go up.
  4. - Hint Text can now change its name when going up.
  5. - Enable the "Hint Up Enable" feature to enable these features.
Minor Error Arrangement :
If there was an article in the box, the Hint Text was below. This problem has been fixed.

View;


2.gif


V2.01
  1. Fixed the background to be white

V2.02
  1. iOS Done Button Visible Bug Fixed.
V2.03
  1. For ios, clicking the "Done" button on the keyboard, the keyboard hide event has been added.
V2.04
  1. For android, password mode bug fixed.
V2.50
  1. You can change the color of Hint Name background as you wish.
V3.00
  1. Some major bugs have been fixed.
V3.2
  1. iOS Bug Fixed.
  2. For iOS, the problem with corner radius has been fixed.
V3.3
  1. https://www.b4x.com/android/forum/threads/b4a-b4i-xui-metroui_textview.124848/post-831773 The error in this link has been fixed.

MetroUI_TextView
  • Events:
  • TextChanged (String as oldtext, String as newText)
  • FocusChanged (HasFocus as Boolean)
  • EnterPressed
  • DoneClick
--------------------------------------
  • Designer Features:
  • Background Corner Radius
  • Background Color
  • Border Width
  • Border color
  • Hint Label Color
  • Line Color
  • Done Button Color
  • Text Color
  • Hint Name
  • Password Mode
  • Single Line Box [B4A]
  • Text Box Input Type
  • Done Button Visible
  • Done Button Keyboard Visible
  • Icon Image File
  • Error Image File
  • Warning Image File
  • Hint Up Enable
  • Hint Name Up Color
  • Hint Name Up Text
V2.50 NEW DESIGN FEATURES;
  • Hint Background Color

Screenshot_40.png


Android Preview:


iOS Preview:


Note: For B4A, you need to enable IME Library. Because click the done button to hide the keyboard.
Note: For B4i, you need to enable the iHUD library. Because for the alert notification to appear.


You can adjust the Error and Warning pictures as you wish. This is up to you.

  1. With the Done button you can hide the keyboard. You can search for Click Event and do whatever you want.
Notification for error areas in the last version;
Save all your designs again. (You are using MetroUI_TextView)
 

Attachments

  • errorimage.png
    errorimage.png
    6.8 KB · Views: 200
  • warningimage.png
    warningimage.png
    3.1 KB · Views: 213
  • MetroUI_B4A .zip
    39.7 KB · Views: 402
  • Screenshot_40.png
    Screenshot_40.png
    21.7 KB · Views: 828
  • MetroUI_B4i.zip
    61.6 KB · Views: 94
  • MetroUI_TextView.B4xlib
    14.8 KB · Views: 99
Last edited:

WhiteWizard

Member
Licensed User
It´s the example without any mods.
Screenshot_20201203-182122.jpg
Sin título.png


And when I change The Hit Label color to #FFB0AEAE I get this
Screenshot_20201203-183551.jpg
 
Last edited:

Ertan

Active Member
Licensed User
It´s the example without any mods.
View attachment 103947View attachment 103948

And when I change The Hit Label color to #FFB0AEAE I get this
View attachment 103949

And when I change The Hit Label color to #FFB0AEAE I get this
Yes it works exactly right. I will show you a way.

The "High contrast text" setting is turned on in your device settings. That's why it doesn't show colors. I want you to turn this setting off and try again.

High contrast text

High contrast makes text easier to read on your device. This feature fixes the text color as either black or white, depending on the original text color.
To turn off high contrast text, follow these steps:
  1. Open your device's Settings app.
  2. Tap Accessibility.
  3. Turn off High contrast text.
Note: High-contrast text is an experimental feature, so it might not work correctly everywhere on your device.
 

WhiteWizard

Member
Licensed User
High contrast text

Thanks Ertan, that must be the problem. However another isue is that when I try to populate a new MetroUI_TextView, the B4A Designer shows an error "Unknown View MetroUI_TextView". This also happens with the example. It's works anyway, you can run it perfectly, but if you want to populate another control under B4A 10.2, you wont be able to. Anyway I found a workarround, I copy the control form the example App to my new app, later on, you can duplicate the control.
 

Ertan

Active Member
Licensed User
High contrast text

Thanks Ertan, that must be the problem. However another isue is that when I try to populate a new MetroUI_TextView, the B4A Designer shows an error "Unknown View MetroUI_TextView". This also happens with the example. It's works anyway, you can run it perfectly, but if you want to populate another control under B4A 10.2, you wont be able to. Anyway I found a workarround, I copy the control form the example App to my new app, later on, you can duplicate the control.
this is a small IDE bug.
Please see, b4a next version solved.
 
Last edited:

WhiteWizard

Member
Licensed User
I think there's a bug when you need to initialize the control with some defaut text. I Mean, supouse you enter the User ID, later on you store that info and when the user login again later on, you need to fill the EditBox with the recover ID. I do this by setting up the MetroUI_TextView.Text property, but when I do it, the control fails to displays correctly, I mean, the hint label appears hiding this default text, and when I type a new character, the text remain hidden by the Hint, and only this hint can be seen, it look that only works starting with an empty string.
Also there's the posibility to use a transparent background for the Edit Text control, but when the Hint label goes up, its background it's allways white, this force that the entire form to be background white.
All this is done in the Sub B4XPage_Appear of a B4XPages project.
This is my best shoot to solve all those problems (all but the Hint Up background):
B4X:
    Password.Text = Main.Config.Clave         ' Set the Text content
    Password.NativeObject.RequestFocus     ' Force Hint Label to go up
    Password.MyTextBoxB4X.SelectionStart = Main.Config.Clave.Length     ' Force Cursor to move to the end of the entry (default is the begining)
 
Last edited:

Ertan

Active Member
Licensed User
I think there's a bug when you need to initialize the control with some defaut text. I Mean, supouse you enter the User ID, later on you store that info and when the user login again later on, you need to fill the EditBox with the recover ID. I do this by setting up the MetroUI_TextView.Text property, but when I do it, the control fails to displays correctly, I mean, the hint label appears hiding this default text, and when I type a new character, the text remain hidden by the Hint, and only this hint can be seen, it look that only works starting with an empty string.
Also there's the posibility to use a transparent background for the Edit Text control, but when the Hint label goes up, its background it's allways white, this force that the entire form to be background white.
All this is done in the Sub B4XPage_Appear of a B4XPages project.
This is my best shoot to solve all those problems (all but the Hint Up background):
B4X:
    Password.Text = Main.Config.Clave         ' Set the Text content
    Password.NativeObject.RequestFocus     ' Force Hint Label to go up
    Password.MyTextBoxB4X.SelectionStart = Main.Config.Clave.Length     ' Force Cursor to move to the end of the entry (default is the begining)
I do not fully understand what you mean because I use translation, sorry.
Does this issue apply to iOS? Is there on Android?
I tested both platforms.

Into Textview
B4X:
MetroUI_TextView1.Text = "Ertan"
I filled it by typing. The variable hindi script scrolled up smoothly.

Would you take a video? We can understand and solve the problem faster.
thank you.
 
Last edited:

WhiteWizard

Member
Licensed User
I generate an empty B4XPages project and was able to duplicate the problem, here's the ofending code and, attached, the project.

B4X:
Sub B4XPage_Appear
    MetroUI_TextView1.Text = ""
    MetroUI_TextView2.Text = ""
    
    'B4XPages.SetTitle(Me,"Test")
    
    MetroUI_TextView1.Text = "First Test"
    MetroUI_TextView2.Text = "Second control"
    
End Sub
 

Attachments

  • MetroTest.zip
    11.1 KB · Views: 82

Ertan

Active Member
Licensed User
I generate an empty B4XPages project and was able to duplicate the problem, here's the ofending code and, attached, the project.

B4X:
Sub B4XPage_Appear
    MetroUI_TextView1.Text = ""
    MetroUI_TextView2.Text = ""
  
    'B4XPages.SetTitle(Me,"Test")
  
    MetroUI_TextView1.Text = "First Test"
    MetroUI_TextView2.Text = "Second control"
  
End Sub
Can you test it for me? v2.05
If you can get "Unexpected event (missing RaiseSynchronousEvents): mytextbox_textchanged" error in the log report, it is only valid in debug mode. Release will not appear either. The reason for this is that we write the code in Appear. I will look into the solution.
If you get the result you want, I'll update the library.

the attachment has been deleted. Current version #1
 
Last edited:

WhiteWizard

Member
Licensed User
It looks like it´s working, I´m still testing in B4A for now. Only ¨problem¨ that I found is that the background color of the Upper hint is still solid white, but, this can be fixed like in the TxEdit CustomControl. The ¨Unexpected event¨ is raised in Debug mode like you set, but the program seems to run anyway.
I really like you´r control, and hope to use it in a big form project under B4i for iPad that I need to develop in the next month, I´ll report any problem then, cos´ now I just using it for User/Password entry.
Excelent work!
Thank you
1607279252408.png
1607279369998.png
 

Attachments

  • 1607279300623.png
    1607279300623.png
    231.4 KB · Views: 69

Ertan

Active Member
Licensed User
It looks like it´s working, I´m still testing in B4A for now. Only ¨problem¨ that I found is that the background color of the Upper hint is still solid white, but, this can be fixed like in the TxEdit CustomControl. The ¨Unexpected event¨ is raised in Debug mode like you set, but the program seems to run anyway.
I really like you´r control, and hope to use it in a big form project under B4i for iPad that I need to develop in the next month, I´ll report any problem then, cos´ now I just using it for User/Password entry.
Excelent work!
Thank you
View attachment 104054View attachment 104056
I'll add hint name background setting for you.

The Background feature has made the main background transparent.
We also use it in one of our applications and it runs smoothly .. Let's see :)
 

WhiteWizard

Member
Licensed User
V2.50 (most current version)
  1. You can change the color of Hint Name background as you wish.
I dont know if allways, but when I call the ClearError, the EditText background is set to white. Let's say you have an User and Password field, when you hit the login button, you need to clear the errors on those fields, wheter or not the field status is with error, warning or normal. I don't know if you understand, but if I type the User field but left empty the password field, and then I press the Login Button, an Error (Password is required) is triggered, but then the edit is redirected the the password field for complexion, but this all time the error condition and message remain, now when the user ccompletes this field and press Login again, the first action is clear the errors in the entry fields, then try to login, and if there are errors, trigger another error condition and message, and return to edit the user. Each time I call the ClearError method, the entry fields background is set to white.
 

GanjaKyp

Active Member
Licensed User
Hi, I have error with last lib from first post and B4A 10.2

B4X:
metroui_textview_designercreateview (java line: 197)
java.lang.NumberFormatException: For input string: "null"
    at java.lang.FloatingDecimal.readJavaFormatString(FloatingDecimal.java:1306)
    at java.lang.Double.parseDouble(Double.java:547)
    at anywheresoftware.b4a.BA.ObjectToNumber(BA.java:684)
    at b4a.example.metroui_textview._designercreateview(metroui_textview.java:197)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:213)
    at anywheresoftware.b4a.objects.CustomViewWrapper.AfterDesignerScript(CustomViewWrapper.java:67)
    at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:162)
    at anywheresoftware.b4a.objects.ActivityWrapper.LoadLayout(ActivityWrapper.java:209)
    at b4a.example.main._activity_create(main.java:351)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:213)
    at b4a.example.main.afterFirstLayout(main.java:105)
    at b4a.example.main.access$000(main.java:17)
    at b4a.example.main$WaitForLayout.run(main.java:83)
    at android.os.Handler.handleCallback(Handler.java:754)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:163)
    at android.app.ActivityThread.main(ActivityThread.java:6221)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:904)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:794)
    at de.robv.android.xposed.XposedBridge.main(XposedBridge.java:107)
 

Ertan

Active Member
Licensed User
Hi, I have error with last lib from first post and B4A 10.2

B4X:
metroui_textview_designercreateview (java line: 197)
java.lang.NumberFormatException: For input string: "null"
    at java.lang.FloatingDecimal.readJavaFormatString(FloatingDecimal.java:1306)
    at java.lang.Double.parseDouble(Double.java:547)
    at anywheresoftware.b4a.BA.ObjectToNumber(BA.java:684)
    at b4a.example.metroui_textview._designercreateview(metroui_textview.java:197)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:213)
    at anywheresoftware.b4a.objects.CustomViewWrapper.AfterDesignerScript(CustomViewWrapper.java:67)
    at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:162)
    at anywheresoftware.b4a.objects.ActivityWrapper.LoadLayout(ActivityWrapper.java:209)
    at b4a.example.main._activity_create(main.java:351)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:213)
    at b4a.example.main.afterFirstLayout(main.java:105)
    at b4a.example.main.access$000(main.java:17)
    at b4a.example.main$WaitForLayout.run(main.java:83)
    at android.os.Handler.handleCallback(Handler.java:754)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:163)
    at android.app.ActivityThread.main(ActivityThread.java:6221)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:904)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:794)
    at de.robv.android.xposed.XposedBridge.main(XposedBridge.java:107)
Save all the designs you used the component and try again.
 

Apip Bayok

Member
Hello @Ertan
Thank You for sharing great UI Lib, today I found some bug in it.
When this view attaches inside activity without a panel, it looks strange. Maybe this picture will explain it.
bug.png
 

Ertan

Active Member
Licensed User
Hello @Ertan
Thank You for sharing great UI Lib, today I found some bug in it.
When this view attaches inside activity without a panel, it looks strange. Maybe this picture will explain it.
View attachment 104516
Upload a project example and what version are you using?
 

WhiteWizard

Member
Licensed User
Another thing is that in Android, when you have 2 Metro controls populated in the screen, and you press the NEXT button in the keyboard while you are editing the first control, the focus moves to the second control without giving the posibility to verify the first field. I mean, when you hit DONE inside the field, the done sub is triggered and there you can check the conditions to accept or reject the input, in case of error, I send a focus to the field and fire the error condition, the cursor allways remains in the first field. But if the user hits NEXT in the keyboard, the focus moves to the next Metro field,then, the change focus event is triggered, there, I check the error condition of the first field, fire the error, re focus on the first control, but visually, the focus goes back to the first control, giving an ugly animation cos the cursor goes to the next field and then back to the first. I think the NEXT button in the keyboard shoud fire the DONE event in the control, and the programmer manually can focus the next control or trigger the error on the actual field. This way, the control will work on both patterns, check errors in each field or check errors upon completion of the whole form.
 

WhiteWizard

Member
Licensed User
This control is not working anymore with B4I 7.20, in the example, just after the program inits:

Error occurred on line: 302 (MetroUI_TextView)
Error reading from stream: Error Domain=NSPOSIXErrorDomain Code=21 "Is a directory" UserInfo={_kCFStreamErrorCodeKey=21, _kCFStreamErrorDomainKey=1}
 

Ertan

Active Member
Licensed User
V3.1 (most current version)
  1. iOS Bug Fixed.
This control is not working anymore with B4I 7.20, in the example, just after the program inits:

Error occurred on line: 302 (MetroUI_TextView)
Error reading from stream: Error Domain=NSPOSIXErrorDomain Code=21 "Is a directory" UserInfo={_kCFStreamErrorCodeKey=21, _kCFStreamErrorDomainKey=1}
Can you download the samples and try again?
 
Top