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

Shubhankar · Dec 14, 2016

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 · Dec 14, 2016

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 · Dec 14, 2016

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

Shubhankar · Dec 14, 2016

oh i see
So how shld i change the script ?

Thanks for your reply

LucaMs · Dec 14, 2016

Try (deeply) this one.

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

LucaMs · Dec 14, 2016

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 · Dec 14, 2016

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

Erel · Dec 14, 2016

Shubhankar said:
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 · Dec 14, 2016

LucaMs said:
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 · Dec 14, 2016

LucaMs said:
[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 · Dec 14, 2016

Erel said:
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 · Dec 14, 2016

Shubhankar said:
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 · Dec 14, 2016

Shubhankar said:
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 · Dec 14, 2016

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 · Dec 14, 2016

Shubhankar said:
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 · Dec 14, 2016

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

Shubhankar · Dec 14, 2016

LucaMs said:
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 · Dec 14, 2016

Shubhankar said:
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 · Dec 14, 2016

yeah understood thanks @klaus !!!!

Cableguy · Dec 14, 2016

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

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

Member

Attachments

Member

Attachments

Expert

Member

Expert

Attachments

Expert

Expert

B4X founder

Expert

Member

Member

Member

B4X founder

Expert

Attachments

Expert

Attachments

Member

Member

Expert

Member

Expert

Privacy & Transparency

Privacy & Transparency