Android Question How to match app to all display?

Tomek92

Member
Licensed User
Hi,
I once wrote an application on a phone with a 720 x 1280 px display, now I launched the same application on a phone with a 1080 x 2130 px display, scale 2,75. Unfortunately, the design of the application is very stretched, and most of the subtitles are broken.

I can see that when creating the application in B4A, the variant 320x480, scale = 1 (160 dpi) was then selected. Then I wrote a script to arrange everything on the screen like this:

Designer:
'All variants script
AutoScaleAll
'#FF205BF7...#FFBEBBFF
lbLogo1Page1.SetLeftAndRight( 27%x, 41%x )
lbLogo1Page1.SetTopAndBottom( 53%y, 59%y )
imgLogoPage1.SetLeftAndRight( 42%x, 58%x )
imgLogoPage1.SetTopAndBottom( 52%y, 60%y )
lbLogo2Page1.SetLeftAndRight( 59%x, 72%x )
lbLogo2Page1.SetTopAndBottom( 53%y, 59%y )
'----------------------------------------
pnlPressPage1.SetLeftAndRight( 2%x, 49%x )
pnlPressPage1.SetTopAndBottom( 3%y, 52%y )
lbPress2Page1.SetLeftAndRight( 5%x, 42%x )
lbPress2Page1.SetTopAndBottom( 2%y, 8%y )
imgPressPage1.SetLeftAndRight( 8%x, 38%x )
imgPressPage1.SetTopAndBottom( 10%y, 32%y )
lbPressPage1.SetLeftAndRight( 2%x, 45%x )
lbPressPage1.SetTopAndBottom( 32%y, 37%y )
btnPressPage1.SetLeftAndRight( 10%x, 35%x )
btnPressPage1.SetTopAndBottom( 39%y, 46%y )
'----------------------------------------
pnlTempOPage1.SetLeftAndRight( 51%x, 98%x )
pnlTempOPage1.SetTopAndBottom( 3%y, 52%y )
lbTempO2Page2.SetLeftAndRight( 5%x, 42%x )
lbTempO2Page2.SetTopAndBottom( 2%y, 8%y )
imgTempOPage1.SetLeftAndRight( 6%x, 40%x )
imgTempOPage1.SetTopAndBottom( 10%y, 32%y )
lbTempOPage1.SetLeftAndRight( 2%x, 45%x )
lbTempOPage1.SetTopAndBottom( 32%y, 37%y )
btnTempOPage1.SetLeftAndRight( 10%x, 35%x )
btnTempOPage1.SetTopAndBottom( 39%y, 46%y )
'----------------------------------------
pnlTempIPage1.SetLeftAndRight( 5%x, 95%x )
pnlTempIPage1.SetTopAndBottom( 60%y, 97%y )
imgTempIPage1.SetLeftAndRight( 40%x, 85%x )
imgTempIPage1.SetTopAndBottom( 2%y, 35%y )
lbTempIPage1.SetLeftAndRight( 2%x, 38%x )
lbTempIPage1.SetTopAndBottom( 18%y, 23%y )
lbTempI2Page2.SetLeftAndRight( 2%x, 38%x )
lbTempI2Page2.SetTopAndBottom( 3%y, 15%y )
btnTempIPage1.SetLeftAndRight( 7%x, 32%x )
btnTempIPage1.SetTopAndBottom( 25%y, 32%y )

Now I don't know if it is possible to convert the above script to all displays. Or maybe you need to write the script in a different way? Should I adjust a few variants in the designer?

I would like someone to show me how to do it, because I was looking for similar topics on the forum, but I still can't cope.
 
Solution
Yes, you will no longer use manual percentages because the anchors will auto-calculate the percentages for you internally (no visible percentages are needed and no percentages will be displayed).

Using anchors is the preferred method to design the user interface in android apps so they will automatically look good on various screen sizes.

Sometimes, you will need to use percentages in very rare situations.

Just play with the example and you will see how much easier it will be using anchors.

JohnC

Expert
Licensed User
Longtime User
Did you try to use "Anchor's" in the designer?


 
Upvote 1

Tomek92

Member
Licensed User
I checked the links you showed me and came to the conclusion that I have to give up (% x) and (% y) in my application and rework the design. Do I think right?
 
Upvote 0

JohnC

Expert
Licensed User
Longtime User
Yes, you will no longer use manual percentages because the anchors will auto-calculate the percentages for you internally (no visible percentages are needed and no percentages will be displayed).

Using anchors is the preferred method to design the user interface in android apps so they will automatically look good on various screen sizes.

Sometimes, you will need to use percentages in very rare situations.

Just play with the example and you will see how much easier it will be using anchors.
 
Last edited:
Upvote 0
Solution
Top