Having the same control width between multiple devices

Question

I am developing an app with Xamarin. When I debug, I use an Samsung Phone (SM-A520W, 1920x1080, 424ppi, 5.2 in).

However, the final product will be on a different device (Juniper Allegro 3, 640x480, 4.2in, Android 7.1). The final device is expensive, so this is why not every developer have one.

Is there any way to make the Samsung phone show a grid with the same width has it would be on the final device? Something that looks like the grid is centered and there are empty spaces on each side.

This would help because, when I design a form, the developer who has the final device must always test and readjust my code because we use devices with different resolutions and pixel density (the columns headers are not always readable).

Note: The app is in landscape, if this is relevant.

I have tried this with no success : how to transform a pixel to xamarin.forms units?

you want the same **physical** size on every device? You should also be able to create an emulator image that matches the display specs of the production device — Jason, Oct 22 '21 at 14:43

score 0 · Answer 1 · answered Oct 22 '21 at 15:52

Yes, you can use DeviceDisplay to get the width of the screen and adjust it with each resolution:

DisplayInfo screenSize = DeviceDisplay.MainDisplayInfo;

double width = screenSize.Width;

A simple idea is:

You code for your resolution (1920x1080) and then you check the resolution of the phone that is running your project, to get it and return something. In my case, I return a value to divide, but I do it with a image (it's another case, but you can follow the idea, for example, return the width of the Grid for each resolution):

public int GetHeight()
        {
            int height = (int)DeviceDisplay.MainDisplayInfo.Height;

            switch (height)
            {
                case (640):
                    return 1;
                case (800):
                    return 2;
                case (1024):
                    return 3;
                case (1366):
                    return 4;
                case (1920):
                    return 5;
                case (2048):
                    return 6;
                case (2560):
                    return 7;
                case (3840):
                    return 8;
                case (4096):
                    return 9;

                default:
                    //1280
                    return 0;
            }
        }

Abhijith C R · Answer 2 · 2021-10-22T17:39:23.097

Xamarin sizes are supposed to be device-independent. Only need to take care that any "FillAndExpand" or padding/margin differences don't distort the HeightRequest or WidthRequest.

As a rule, WidthRequest="160" will give you 1 inch width in all devices. (Or 64 for 1 centimetre).

To be sure, test in two different devices which are in your access and make sure the sizes stay same across them.

Read more here: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/creating-mobile-apps-xamarin-forms/summaries/chapter05

Also: https://learn.microsoft.com/en-us/xamarin/android/app-fundamentals/resources-in-android/resources-for-varying-screens

score 0 · Answer 3 · answered Oct 25 '21 at 06:33

You could set the grid' size according to the screensize via Converter. Binding the screensize for the grid first. And then use the converter to set the grid size.

You could use the Xamarin.Essentials to get the screen size.

// Get Metrics
var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;

// Width (in pixels)
var width = mainDisplayInfo.Width;

// Height (in pixels)
var height = mainDisplayInfo.Height;

And then use the Converter to set with the specific value.

public class MyConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (double)value / 3.0;
         
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

For the binding Value of Converters, please check the link below: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/converters

For more code, you could check the sample i done before. Resizing frame and controls according to device size .Suggestions?

Having the same control width between multiple devices

3 Answers3