Different Screen displays

Hi, I built my app while previewing on iOS (iPhone 11) using the appgyver preview app but when I test the apk on different android devices i find that the alignments are not the same for all these devices. Is there a way to make the screen content to be dynamic and responsive to device changes?


You can use the system variables for component width and height to make them dynamic and fit whatever screen. Check out especially dimensions.viewport.width and dimensions.viewport.height

Do I need to use the conditional rendering for this to work? If so, please assist with the formula that I would need to use

Depends on what you want to accomplish, the system variables always take into account what device you are using and the values are set accordingly automatically. If you want for example every button to be half your screen width in whatever device you are using, you can set the button’s width to dimensions.viewport.width / 2 .

But if you want different styles for e.g. android, ios, and web devices, you can bind the style properties to a formula with an IF, like IF(android, android_style, ios_style). You can access what OS system the user is using also under system variables.

So for each and every component that I use in my screen, I have to change its width and height to dimensions.viewport.width/height?

this is how it looks in composer pro. The login button is at the bottom of the screen

but on my iphone its almost halfway

and on other small iphones it looks different as it cuts off some things

Well yes, using static pixel values will perform differently on different devices, since their screen dimensions vary. So for dynamic width and height you’ll have to use dynamic variables, such as the system variables. You can also go into the theme tab in the upper menu and adjust the theme settings for components, so that they are automatically used. Another option is to use percentage style values instead of pixels.

Just a follow up here;

i have been using the % option for lots of stuff. You mentioned it at the end there…what is the difference between this and using the viewport system variables?

For example, i have buttons and i set the width to 80%…so they sit across most of the screen. what would be the difference of doing 80% of the viewport width?