LAWM graphical form designer bug – visual components stay invisible on Android

[neuro]

When building Android app with Lazarus graphical form designer,
newly added visual components are added to the *.lfm file in the same order as they are added to TAndroid module MainForm.
However there is a serious bug when newly added visual components have property “PosRelativeToParent” at first [rpTop], then [rpBottom] and then again [rpTop].
Here is the example:
   

Code: Pascal  [Select][+][-]

1. object EditText1: jEditText
2.   PosRelativeToParent = [rpTop]
3. end    
4.  
5. object EditText2: jEditText
6.   PosRelativeToParent = [rpBottom, rpLeft]
7. end
8.  
9. object EditText3: jEditText
10.   PosRelativeToParent = [rpTop]
11. end

When Android app is compiled and run, there is a problem: the third visual component EditText3 stays invisible and it is impossible to make it visible on the screen.

The bug workaround solution is following.
1) Close project in Lazarus;

2) Open *.lfm file with text editor and manually rearrange the order of visual components like this:

Code: Pascal  [Select][+][-]

1. object EditText1: jEditText
2.   PosRelativeToParent = [rpTop]
3. end
4.  
5. object EditText3: jEditText
6.   PosRelativeToParent = [rpTop]
7. end
8.  
9. object EditText2: jEditText
10.   PosRelativeToParent = [rpBottom, rpLeft]
11. end

At first must be all visual components which have property “PosRelativeToParent” as [rpTop],
and then below must be all visual components which have “PosRelativeToParent” as [rpBottom].
Save *.lfm file.

3) reopen the project in Lazarus, compile and run app on Android device. Now all visual components are visible.

Above is workaround solution for LAWM graphical form designer bug.
However somebody needs to fix this bug of graphical form designer (for Android apps) – visual components must be rearranged automatically in *.lfm file, when the property “PosRelativeToParent” is changed from [rpTop] to [rpBottom] and vice versa.

[Guser979]

I tried to reproduce it here and I didn't get the error. Could you send the unit and lfm?

Note :  physical device Android 14 . I don't have AVD configured

[neuro]

My project is big and contains dozens of visual components.
I have described the bug using only three visual elements.
In my project each of these three elements have a chain of dozen (child) visual components which are connected via “PosRelativeToAnchor” property.
I am using Lazarus version 2.2.2 (Date: 2022-12-03), but I suspect that the latest Lazarus version has the same bug still present.
The essence of the bug is that a bunch of visual components stay invisible when Android app is run on Android device.
The workaround solution of this bug is manual rearrangement of the order of visual components inside *.lfm file.

[Guser979]

Ok. The most I've used in a project was 40. Maybe there's a limit?

[neuro]

I just created new empty project and added three jEditText as described in first post.
I could not recreate the bug with this simple scenario.
It looks like some additional factors are needed to invoke the bug.
My project is quite big, later I will try delete components one by one, until I am left with minimal number of visual components which reveal the bug.

[neuro]

I tried to reproduce it here and I didn't get the error. Could you send the unit and lfm?

By deleting components one by one from the project, I finally managed to get minimal number of components which reveals the bug.
Now unit and lfm files contain only 5 visual components.
The necessary component for revelation of bug is DrawingView.
When property “jDrawingView1.Visible” is set to “True” then only two components (TextView1 and TextView2) are shown on screen.
When property “jDrawingView1.Visible” is set to “False” then 4 components are shown on screen.
Image with screenshots (from Android device) is attached.

[neuro]

As I wrote in the first post, the workaround solution of this bug is manual rearrangement of the order of visual components inside *.lfm file.
In sample above with 5 visual components, the bug can be overcome by manually moving jDrawingView1 to the bottom of *.lfm file.
The same bug manifests itself not only with jDrawingView, but also with jWebView component.
In my project dozens of visual components became invisible due to this bug, and it was impossible to make them visible.
I spent several days trying to solve the problem, and finally I solved the problem by manually rearranging of the order of visual components inside *.lfm file.

[Guser979]

Yes. Now the problem is clear.

I tried this and it worked. I just don't know how to explain why:

Code: Pascal  [Select][+][-]

1. procedure TAndroidModule1.AndroidModule1JNIPrompt(Sender: TObject);
2. begin
3.  
4. DrawingView1.Visible:=false;SwitchButton1.Visible:=false;
5.  
6. DrawingView1.Visible:=true; SwitchButton1.Visible:=true;
7.  
8. end;

Depending on the situation, it might be interesting to create something in Lazarus to automatically rearrange the order of visual components inside *.lfm file.

In any case, fortunately you found a way to temporarily solve it.

[neuro]

I have traced down the exact source of the bug of invisible visual components.
The bug source is revealed by adding program line:

Code: Pascal  [Select][+][-]

1. jDrawingView1.BackgroundColor := colbrRed;

See the attached screenshot – jDrawingView1 component paints the whole screen with red color, despite the fact, that it has properties (added by default when adding jDrawingView component to the project):

Code: Pascal  [Select][+][-]

1. LayoutParamWidth = lpWrapContent
2. LayoutParamHeight = lpWrapContent

When jDrawingView1 properties are changed to

Code: Pascal  [Select][+][-]

1. LayoutParamWidth = lpExact
2. LayoutParamHeight = lpExact

then jDrawingView1 behaves as expected.

The order of visual components in *.lfm file defines the z-order of visual components on the screen of device.
jDrawingView1 is taking whole screen of the device and overlaps all other visual components and makes them invisible.

In the opening post I incorrectly described the source of the bug.
Now it is clear that the bug is the following:
when jDrawingView component is added to the project, by default it has properties LayoutParamWidth = lpWrapContent and LayoutParamHeight = lpWrapContent.
However these default properties lpWrapContent incorrectly behave on Android device, they behave like lpMatchParent.

In other words, jDrawingView property lpWrapContent has a bug, it behaves like lpMatchParent.
Who can fix this bug?