Android Question Layout & anchors

LucaMs

Expert
Licensed User
Longtime User
You can become crazy or at least neurasthenic (like me, at the moment!)

If I have a display having 1280 (160) width (omit the height) and a panel of the same width with four buttons centered:

upload_2015-1-10_1-5-51.png



I can not get the centering of the buttons on a display having 800 (160) width.

The mandatory anchor feature (left or right, if not both) does not allow an automatic adjustment. Or maybe I'm wrong?
 

stevel05

Expert
Licensed User
Longtime User
It's simpler if you wrap the buttons in a panel, and center that.
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
In this case I could do as you say, but imagine other situations.

The Anchor should be optional, I think.

I'm trying for few hours and to me it seems that the value Right Edge Distance, for example, will not be scaled by AutoScaleAll
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
The Anchor should be optional,
Leaving the Anchor as LEFT / TOP is exactly the same as before.
Only RIGHT / BOTTOM and BOTH are new.
The Right Edge Distance is scaled by AutoScaleAll !
To better see it, change AutoScaleRate(1).
If you want to downscale from a big screen to a small screen you should use AutoScaleRate(1).
 
Upvote 0

udg

Expert
Licensed User
Longtime User
If you want to downscale from a big screen to a small screen you should use AutoScaleRate(1).
Hi Klaus,
I generally design for the standard 320x480 (scale=1,160dip) or its landscape counterpart 480x320 and then make large use of Designer Scripts to take in account different screen sizes (I also stubbornly tend to avoid variants..). That is mainly an exercise of "imagination" since I only have a 10" tablet, but fortunately the UI Cloud feature comes to rescue. Anyway it is a time consuming process.

Do you advice me to design for my device screensize and resolution (eventualy scaled to 160dpi) and then set AutoScaleRate(1)+AutoScaleAll as last lines in the script?
Would that proportionally shrink everything for smaller devices? If yes, any other element to consider?

Thank you.
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
It depends on the application and what you want to display on a big screen and on a small screen.
Me too, I mostly use the 'standard' screen size (portrait and landscape if needed) and use Anchors, DesignerScripts and AutoScaleAll for upscaling.
I use also my Scale Module when I have views added in the code or want true %x and %y scaling.
And I also have used variants, one portrait for small screens and one landscape for big screens.
The problem with downscaling from a big screen to a small screen with and AutoScaleRate less than 1 the views are not downscaled enough.
Trying to downscale a 10'' screen to a 3.5'' screen is, for me, non sense. All the views would be too small on the 3.5'' screen.
 
Upvote 0

udg

Expert
Licensed User
Longtime User
Thanks Klaus. Your considerations are always valuable.
BTW, I often try to have the layout I'm working on looking good (enough) even on the 2.8" UI Cloud device :) ..honestly, a waste of time.
The smallest one against which I really test any layout is the Samsung I9000 4".
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
Leaving the Anchor as LEFT / TOP is exactly the same as before.
Only RIGHT / BOTTOM and BOTH are new.
The Right Edge Distance is scaled by AutoScaleAll !
To better see it, change AutoScaleRate(1).
If you want to downscale from a big screen to a small screen you should use AutoScaleRate(1).

Thank you very much for your constant presence, Klaus.

I use the Anchor only since yesterday, so it's very likely that I'm wrong, but ...

If I try to create that simple panel with the four buttons with the old designer (and unfortunately I can not because I can not have two versions of B4A) and then use the Scale module, with two lines I get the desired result.

I will do other tests on Anchors but, for the moment, it is more a nuisance than a useful thing, for me. It can be useful in a PC, when you resize a form on a screen, which, among other things, will always have only one dpi.

Can you automatically get that example?

Whichever way I set the Anchor, the buttons do not keep their distance (in percent) between them.


Thanks again.
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
Hi Klaus,
I generally design for the standard 320x480 (scale=1,160dip) or its landscape counterpart 480x320 and then make large use of Designer Scripts to take in account different screen sizes (I also stubbornly tend to avoid variants..). That is mainly an exercise of "imagination" since I only have a 10" tablet, but fortunately the UI Cloud feature comes to rescue. Anyway it is a time consuming process.

Do you advice me to design for my device screensize and resolution (eventualy scaled to 160dpi) and then set AutoScaleRate(1)+AutoScaleAll as last lines in the script?
Would that proportionally shrink everything for smaller devices? If yes, any other element to consider?

Thank you.

I think that I will not use the standard, for three reasons:

1) its dimensions are related to old devices, probably no longer exist with those dimensions;

2) there is not enough space;

3) using as a base variant (two variants, for portrait and landscape) of average size is easier to downsize and upsize.
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
I have attached the base to get that panel with buttons.

The base is 320x480-160 + 480x320-160 with AutoScaleAll. Default anchors.

Result: useless, unless you have a device with 320x480-160 :D
 

Attachments

  • lm anchors test.zip
    7.2 KB · Views: 356
Upvote 0

RandomCoder

Well-Known Member
Licensed User
Longtime User
If I try to create that simple panel with the four buttons with the old designer (and unfortunately I can not because I can not have two versions of B4A) and then use the Scale module......
Surprise, yes you can have more than one version of B4A installed! :D
Just make sure to install into different directories. I'm currently running V3.82 and V4.0 and when I have time to BETA test I also run that alongside my current version. Projects are not backward compatible though.
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
I'm afraid that you expect something from the Anchores which can't or don't do !
In your example with the four buttons, anchor doen's mean that the 4 buttuns will be spread over the width.
You need to do this in the DesignerScripts.
If you set for the most right button the Anchor to RIGHT the button right position will be the Right Edge Distance multiplied by the scale nothing else.
You should play a bit with different layouts and look what happens to understand its behaviour.
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
I'm afraid that you expect something from the Anchores which can't or don't do !
In your example with the four buttons, anchor doen's mean that the 4 buttuns will be spread over the width.
You need to do this in the DesignerScripts.
If you set for the most right button the Anchor to RIGHT the button right position will be the Right Edge Distance multiplied by the scale nothing else.
You should play a bit with different layouts and look what happens to understand its behaviour.

No, I do not expect that from anchors.
I say that without the anchor (which unfortunately can not be disabled) is the AutoScaleAll that should get that result, as the Scale module does.

Now I want to try (again, if I'm not mistaken) the effect of Scale.ScaleAll on that layout!
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
I say that without the anchor (which unfortunately can not be disabled)
Again !
There is no need to disable them !
If you leave LEFT and TOP, which are set by default, they are EXACTLY as before !

The Scale module offers more possibilities than AutoScale.
The Scale module allows two scale factors one for X and one for Y. In this case, with a scale rate of 1 gives exact %x and %y scaling, which is not the case with AutoScale.
In the Scale module with Scale.ScaleAllDS scales the same way as AutoScale does.
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
I definitely made the confusion (I should turn on the computer when I'm awake :D).

1) In the first post was a panel wide 100%x, not as in the project that I have attached
2) I forgot to set FullScreen and IncludeTitle
3) Vertical Anchor of panel must be set to Bottom.

done that, I get this on my 480x800-240:
upload_2015-1-10_18-15-22.png


Forget it, I had not saved the change Bottom (panel).

The most right button is still so, anyway, off screen
 
Last edited:
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
Well, Klaus, it seems that you are right: leaving the anchors to LEFT and TOP and using my usual method,

Scale.SetReferenceLayout(480, 800, 1.5, True, False) - (creating the variants according to these data)
Scale.ScaleAll(Activity, True)

I get the right result as always.

So probably I'll never use the "new" features of the Designer, but still your Scale Module :D

Thanks again.
 
Upvote 0
Top