Styling for Multiple Device Resolutions

charlinagramonte

Guest Post: Charlin Agramonte is a Microsoft MVP and co-founder of CrossGeeks. She writes Xamarin articles in her blog http://xamgirl.com/. Find her on twitter as @Chard003.

A few months ago we received a request from one of our customers which required us to develop and test an application on multiple device resolutions. While doing this we realized that we were doing something wrong in our development process.

Device Resolutions

When developing an application, what normally happens is that we receive a design which is specific to one resolution (if we have luck maybe one for tablet and another for phone). Then we try to adjust the design to make sure it looks good on all the platforms and device resolutions by doing some general validations such as making sure controls aren’t cut off, are reachable, visible, usable, etc.

But we realized that making it look good is not enough; it has to be adaptive. When I say adaptive, I don’t mean just making sure controls aren’t cut off, but that it ADAPTS EVERYTHING. It should look as if it was designed for that screen. For example, if we get a design for iPhone X with a specification that all the medium sized text should have a font size of 15 pixels, probably on small devices 15 px won’t look good.

Example:

Examples of Device Resolutions

Let me show you how to handle this by using different styles per resolutions.

 

Let’s do it step by step

1. Create new resource files

First, create two new resource style files: one for small devices and another one to be the default which will handle the general phones/tablets resolutions.

New resource files for device resolutions

NOTE: We are using the content view vs template as a shortcut, so make sure to replace the ContentView type by a ResourceDictionary once files created.

In the code behind of our resource file, let’s add a singleton so that we can use our style anywhere.

Make another file for “SmallDevicesStyle” and we’ll populate them with styles in a moment.


2. Create a method to detect the device size

To detect the device size use Xamarin Essentials which makes it really easy to get the metrics of a device with DeviceDisplay.MainDisplayInfo.

 

As a reference value will choose a small device resolution to compare (width=768 and height=1280), this value is based on this table: http://screensiz.es/ in which the iPhone 5 (the largest of the small devices) has a resolution of 640 x 1136 pixels which will fit into our small reference value as well as the smallest Android that on average has 768 x 1280 pixels.

Detecting device size resolutions

To validate this I tested in 15 different devices and wrote the following method to determine if the device is “small”.

 

3. Set the resource file based on device size

In the  App.xaml set a name for your resource dictionary that you can merge with your resolution specific styles. In this case I use “dictionary”.

Now back in the App.xaml.cs you can set the appropriate resource file to match the device size.

 

4. Add styles to each resource file

In Xamarin.Forms we have the properties Tablet and Phone, and we are going to use them in the styles file to set the proper values depending on if it’s tablet or phone device.

GeneralDevicesStyle

SmallDevicesStyle

 

5. Apply the styles to your XAML

 

The Result

Now we have styles that better fit the resolution of the devices we are targeting.

Some extra tips

Having multiple styles is important to make sure our pages support these different resolutions but there’s much more you can do. Here a list of some extra tips:

  • Make sure to use adaptive layouts such as: Grids, FlexLayouts, AbsoluteLayouts are probably the best options.
  • If you are using Grids, try to use the property “Auto” instead of specifying a hard-coded sizes.
  • Make sure to add a ScrollView even if it does not looks necessary, there are some devices that can be pretty pretty small, so make sure to add a ScrollView if not there might controls that are unreachable when used in small devices.
  • Try to use the LayoutOption “FillAndExpand” when possible, to make sure that the content gets expanded.

Check the full source code here.

Happy coding!

 

charlinagramonte

Follow    

6 Comments
Avatar
Nguyễn Liêm 2019-06-28 20:34:10
Awesome topic! Thank. Could you please help me update your topic "Select multi picture from Gallery". Thank you!
Avatar
learn9969@outlook.com 2019-06-28 21:37:18
HiThis is a fantastic article.Something I have been looking for as a guideline for some time .I find all your articles very good and "real world". I have been building apps for a year using xamarin forms and I find difficult to find articles that describe how to tackle layout in multiple devices. How do you make your form to move up and resize when the keyboard shows? I have found that None of the keyboard plugin currently work.(work on 1 or 2 devices)Controls get overlapped. Android:(does not work on all devices)xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"android:Application.WindowSoftInputModeAdjust="Resize"iOS I used/tried few renderers to handle overlapping/resizing controls and still does not work on all devices.(works on 1 or 2)In a form ,login for example when inputting data into a entry, the login button shouldnot dissapear but move up.Is this not achievable?I think this is something that Xamarin Team should sort out and come out of the boxas it is too difficult and messy to make controls resize when the keyboard is shown .Really good articleAny suggestions?
Avatar
Joao Livio 2019-06-29 07:49:29
Bravo... 
Avatar
Neil Cadman 2019-07-05 05:37:27
Hi @charlinagramonteI appear to be running into a couple of problems with the latest version of Xamarin forms.Firstly, the resource directory is null when the method runs - even when the LoadStyles is afer the InitializeComponent InitializeComponent();LoadStyles(); So i had to add dictionary = new ResourceDictionary();Also, when I do merge the directories they are not present in "Application.Current.Resources.mergeddirectories" and so I get Key cannot be found errors.In the end i changed the code to merge the directories directly into "Application.Current.Resources" however now I can only access the styles usign "DynamicResources" and not "StaticResources".Any help would be amazing.Regards