Android Question GUI creation without using layout designer

The aim of this thread is to allow visually impaired B4A developers to code without depending on visual layout designer. In other words, how to create GUi elements and how to react on some events related to them without adding GUi elements by using layout visual designer. Visual designer would be only used minimally to allow compiled app to function.
 
Solution
To upload your project, you should use the link in the B4XNainPage to zip the whole project
I AM very sorry. I will never upload only some files of A whole project.

Here is whole .zip project tree generated by The IDE function which you have recommeded to use.
I have wanted to save server storage space of yours forum. So I have only uploaded some files. It is good, that it is possible to upload whole projects, because core developers can easily assist with The problems.
The aim of this thread is to allow visually impaired B4A developers to code without depending on visual layout designer. In other words, how to create GUi elements and how to react on some events related to them without adding GUi elements by using layout visual designer. Visual designer would be only used minimally to allow compiled app to function.
 
Upvote 0
Thank you for yours answer. So is it possible to also add edit box programmatically with hint text? Could you post An example for adding two edit boxes with two hints?
Thank you very muchfor yours answer.
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
B4XPages:
B4X:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private EditText1 As EditText
    Private EditText2 As EditText
End Sub

Public Sub Initialize
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    EditText1.Initialize("EditText1")
    EditText2.Initialize("EditText2")
    EditText1.Hint = "Hint 1"
    EditText2.Hint = "Hint 2"
    Root.AddView(EditText1, 10dip, 10dip, 200dip, 50dip)
    Root.AddView(EditText2, 10dip, 70dip, 200dip, 50dip)
End Sub
 

Attachments

  • Project.zip
    13.7 KB · Views: 146
Upvote 0
With the exception of custom views, other views can be created programmatically.
B4X:
Dim b As Button
b.Initialize("b")
Root.AddView(b, 10dip, 10dip, 100dip, 100dip)
Dear MR professional,
But how to assign text to The button by usingyours advice? Is it also possible to assign button text from .B4A module? I can not have GUI elements without texts. So if I will type

Dim b As Button
b.Initialize("b")
Which next command should I type to assign some text to my button such as Start, Pause or what ever I need?
 
Upvote 0

josejad

Expert
Licensed User
Longtime User
If you write b. in the IDE, it will give you some clues

1629884542464.png


Just try:
B4X:
b.Text = "Start"

Take a look to the link I posted in #6, there are some examples in page 55:
B4X:
lblTitle.Initialize("")  
lblTitle.Color = Colors.Red  
lblTitle.TextSize = 20  
lblTitle.TextColor = Colors.Blue  
lblTitle.Gravity = Gravity.CENTER_HORIZONTAL + Gravity.CENTER_VERTICAL  
lblTitle.Text = "Title"
 
Upvote 0
Dear MR José J,
Thank you very much for yours wonderful advices. I Am very appreciating them. I AM so over joyed, that it is really code in B4A without layout designer. And I publiclycongratulate all B4A IDe and libraryes dedevelopers because oftheir very complex programmers work. Really, very verywell done. Now, I can concentrate on The task, which I want to do. Verbal quize. It will be my personal helper app so I will not be sad, if GUI will look ugly. Important is only for Me, that appwill not crash and screen reader will cooperate with it well.By The way, it is very nice that it is even possible write GUI layout with no needto specify GUI element positioning. And that it is even possible to specify letters syze. It is ideal especially if programmer want to code for people with low vision with Therestsof seeing. So very wll done and I will be patiently read source codes of B4A apps and I will patiently and carefully readThe manuals.I Am giving thanks all of you, who are participating onthis discussion. You are very friendly programmerscommunity. And I Am very glad, that I Am among us.
 
Upvote 0
Please, could you send Me direct download link to yours B4A library, which you have used in this example? Unfortunately, B4A Ide contain inaccessible GUI to download new components by using SDK manager and library manager is also problematically accessible, so in praxe, I AM adding names of libraryes and their numbers manually inside .b4a module. Fortunately, it is possible to do that. YOurs example with hints look very promise so I would like to use yours library to create GUi without layout designer.
 
Upvote 0
Please, could you send Me direct download link to yours B4A library, which you have used in this example? Unfortunately, B4A Ide contain inaccessible GUI to download new components by using SDK manager and library manager is also problematically accessible, so in praxe, I AM adding names of libraryes and their numbers manually inside .b4a module. Fortunately, it is possible to do that. YOurs example with hints look very promise so I would like to use yours library to create GUi without layout designer.
Oh I Am very very sorry. This library is allready prepackaged inside B4A installation. Yours code has helped Me very much. Hints are perfectly accessible with screen reader.
 
Upvote 0
This approach would be ideal for visually impaired B4A programmers. But unfortunately, routine requires object position values. And I assume, that numbers are mandatory, so I can not simply ignore them if I would want to make 45 editable fields for example.

Root.AddView(EditText1, 10dip, 10dip, 200dip, 50dip)

So I assume, that if I were add
Root.AddView(EditText1
I could get an error when compiling. It is so sad. Is there any chance to code without object position values? Sure I know, that Ugly will be acceptable only for screen reader users with no sight at all.
Thank you very much for yours good example code.
 
Upvote 0
"to allow visually impaired B4A developers to code without depending on visual layout designer"
You have given Me The best possible solution which is available while programming by using B4A. I really do not have to use Layout designer. The only one limitation is The object position values. I will try to experiment. What Android routines will do if I will give every object The same position values? If I will occur severe crash of Android system UI or no. Sure, system will not be very happy because of my programmers behaviour with object position values, but I Am being forced to use this strategy. Because my brain is not smart enough to develop automated object positioning on The screen according to The font name, letters syze and theme used. It is possible in The computer world, sure on Windows inside C source code of Autohotkey. But mathematical routines would had to be changed according to screen proportions of Android device. But thanks to autohotkey developers I know, that it is really possible to develop fully automated object position calculations, which produces readable may be not so estetically nice GUI, but it is good. But using those routines to [B4X] would be may be too complex or even impossible. Majority of B4A respect its visual form, so developing such complex routines would be project for 1 or less percentage of B4A users. So I will experiment with numbers what will happen. Fortunately for Me, I have older phone which contain accessible cover so I can remove battery in case of severe Android crash, but I do not anticipate such situation. When I have used Free Pascal compiler, when I have directly called Android API functions to create GUI objects, I have even tried to simply ignore object position values at all. GUI have been not very nice, it was ugly for sighted, but letters were not overlapped. Sure, for example, texts of buttons have been too far from each others. But some internal algorithms of Android are doing something to display at least A little readable GUI.
So thank you all of us for very big patience with Me. And thank you for [B4X] AS Views.
 
Upvote 0
With the exception of custom views, other views can be created programmatically.
B4X:
Dim b As Button
b.Initialize("b")
Root.AddView(b, 10dip, 10dip, 100dip, 100dip)
And also if somebody would not use B4X pages. And if somebody would want to create GUi elements without layout designer. Is it possible or it is really only possible only by using B4X pages for now? If is it possible even without 4X page, please send a .bas file as a example. Now I can add objects by using layout designer, but I AM helpless to add their textual descriptions. And because .bal files are something like .exe files, I can not simply only change text descriptions of previously created objects. If I would do that, even if I use reliable binary editor, I will always get out of system memory message when compiling project from IDE. .bal files have not been developed to simply change them outside layout designer. Really, I would never intrude members of this forum about this issue.
Thank you for yours help.I Am now creating 44 editable fields with hint texts. And I will be very curious, whatwill happen after compilation.
 
Upvote 0
B4XPages:
B4X:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private EditText1 As EditText
    Private EditText2 As EditText
End Sub

Public Sub Initialize
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    EditText1.Initialize("EditText1")
    EditText2.Initialize("EditText2")
    EditText1.Hint = "Hint 1"
    EditText2.Hint = "Hint 2"
    Root.AddView(EditText1, 10dip, 10dip, 200dip, 50dip)
    Root.AddView(EditText2, 10dip, 70dip, 200dip, 50dip)
End Sub
So I have tried to create 45 editable fields. I have only tried to add two hints texts, other hint texts have been empty. I have observed very interesting programmers effect. Screen reader and Android 4.1.2 routines to get object tree from GUI have not allowed Me to switch between editable fields from The first to The last one. First editable box have not been really The first according to The order inside The source code. I have even tried to slightly change DIP values for first and second Editable field, but it did not helped. The only one thing which I know is, that if I have created only 2 editable fields, object tree have been correct. So When I have used Talkback gesture swipe right or swipe left, screen reader read really first and second hint of Editable field. As I assume, I have created too many editable fields with hints and this idea is not compatible with GUi related routines. So as I can analyse, I can not create so much editable fields. Idea was. create 45 editable fields with hint texts. If I type correct answer no matter on which editable field number, algorithm should display message by using build in Msgbox command with The right word. But I Am afraid, that I will have to use only one editable field and only ListView with list of words. But how to add more than one item to The one ListView GUI object? I assume, that it should be identical like adding editable fields hints. But I can only hope, that I will be able to add 45 items without problems, that object hiearchy accessible tree for screen reader will not shown randomly organized items.
But thanks to B4X pages, it is really possible to add objects very efficiently. If there is An limitation, how many GUi elements can be created, please let Me know.
 
Upvote 0
It is very important to use accessibility library when someone want to develop fully accessible GUi by using B4A. This is The reason, why this library is The part of installation package.
Especially object methods
SetNextFocusDown
SetNextFocusLeft
SetNextFocusUp
SetNextFocusRight
I can only hope, that it will also help if user uses finger tip with Talkback for moving left and right, that it will not only work for hardware keyboard or software keyboard if user press one of four arrow keys.
So I will be doing my best to also solve this little problem. But if it will work even with The same GUI position values, I will be very satisfied.
 
Upvote 0
Here is .bas module with 45 editable fields. Every field contain hint text with item number to debug my issue easily. When I execute The compiled app, Talkback report field number 3 as The first when swiping right. One object before this reported item is Main page.
After 3 Talkback report object number 1. After this, Talkback report objects in a right order. 4,5, ETC. But problem occur in editable field with hint text 22. After swiping right, Talkback report edit field with hint text 24. After 24, Talkback report hint text 23. Aftwer hint text 36, screen reader even report editable field 37 as without hint text at all.
Please, is it possible to correct this accessibility object hiearchii issue? Or is it only possible by using right object coordinates? I have tried to use Accessibility library but I do not know, if I have placed command to The right module or its code place.
 

Attachments

  • B4XMainPage.bas
    7.6 KB · Views: 106
Upvote 0
Top