Users can use their phone how they like display size (small, standard, large). i want to my app auto adjusting by phone display size or font size (small, standard , large). now i am have problem when display size or font size in small , it working nice . when i am running in display size large , font and images size getting affecting how can we resolve it ,
1 Like
To make text and layout scale automatically with different screen widths and display sizes without using any extensions, use a proportional scaling formula inside App Inventor Blocks based on Screen1.Width.
-
The Core Logic (Responsive Scaling Ratio)
Standard Android phone screens typically have a virtual viewport width around 360 units. When a user changes display scaling, Screen1.Width updates proportionally.
Calculate the font size dynamically using this formula:
* If a screen is narrower or display scaling reduces available width (e.g., width = 320), the font size automatically reduces.
* If a screen is wider or set to standard/large resolution (e.g., width = 420), the font size scales up proportionally. -
Implementation Using a Reusable Procedure
Instead of calculating this manually for every label or button, create a single procedure in the Blocks Editor:
Step 1: Create the Procedure
* Open the Blocks panel.
* Drag out a to procedure do block from Procedures and name it ScaleFontSize.
* Click the gear icon on the procedure and add two input arguments:
* component (The Label or Button to resize)
* desiredSize (The standard target font size, e.g., 16, 18, 22)
* Inside the procedure, add:
* set (any Component).FontSize of component (component) to:
* From Math, use:(Wrapping it in a round block ensures the font size remains a clean integer).
Step 2: Trigger on Screen Load & Orientation Change
Call this procedure inside both Screen1.Initialize and Screen1.ScreenOrientationChanged:
when Screen1.Initialize do:
call ScaleFontSize (component: Label1, desiredSize: 18)
call ScaleFontSize (component: Label2, desiredSize: 14)
call ScaleFontSize (component: Button1, desiredSize: 16)
when Screen1.ScreenOrientationChanged do:
call ScaleFontSize (component: Label1, desiredSize: 18)
call ScaleFontSize (component: Label2, desiredSize: 14)
call ScaleFontSize (component: Button1, desiredSize: 16)
- Essential Designer Settings
* Label Width & Height: Set Width to Fill parent (or a set percentage like 90%) and Height to Automatic. Never hardcode fixed pixel (px) heights, so multi-line text will not clip.
How are you sizing your components? Font sizes use size independent pixels (sp) and should scale according to the user's settings. However, if you set a text-forward component like a label to take up a fixed vertical size, then that fixed size won't resize if the text needs to wrap further due to the increase in the text size due to user settings. If you set the height to be automatic sizing, the components should grow to accommodate the additional space needed as text wrapping requires.
all components are in automatic now , now fonts resizing . but now images getting affecting
Show screenshots and post the aia.
Try this one:
HUSKYtest_2.aia (130.7 KB)
You can also set the image width to a reasonable value ( lets say 40% )
i tried it , not working properly , The image is not displaying correctly because it is being cropped from the sides.
Hmm, show a screenshot.
And try this:
HUSKYtest_2a.aia (131.7 KB)
same issue
HUSKYtest_2b.aia (128.5 KB)
Try again and post a screenhot.
And tell us what GetMetrics.FontScale return on your test device.
In what way? What exactly are you expecting?
image should not be crop , if i do this image 40 % width . same result will appear.
it should appear like this
NOT LIKE THIS
The image is NOT cropped. If you want a specific szie let me know (height/width). I took the dimensions from your image in the assets.