Adjust the Font Size of components' to Phone's font size

[Saiansh (Saiansh Tapuriah)]

Hi,

Different phones have different Font Sizes. So when I open the app in a phone with a small Font Size, the UI gets too small (There is too much empty space at the bottom of the screen)

Similarly, If i try it on a phone with an Increased Font Size, the components become too big.

Is there any way to auto-adjust the font size of the components to the default font size of the device?

Screenshots:

Phone with Big font size

Phone with smaller font size…

Please help me, as the UI of the second phone doesn’t look good at all…

Thanks,
Saiansh

[Mohamed_Tamer]

You can see here:

Responsive Screen Sizing

This is for my phone. So you have to look for the screen.width value of your own phone and replace the 411. Then use the fontsize that looks good on your phone. [image] [image]

[Saiansh (Saiansh Tapuriah)]

Thanks @Mohamed_Tamer

Just one quick question: In Peter’s solution, what does the FontSizeAspect parameter have to be?

[Saiansh (Saiansh Tapuriah)]

and that solution is more about the phone’s size, not the font size

[Mohamed_Tamer]

The default one you use, for example if your font size right now is 16 so pass 16.

[Saiansh (Saiansh Tapuriah)]

@Saiansh

and that solution is more about the phone’s size, not the font size

But that solution is about the width of the phone, not about the Font Size of the phone

Even a small-sized phone can have a large font size (or vice-versa)

[Boban (Boban Stojmenovic)]

Peters solution will only work for screen size or/and if zoomed in/out…

You will have to extend the above solution with the help of this extension App Inventor Extensions: Settings | Pura Vida Apps and it’s FontScale block

something like this

[Saiansh (Saiansh Tapuriah)]

Thanks @Boban

[Saiansh (Saiansh Tapuriah)]

And just one more question, @Boban - What is the LTB_001_100 component? is it the Screen or an Arrangement ??

[Boban (Boban Stojmenovic)]

@Saiansh

is it the Screen

Yes

[hemantadahalofficial (Neo Developer)]

I don’t know what’s the best option bcz if we add like this than if we have more than 100+ label in a screen than we have to do it for every block which is not a good idea…

[Vaibhav]

@hemantadahalofficial

I don’t know what’s the best option bcz if we add like this than if we have more than 100+ label in a screen than we have to do it for every block which is not a good idea

You can make a list all the labels and then under for each item in list loop drag the set font size of label block from Any Component category and then set the font size according to the procedure block mentioned in previous replies.

Here, if you don’t want to create list of labels, then you can also create dynamic labels and then set the further blocks accordingly

[bodymindpower (Anke)]

Yes, and you should do it this way (→ ScreenOrientation):

[Saiansh (Saiansh Tapuriah)]

Thanks @bodymindpower

Anyways I have set the Screen Orientation to Portrait

[Boban (Boban Stojmenovic)]

Slightly simpler blocks

[JAHID (Jewel Shikder Jony)]

The Best Solution To Make Component and Font Size Responsive

Responsive - Make App Responsive With Different Diveces [Extension] [PAID]

Responsive Extension Make Every Component Responsive With Different Devices This Extension Help You To Make Your App Responsive On Different Devices With Different Screen Size. This Is Easy And Best Solution To Make App Responsive. It's Tested With 100+ Different Devices. It's Give You The Accurate Result. Simple & Very Useful. Total Block Of This Extension [image] Changes Of Designer Section Change Default Height & Width With Your Emulator Screen Size [image] How Can You Get E…