How to do design Mobile screens on the basis mobile Screen Sizes?

pawanyapawanya INMember ✭✭

plz give solution ..................
Thank U!

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    what do you mean "how to design screens"?

    In XAML. You write your markup in the XAML editor.

  • VenkataSwamyVenkataSwamy INMember ✭✭✭
    edited June 2017

    Hiii @pawanya

    The below code will help to design mobile screens on the basis of mobile screen height and width.

    Design based on this it will fit all mobile resolutions.

    PCL:

    App.cs

    public class App : Application
    {                     
        public static int screenHeight, screenWidth;
    
        public App()
        {           
            MainPage = new UserLogin();
            //The root page of your application         
        }
    
        protected override void OnStart()
        {
             // Handle when your app starts
        }
    
        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }
    
        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
    

    Xamarin.Android:

    MainActivity.cs

      #region For screen Height & Width
    
            var pixels = Resources.DisplayMetrics.WidthPixels;
            var scale = Resources.DisplayMetrics.Density;
    
            var dps = (double)((pixels - 0.5f) / scale);
    
            var ScreenWidth = (int)dps;
    
            App.screenWidth = ScreenWidth;
    
            //RequestedOrientation = ScreenOrientation.Portrait;
    
            pixels = Resources.DisplayMetrics.HeightPixels;
            dps = (double)((pixels - 0.5f) / scale);
    
            var ScreenHeight = (int)dps;
            App.screenHeight = ScreenHeight;
    
    #endregion
    

    Xamarin.iOS

    AppDelegate.cs

        #region For Screen Height & Width
    
          App.screenWidth = (int)UIScreen.MainScreen.Bounds.Width;
              App.screenHeight = (int)UIScreen.MainScreen.Bounds.Height;
    
      #endregion
    

    PCL

    If you used MVVM pattern you have to get these ScreeenHeight and ScreenWidth in ViewModel Then give height and widths for your Views and Layouts.

                 // The below two lines will use to get the MOBILE SCREEN HEIGHT && WIDTH in ViewModel
                  int heightScreen=App.screenHeight;
                  int widthScreen=App.screenHeigh
    

    XAML Design:

    UserLogin.xaml

           <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:local="clr-
          SreenSizeDemo;assembly=SreenSizeDemo" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
           x:Class="SreenSizeDemo.UserLogin">
          <StackLayout>
           <Label x:Name="lblTitle" HorizontalOptions="FillAndExpand"/>
           <Image x:Name="imgProfile"  Source="Logo.png" />
          <StackLayout>
          <ContentPage>
    

    UserLogin.xaml.cs

          public partial class UserLogin : BaseContentPage
          {
                  // Here you get the MOBILE SCREEN HEIGHT && WIDTH
                  int heightScreen=App.screenHeight;
                  int widthScreen=App.screenHeight;
    
         public UserLogin()
             {
                               lblTitle.FontSize=height=Screen/36.8;
                             //The above value is equal to fontsize =20
                             imgProfile.HeightRequest=heightScreeen/10;
                             imgProfile. WidthRequest=heightScreeen/10;
                    }
            }
    

    C# Design:

         public class UserLogin: ContentPage
              {
                  // Here you get the MOBILE SCREEN HEIGHT && WIDTH
                  int heightScreen=App.screenHeight;
                  int widthScreen=App.screenHeight;
    
                  public UserLogin()
                       {
                           Label lab = new Label()
                            {
                              FontSize = heightScreen/ 36.8
                              //the above value is equal to fontsize =20
                            };
    
                           Image imgProfile=new Image()
                            {
                                 Source="Logo.png",
                                 HeightRequest=heightScreeen/10,
                                 WidthRequest=heightScreeen/10
                          }
                  }
         }
    
  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    If you're micro-managing display based on screen dimensions (as if this were windows XP in 201) there is a problem.

    A huge part of the mobile paradigm is that your UI will self adjust based on its hierarchy. Columns of 1/3 screen width won't care if the width is 400px or 600px - as an example.

    At most you should just need to know if you are on a tablet to provide the tablet UI or on a phone.. or the orientation of landscape or portrait. But resolution is not something you should be concerned with.

    Additional to that is the fact that at an OS level the user may have their fonts magnified. The user font scaling can be anywhere from 50% to 250% in some cases. You don't want to go down that rabbit hole of taking the resolution and then calculating font magnification, and, and, and.

    Stick with the modern standards of tablet versus phone, landscape versus portrait... and don't spend hundreds of man-hours micro-managing stuff you shouldn't be trying to control in the first place.

  • NMackayNMackay GBInsider, University mod

    As @ClintStLaurent says, that's a nightmare to manage.

    Try using the built in XAML features to size regions of the screen based on the percentage sizes of the device screen.

     <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*"></ColumnDefinition>
                <ColumnDefinition Width="8*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="2*"></RowDefinition> -- Use 20% of the available space
                <RowDefinition Height="8*"></RowDefinition> -- Use 80% of the available space
            </Grid.RowDefinitions>
    
  • RakeshSainiRakeshSaini INMember ✭✭

    Hi @NMackay , how can we apply this for Button and Entry tag inside StackLayout ?

  • SteveShaw.5557SteveShaw.5557 USMember ✭✭✭
    edited August 2018

    @ClintStLaurent and @NMackay - Xamarin Forms lacks some functionality that makes it essential to compute certain features relative to screen dimensions. I've encountered two main limitations:

    1. Font sizes. Given wide range of device sizes, it is desirable to change the font size based on device size. That is, if you have a layout that is proportional to device size, then fonts within that layout should (often) also be proportional to device size. (I'm especially referring to buttons and other small one-line controls/labels, not "text" content, which is more likely to be based on user's font size preference.)

    2. margins/padding. On small devices, is sometimes desireable to reduce margins/padding, so that there is more room for the text or other content.

    IMHO, Without screen-relative sizing of these details, one has to resort to making it fit on smallest device .. then it looks ridiculous on largest device.

  • MatthewRegulMatthewRegul USXamarin Team Xamurai

    You might want to check out Xamarin.Essentials - Device Display Information to get the details of the User's display.

  • SteveShaw.5557SteveShaw.5557 USMember ✭✭✭
    edited August 2018

    Here is code using Xamarin.Essentials, to compute various useful values:

    var metrics = Xamarin.Essentials.DeviceDisplay.ScreenMetrics;
    
    int widthPixels = (int)metrics.Width;
    int heightPixels = (int)metrics.Height;
    float density = (float)metrics.Density;
    const int DPS_PER_INCH = 160;
    // dots-per-inch
    float dpi = density * DPS_PER_INCH;
    // "DPS" are the logical units Xamarin Forms uses during layout.
    float widthDps = (widthPixels / density);
    float heightDps = (heightPixels / density);
    float widthInches = (widthDps / DPS_PER_INCH);
    float heightInches = (heightDps / DPS_PER_INCH);
    

    For comparison, Xamarin iOS "DPS" can be retrieved this way; identical to "widthDps"/"heightDps" above:

    var screenWidthDps = (float)UIScreen.MainScreen.Bounds.Width;
    var screenHeightDps = (float)UIScreen.MainScreen.Bounds.Height;
    
Sign In or Register to comment.