CODEWITHSUNDEEP
xamarin.formsxamarin.essentials
developer9969
developer9969

Reputation: 5236

How to detect device is big or small in xamarin forms

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?

Upvotes: 5

Views: 2347

Answers (2)

Sheharyar S.
Sheharyar S.

Reputation: 11

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 }

Upvotes: 0

Brandon Minnick
Brandon Minnick

Reputation: 15340

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

Upvotes: 5

Related Questions