Ok, lets admit, Xamarin.forms has no built-in mechanisms for making our Apps look great on different screen sizes.
In this post I will show you the approach I use to make my Apps to have a fluid and adaptive UI on different device screen sizes.
The problem
The most recurrent problem is related to label font sizes. Font sizes in Xamarin are fixed. No matter if you have a device with small screen size like a Samsung Galaxy S, or a big one like an Apple iPad Pro 12.9, Xamarin forces you to use the same font size.
We have the same problem when dealing other Views (UI controls).
Obviously you can use Bindable Properties to set values on different font sizes based on the device size, but besides of not being performant and by making our code to become a messy, it is not an elegant solution.
The solution
Inspired by this article written by Charlin Agramonte, and by the OnPlatform Markup extension, I decided to create my own markup extension called “OnScreenSize“.
By using my markup, we are able to define different values for different screen sizes without the need to have a bunch of styling tags (or having as little as possible).
It works not only for Labels but also for any kind of Xamarin forms UI elements like Grid, Image, Entry, Frame, Picker, and so forth.
How it works under the hood
In order to make it easy to measure the screen sizes, I decided to use the DeviceDisplay class from Xamarin Essentials.
The OnScreenSize Markup has many properties where you can set values according to the screen size:
- ExtraSmall
- Small
- Medium
- Large
- ExtraLarge
It also has a defaultSize property which serves to indicate which of the above properties should be used in case the screen size of the device is not available in the _screenSizes list, below:
Below is the full source code of OnScreenSize class.
The magic to get the correct value for the current screen size happens on the GetValue() method. It attempts to get the Screen size that match the list _screenSizes and once it finds a match, it gets the value on the corresponding property for that Screen Size.
Future improvements
- Add more Screen Sizes to the _screenSizes list;
- Implement a way to auto classify the screen size. So that, based on the screen size, the code can classify as Small, ExtraSmall, Medium, Large or ExtraLarge automatically without the need to maintain the _screenSizes list;
- Improve type conversions;
Thats it everyone, you can get a sample App and the full source code here.
your code doesn’t work, becouse in xamal code showed me exception “unacceptable syntax path property”
Hi there,
I wasn’t able to reproduce your problem.
Have you tried the sample code?
I just pushed the sample code along with a solution file which was missing. Sorry about that.
I think this is a great solution! I also prefer to have the screen-related sizing information in the same XAML page, rather than split into separate style sheets. I think I owe you a cup of Nespresso and a glass of semi-dry Palava, late harvest.
Hi Frank, glad you liked it. 😀
By the way, there is a bug. In ValueConversionExtension.cs – the Convert.ChangeType fails on devices where the language setting is different and you use values like “0.7” for a Scale property. In some cultures the decimal point is a comma, so the Convert.ChangeType needs to be language neutral
Let me check, I will get back to you soon…
You were right, I just fixed the bug you mentioned by passing invariant culture on the overload of Convert.ChangeType().
Many Thanks!!
Hi 🙂
Curious question, why did not you use density measure?
Thanks for the clarification =P
Hi Elon, thanks for the comment.
I did not have enough time to focus on the project. Maybe in the future I will revisit it.
Hello. First of all thank you for such simple in use and extensive work!) I have faced a problem, on some Android devices (example: Pixel 2 Api 30) the default value (DefaultSize) does not accept int and when i use string values such as Micro, Auto the app crashes and throws an exception: Input string was not in correct form.
Hi Vladimir,
Sorry for the late reply. I’m not having enough time do dedicate on my blog.
Actually when I wrote the code I didn’t have enough time to do a broader test it, so thats why you coutch the error.
Could you be able to solve the problem?
If so, could you share it to the community, please?
Thanks for the trick!
Interesting, thanks!
Glad you liked it.
This is awesome and I think it must be in Xamarin Community Toolkit. Thank you for your sharing.
Thanks a lot Kerberos, Glad you liked it.
Hi Ana,
Congratulation on your great solution, It works and works well.
I used it to resize, Padding, Margin, Height, Width, Fontsize,…
After implementing your solution on one of my views, I became a believer.
Your solutions must be pushed to the larger development community.
Chief among these are:
https://devblogs.microsoft.com/xamarin/author/jamesmontemagno/
https://www.youtube.com/c/JamesMontemagno
Check out the list of blogs (articles) they feature each month.
Your article should be on their list.
https://www.youtube.com/watch?v=RwMCz7ErOHI&t=10s
I have made a list of Microsoft teams that are looking out for solutions, to make the product better.
1: https://devblogs.microsoft.com/dotnet/introducing-the-net-maui-community-toolkit-preview/
Hi Denton, Sorry for the long delay in answering you, but I’ve been busy with other projects lately.
Glad you liked it.
I would be very happy if someone from the community could use this blog post as an inpiration to add it to a community-wide project, but I don’t know how to make my post stand out to them.