5

How do you detect if a device is small or big? I dont need to detect if is a tablet or not.

This concept was taken from https://devblogs.microsoft.com/xamarin/styling-for-multiple-device-resolutions/

We use the method below and load the appropriate styles accordingly, however because I dont take into account density it is not accurate.

How can I improve or rewrite this method so that it gives me a better result and detects more accurately if a device is big or small.

Current

const int smallWightResolution = 768;
const int smallHeightResolution = 1280;

public static bool IsASmallDevice()
{
        // Get Metrics
        var mainDisplayInfo = Xamarin.Essentials.DeviceDisplay.MainDisplayInfo;

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

        // Height (in pixels)
        var height = mainDisplayInfo.Height;
        return (width <= smallWightResolution && height <= smallHeightResolution);
  }

Attempt to use density but don't know what the formula is

public static bool IsSmallDevice()
{ 
    //we don't support tablet so tablet don't apply.

    int smallWidthResolution = 768;
    int smallHeightResolution = 1280;
    double screenWidth;
    double screenHeight;
    bool isSmallDevice;
    
    var metrics = Xamarin.Essentials.DeviceDisplay.MainDisplayInfo;
    
    switch (Xamarin.Forms.Device.RuntimePlatform)
    {
        case Xamarin.Forms.Device.Android:
            //Android not sure how to sort of correctly detect if is a small device
            screenWidth = (metrics.Width - 0.5f) / metrics.Density;
            screenHeight = (metrics.Height - 0.5f) / metrics.Density;
            isSmallDevice = "???????";
            break;
        case Xamarin.Forms.Device.iOS:
            //ios no changes 
            isSmallDevice = metrics.Width <= smallWidthResolution
                            && metrics.Height <= smallHeightResolution;
            break;
    }

    return isSmallDevice;
}

UPDATED

Huawei P9 Android 7.0
    Density=2.5
    Width=1080
    Height=2160
    ScreenHeight(Calculated)=864
    ScreenWidth(Calculated)=432


    Samsung A20 Android (new phone)
    Density=2
    Width=720
    Height=1560
    ScreenHeight(Calculated)=780
    ScreenWidth(Calculated)=360

Any suggestions?

developer9969
  • 4,628
  • 6
  • 40
  • 88
  • ```Application.Current.MainPage.Width``` could help? – Shaw Oct 28 '20 at 07:41
  • Hi there how do you see working? – developer9969 Oct 28 '20 at 10:10
  • If you are looking for something that tells you if a device is a mobile or a tablet you can check the Idiom : https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.device.idiom?view=xamarin-forms – FreakyAli Oct 28 '20 at 10:44
  • @FreakyAli thanks for your reply. I dont need something that tells me if is Tablet or phone but something that distinguish the size of the phone/density so that I can load respective styles as per this article https://devblogs.microsoft.com/xamarin/styling-for-multiple-device-resolutions/ – developer9969 Oct 28 '20 at 11:40
  • The below link can be helpful https://stackoverflow.com/questions/10080451/android-detect-small-tablet-vs-big-phone https://stackoverflow.com/questions/55351752/how-to-determine-android-device-resolution-is-small-medium-or-large – Jai Gupta Oct 31 '20 at 10:23

2 Answers2

5

Answer

I recommend using the Xamarin.Essentials NuGet Package to retrieve the screen's Width, Height and Density, then using the following formulas:

  • ScreenWidth = Width / Density
  • ScreenHeight = Height / Density

Code

using Xamarin.Essentials;

// **** Example Screen Sizes ****
// iPhone SE 2nd Gen (aka iPhone 8), Width 750, Density 2, Width/Density 375
// iPhone 11, Width 828, Density 2, Width/Density 414
// Pixel 3, Width 1080, Density 2.75, Width/Density 392.7
// Galaxy S5, Width 1080, Density 3, Width/Density 360
// Galaxy Nexus, Width 720, Density 2, Width/Density 360
public static double ScreenWidth { get; } = DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density;
public static double ScreenHeight { get; } = DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;

public static bool IsSmallScreen { get; } = ScreenWidth <= 360;

Sample App

Here's how I am using the above code in my GitTrends app: https://github.com/brminnick/GitTrends/blob/aa0c0a2d53dab7306514287533330b4a3bfbf609/GitTrends/Services/XamarinFormsService.cs#L11-L18

Brandon Minnick
  • 13,342
  • 15
  • 65
  • 123
  • hi thanks for your reply, not sure if it's me but in my tests I am not get the result I was expecting. I have this new Android Phone Samsung A20 and old one Huawei it detects the old one as "Big" and the new one as small however if I "force" to be detected as big and load different styles , the new phone is fine the old one it does not look right! See details in the question under UPDATED. Looking at the data I get the new phone is smaller however handles all better. Hopefully I am not confusing things but I am confused as I need a reliable way to detect small vs big phones if you like. – developer9969 Nov 02 '20 at 17:49
  • The physical size of the screen (6" vs 4") is different than its screen density (aka number of pixels per inch). As mobile app developers, we only need to worry about the screen density because that is how our Xamarin.Forms UI renders onto the screen. – Brandon Minnick Nov 05 '20 at 16:09
  • Feel free to also play with `IsSmallScreen` and tweak it to what works best for your app. I have mine set to `ScreenWidth <= 360`, but you could increase yours to `ScreenWidth <= 375`. – Brandon Minnick Nov 05 '20 at 16:11
0

You can use Xamarin Forms built-in Idiom to detect the type of device:

  1. Desktop

  2. Phone

  3. Tablet

  4. TV

  5. Watch

    if (Device.Idiom == TargetIdiom.Phone) { // Your code goes here }

Sheharyar S.
  • 1
  • 2
  • thanks for your reply I only care about phone and none of the other idiom and if a phone is small or big I need to be able to detect it, the above will not work for me – developer9969 Nov 03 '20 at 17:33