Android Question How to match app to all display?

[Tomek92]

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:

'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.

 

[JohnC]

Did you try to use "Anchor's" in the designer?

[B4X] Anchors Demonstrated

The anchors feature is simple to use and is very effective with implementing flexible layouts. By default the views position is relative to the top left corner. There is nothing special about this corner and there is no real reason for all views to be position based on the distance from this...

www.b4x.com

Designer anchors - Video example

This short video demonstrates how anchors can be used to build a flexible interface. The small white arrows show the anchors settings. This layout will properly scale to any screen size. Recommended video tutorial:

www.b4x.com

 

[Tomek92]

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?

 

[JohnC]

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.

 

[Tomek92]

So i will rework my app.

Thank you for your time to solve my problem and for pointing out the correct method.