Android Question GUI creation without using layout designer

[Janusz Chmiel]

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.

 

[Erel]

With the exception of custom views, other views can be created programmatically.

Dim b As Button
b.Initialize("b")
Root.AddView(b, 10dip, 10dip, 100dip, 100dip)

 

[Janusz Chmiel]

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.

 

[Alexander Stolte]

"to allow visually impaired B4A developers to code without depending on visual layout designer"

 

[Janusz Chmiel]

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.

 

[josejad]

how to create GUi elements and how to react on some events related to them without adding GUi elements by using layout visual designer

Some guide:

https://www.b4x.com/guides/B4XVisualDesigner/?page=54

 

[Erel]

B4XPages:

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

 

[Janusz Chmiel]

With the exception of custom views, other views can be created programmatically.

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?

 

[josejad]

If you write b. in the IDE, it will give you some clues

Just try:

b.Text = "Start"

Take a look to the link I posted in #6, there are some examples in page 55:

lblTitle.Initialize("")  
lblTitle.Color = Colors.Red  
lblTitle.TextSize = 20  
lblTitle.TextColor = Colors.Blue  
lblTitle.Gravity = Gravity.CENTER_HORIZONTAL + Gravity.CENTER_VERTICAL  
lblTitle.Text = "Title"

 

[Janusz Chmiel]

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.

 

[Janusz Chmiel]

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.

 

[Janusz Chmiel]

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.

 

[Janusz Chmiel]

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.

 

[Janusz Chmiel]

"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.

 

[Janusz Chmiel]

With the exception of custom views, other views can be created programmatically.

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.

 

[Erel]

It doesn't matter whether you use B4XPages or not.
I highly recommend you to use B4XPages as it makes many things simpler. However if you are happy with making things more complicated then simply change Root with Activity.

 

[Janusz Chmiel]

I will be using B4X Pages. It is really much more simple to use such library. I will try to tune GUI position values thanks to help of my sighted mother.

 

[Janusz Chmiel]

B4XPages:

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.

 

[Janusz Chmiel]

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.

 

[Janusz Chmiel]

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.