Android Question Visual Designer with multiple Panels unable to scale for Multiple screens

[Shubhankar]

Hi

For the past 2 days I have been trying to figure out how to make my visual designer screen appear as the same on multiple screens. I have looked through the forums and tried the various methods suggested.
Methods tried
1. Anchors ( there are 3 panels being used so it only seems to affect the main one and the other just moves a little)
2. Using %x %y (does not seem to work as the inner panels remain fixed)
3.Using dips ( better than %x and %y but still doesn't solve the problem)
4. Tried the multiple auto scales ( different rates and also autoscale all but it does not give me a one screen fit all screen sizes scenario)
5. I know i can use the variant script but as said in the forum a small change will re quire me to change for every layout which im not up for.

Hope someone can help

I have uploaded my files
The 2 designer files I am looking at are excelv2 and excelv1.
You can see the methods i have tried as the comments in the general script

Thanks

 

[Shubhankar]

Hey Lucas

Thanks for the reply
It did make the situation better. Could I double check what you did ?
You added anchors and used the horizontal and vertical center in the general script. Anything else?
However the problem isnt completely solved. When I send it to the UI Cloud there are still some devices with the alignment off. I have attached the photos.

Thanks !!!

 

[LucaMs]

I deleted my post (before your reply) because I forgot to remove your script, which affects the layout, of course.

 

[Shubhankar]

oh i see
So how shld i change the script ?

Thanks for your reply

 

[LucaMs]

Try (deeply) this one.

(I changed some name, removed a panel...)

 

[LucaMs]

I should open a new thread but maybe it would be too much for this question.

Why if I anchor the right panel to the right (right distance = 0) and set, by script, its with to 50%x this does not work as expected?

 

[LucaMs]

[the textsizes are too big; I had not tried it on a device, I just used the various models in the abstract designer]

 

[Erel]

For the past 2 days I have been trying to figure out how to make my visual designer screen appear as the same on multiple screens.

I'm not sure that I understand this statement. How can the layout look exactly the same on different screen sizes?

If you really want it to look the same then put the layout in a panel in the center of the screen.

 

[LucaMs]

Why if I anchor the right panel to the right (right distance = 0) and set, by script, its with to 50%x this does not work as expected?

It seems that the reason is that the anchorage occurs before the execution of the script; is it the right "choice"?

It is the same as you change the sizes by app code, it's right.

 

[Shubhankar]

[the textsizes are too big; I had not tried it on a device, I just used the various models in the abstract designer]

Thanks lucas !
I'm curious though how is it when the layout changes the excel courses box stays the same( i made the text smaller) whereas what can be seen of imageview one changes. Both of them do not have any specific instructions in the script.

 

[Shubhankar]

I'm not sure that I understand this statement. How can the layout look exactly the same on different screen sizes?

If you really want it to look the same then put the layout in a panel in the center of the screen.

hey Erel
thanks for your reply. I tried exactly that. I made a panel in the middle then expanded it to fit all my other items hoping that the panel will scale accordingly. I realised that that particular panel gets scaled but the inner panels remain which is why my layout differs

 

[Shubhankar]

Thanks lucas !
I'm curious though how is it when the layout changes the excel courses box stays the same( i made the text smaller) whereas what can be seen of imageview one changes. Both of them do not have any specific instructions in the script.

also now the layouts are the same in the 2 orientations with different screen sizes but for the landscape orientation the bottom portion cannot be seen?
Do i need to resize or should i put in specific instructions for landscape mode?

 

[Erel]

I made a panel in the middle then expanded it to fit all my other items hoping that the panel will scale accordingly.

If you want the layout to proportionally scale based on the screen size then you need to set all the dimensions in percentage. The result will be poor as the buttons and labels will just be huge.

Note that the two top views should not be anchored horizontally to BOTH sides. Only views that fill most of the available space should be anchored to both sides.

 

[klaus]

I would have done it that way.
Two layout variants one portrait and one for landscape.
No anchors for the views, only for the parent panel.
Uses AutoScaleAll, and calculates spaces between the views and repositions those.
You may finetune it for your needs.
It may also depend on what you want to display under 'Upcoming dates:'.
You could add a Spinner for the upcoming dates.

You should be careful with images!
You must respect the width/Height ratio, which is not the case in your layouts.

 

[LucaMs]

also now the layouts are the same in the 2 orientations with different screen sizes but for the landscape orientation the bottom portion cannot be seen?
Do i need to resize or should i put in specific instructions for landscape mode?

I would do it so:

 

[Shubhankar]

Thanks alot for your reply Erel and Klaus !!!! @klaus I never thought of using the space for alignment. Thanks

 

[Shubhankar]

I would to is so:

Thanks for your reply
I am little confused though. How does having majority of the script in the variant section distinguish between portrait and landscape ?

 

[klaus]

I never thought of using the space for alignment.

Space is a variable and its value is calculated in the DesignerScripts.
It's not a 'special' keyword in the DesignerScripts, i could have given it any name.

 

[Shubhankar]

yeah understood thanks @klaus !!!!

 

[Cableguy]

This discussion reminds me why I always referred to make my guitar by code!