Android Question B4A AutoScale

[nibbo]

Is AutoScale available in B4A?
If not, do I really have to calculate the size of every control cased on the screen size?
The reason I ask is I have just tried to run my app which was designed for a 10.1 device and runs quite well on all similar devices.
However, I have just tried to run it on the latest Samsung s2 which is 9.7 and none of the controls fit anymore. The controls were added using the Designer so I would expect them to be close but that is not the case.
In my example one of the panels is suddenly half the size so all controls on the right hand side disappear.
The panel is not currently resized in the code.

Thanks

 

[Erel]

Is AutoScale available in B4A?

Yes.

However you need to understand how it works. AutoScale is less important. Anchors and designer script are more important.

Supporting multiple screens - tips and best practices

 

[nibbo]

Thanks Erel, in that case I may be asking the wrong question.
How do I use AutoScale? A lot of threads refer to it but if I try to use it I get Undeclared Variable.
Do I need to include a library?

 

[Erel]

You just need to write AutoScaleAll in the designer script (it is there by default). However AutoScaleAll doesn't do too much. It just slightly increases or decreases the views sizes.

Anchors are much more important...

 

[nibbo]

OK I see where it is used now and it was already there.
So why would a panel shrink to about half it size when shown on a tablet with 0.4 inches less than a tablet that works perfectly?
Attached are some screen shots showing how it renders.
It is not resized in any way in the code.

 

[JonPM]

As Erel already said it is more important to use anchors and designer script. For instance, instead of giving your views an absolute size (i.e. Panel1.Width = 200dip), you should instead give it a relative size (Panel1.Width = 30%x).

Also designer scripts is important so you can create different variants. You will generally want one for phone and one for tablet.

 

[nibbo]

As Erel already said it is more important to use anchors and designer script. For instance, instead of giving your views an absolute size (i.e. Panel1.Width = 200dip), you should instead give it a relative size (Panel1.Width = 30%x).

Also designer scripts is important so you can create different variants. You will generally want one for phone and one for tablet.

So in answer to my original question...
I do have to recalculate the size of all controls in the code...
I.e. if my panel is 30%x and it has eight controls like mine on then I need to make each control a percentage of the 'new' panel.width and then calculate the positions (left/top/height) accordingly within the panel for a decent layout? It just seems a bit long winded.

 

[moster67]

Have a look at the b4a tutorials (Beginner and User guides -you can download them here: https://www.b4x.com/b4a.html) and look up the sections talking about designing and using the designer. They are very well written by fellow b4x-user @klaus. Try the sample-apps he included and you will get a better understanding.

With some patience you'll understand better and get more proficient using B4a and Android.

 

[JonPM]

So in answer to my original question...
I do have to recalculate the size of all controls in the code...
I.e. if my panel is 30%x and it has eight controls like mine on then I need to make each control a percentage of the 'new' panel.width and then calculate the positions (left/top/height) accordingly within the panel for a decent layout? It just seems a bit long winded.

There are various methods to achieve consistent results. But to answer your last question, yes. It can be a bit long winded to achieve consistent layouts across more than 24,000 Android devices.

In your layout what I would do is keep Label2 and Label3 anchored to the Left about 5dip. btnCancel and btnLogin anchored right about 5dip. And set the anchors on the edittext's to BOTH. And in the designer scripts code set left and right to Label2.Right and btnCancel.left. This will scale the edittext across devices but keep the same button and label sizes.

 

[Erel]

So in answer to my original question...
I do have to recalculate the size of all controls in the code...

This is your answer. My answer is that you don't need to calculate any size.
You need to first understand how anchors and designer script work.

 

[nibbo]

OK so why then does the designer look like this:

with horizontal anchor set to BOTH.
But the WSYWIG Designer looks like this:

Labels and edit texts seem to keep the correct scale but the panel does not.

 

[JonPM]

Your anchors are not set on the labels and buttons. You only set the anchor on the panel.

 

[nibbo]

Your anchors are not set on the labels and buttons. You only set the anchor on the panel.

Still don't fully understand why the panel is smaller but hey...
I never even knew you could put code in the Visual Designer so I am putting as much as I can in there and all is OK with the world again.
I have changed a lot of stuff to anchor right which works great as a lot of my views disappearing off the side of the screen.
Thanks for all of the replies.

 

[JonPM]

Still don't fully understand why the panel is smaller but hey...

I can't really say without looking at your Designer values/code. Again it will be worth while for you to read the Designer Scripts section of the B4A Beginner's Guide

 

[nibbo]

I can't really say without looking at your Designer values/code. Again it will be worth while for you to read the Designer Scripts section of the B4A Beginner's Guide

I think it is because I had 'match chosen variant' (i.e. the one I developed the app for) and not the 'match connected device'.
I really must learn to eliminate these things before jumping on the forum...