Android Question Showing all views on panel in designer

In my experience, lots of the issues I had with this was caused by the designer script.

Are you using the designer script?

RB Smissaert said:

Have a panel with multiple view, mainly buttons, labels and edittext. All the views have a vertical anchor, setting the top of the views relative to the panel.
This works all fine, but a number of views at the bottom of the panel don't show in the designer, but instead appear below the bottom of the panel. It is not
a major problem, as they show fine and in the right position in the compiled app, but it would be easier if all the views would show on the panel.
What is the best way to achieve this?

RBS

Click to expand...

There is a designer script, but that only affects horizontal positioning.

RBS

RB Smissaert said:

Have a panel with multiple view, mainly buttons, labels and edittext. All the views have a vertical anchor, setting the top of the views relative to the panel.
This works all fine, but a number of views at the bottom of the panel don't show in the designer, but instead appear below the bottom of the panel. It is not
a major problem, as they show fine and in the right position in the compiled app, but it would be easier if all the views would show on the panel.
What is the best way to achieve this?

RBS

Click to expand...

Just make a bigger variant of layout to have more space to show.
But I would delete the default one then.
But then You will need to adjust all the layout.

It would be much easier for us to help you if you posted a small project showing the problem.

klaus said:

It would be much easier for us to help you if you posted a small project showing the problem.

Click to expand...

Attached zipped .bal file. Does that help?

RBS

My suggestions:
1. Connect your device via USB to the Designer.


You will see in the bottom left corner when the device is connected.



2. On top of Abstract Designer, select Match Connected Device.



And you will see all your views.

klaus said:

My suggestions:
1. Connect your device via USB to the Designer.

View attachment 129708
You will see in the bottom left corner when the device is connected.

View attachment 129709

2. On top of Abstract Designer, select Match Connected Device.

View attachment 129711

And you will see all your views.

View attachment 129712

Click to expand...

Thanks, wasn't aware of that option and that works nice indeed.

RBS

While what @klaus has suggested is useful for seeing the final result on your device, I suggest you change the variant; this will make it easier to make any changes.
The variant for the layout you attached could be set to 320x612.

LucaMs said:

While what @klaus has suggested is useful for seeing the final result on your device, I suggest you change the variant; this will make it easier to make any changes.
The variant for the layout you attached could be set to 320x612.

View attachment 129714

Click to expand...

How did you get to the values 320 x 612?

RBS

RB Smissaert said:

How did you get to the values 320 x 612?

RBS

Click to expand...

Making some proportions, considering the starting height and width of your panel.

LucaMs said:

Making some proportions, considering the starting height and width of your panel.

Click to expand...

The panel is anchored to the activity.
both left and right, left: 0, right edge distance: 0
also both top and bottom, top: 40, bottom edge distance: 0.
Top is 40 as it comes just below my menubar.

Shouldn't I get these values from the physical size of the screen of my phone (Samsung S22)?

RBS

RB Smissaert said:

Shouldn't I get these values from the physical size of the screen of my phone (Samsung S22)?

Click to expand...

Obviously your layout will have to adapt to any device, not just your smartphone (unless you want to create the app only for yourself and only for that device).
For the umpteenth time, that manufacturers should standardize the ratio between height and base of displays, 16: 9 like televisions!

Since your problem was exclusively in the height of the base panel, which overflowed from the variant, I temporarily undocked its "height", to see its value and then I did the various calculations.

I think that a minimum height of the views, expressed in dips, should be taken into consideration from the beginning. A Button, for example, I think it shouldn't be lower than 45 dips; Labels with a single line of text 30dips as a minimum.

Starting from these basics, if your layout in height is larger than the 480 dips of the default variant, it is better to enlarge it, proportionally compared to the 320 dips of the width.

LucaMs said:

Obviously your layout will have to adapt to any device, not just your smartphone (unless you want to create the app only for yourself and only for that device).
For the umpteenth time, that manufacturers should standardize the ratio between height and base of displays, 16: 9 like televisions!

Since your problem was exclusively in the height of the base panel, which overflowed from the variant, I temporarily undocked its "height", to see its value and then I did the various calculations.

I think that a minimum height of the views, expressed in dips, should be taken into consideration from the beginning. A Button, for example, I think it shouldn't be lower than 45 dips; Labels with a single line of text 30dips as a minimum.

Starting from these basics, if your layout in height is larger than the 480 dips of the default variant, it is better to enlarge it, proportionally compared to the 320 dips of the width.

Click to expand...

OK, I understand and will have to do some further thinking what the best approach is for me.
Originally, I coded only for my own personal use, but will now have to consider other devices.

RBS

My answer was for the specific question.

Making a layout for almost any screen size can become a 'complicated' subject.
It depends on what you want to display at the same time on what screen size.
Trying to display the content of a smartphone on a tablet will always look bad, the same in the other direction.
Then, what is a small screen and what is a big screen ?
Today, Android devices cover almost any screen sizes between 4' and 12' with no gap in between and with different height / width ratios.
Therefore, you need to define what sceen sizes you want to cover, and adapt the layouts with anchors, designer scripts, AutoScale, also ScrollViews and different layout variants.
These layout variants could be landscape or portrait orientation, small or big screens and any combinations of both.
But all this depends on your application and as said above: what do you want to display on the screen at the same time.
You need to make your decision.

I have an application, not published, which covers 'small and big screens' but with some limitations.
- Layout variants for small screens, less then 6' and layout variants for big screen > 6'.
- On small screens only portrait orientation and on big screens only landscape orientation.
- On the big screens two 'small' screen layout contents are displayed side by side, but of course with different layout variants.
The history of this application is:
- I first developed a tablet version for a friend of mine.
- Then, I wanted also a smartphone version for my personal use, and wrote a smartphone specific one.
- Then I came to the conclusion that maintain two applications with about 80% of the same code is none sense.
- And finally, I merged both with the limitations above.

Translation:
The most used types of smartphone display resolution are:

I don't think there are smartphones with 480x320 displays (yes, there are also smartwatches), so it would be the case that Erel changed the default variant (I would suggest a variant with ratio 1.(7) = 16:9, like that 1920 x 1080). (My next new"Wish" ).