How to change a specific layout or design for Tablet version in Xamarin forms

Android device has wide range of resolutions, screen size and densities. When we built an App for android version it runs well in mobile screen but becomes distorted when we test it against tablet version. We need to modify some parts of layout so that it runs well in mobile screen as well as in Tablet version. In android native it is easy because we can test layouts against different screen size.Xamarin forms  makes it simple to detect what type of screen size and resolutions we are using and with the help of some good methods we get good visual experience of App with tablet version.

App with few simple steps. If you have created an App for mobile version in Xamarin forms and you need to change some specific layout for tablet version for better user experience then this blog is helpful for you.

Purpose

 To build an App which will run in Tab version of Android and iOS (Xamarin forms).

Scope

IDE: Visual Studio for Xamarin or Xamarin Studio.

Procedure

Where we need to change our design for Tablet version?

In case of images which appear blurry, images may occupy too much (or not enough) screen space which causes the position of UI elements in the layout. The images may overlap or may appear too far apart.

Button sizes may appear too small and sqizy in respect of whole layout space. Need to change design for space adjustment in Tab version.

Step 1:

Xamarin forms Android:

For xamarin forms android we need not to activate any kind of permission. Android version can support all screen size but we need to adjust our user interface for larger devices.

We can use the Device class to change the behavior of our app or user interface. Using the Device.Idiom enumeration we can do the following:

if (Device.Idiom == TargetIdiom. Tablet)
   {
     Stackview.Orientation = StackOrientation.Vertical;
     Image.Source = ImageSource.FromFile("imgtablet.jpg");
   } 

else {
       Stackview.Orientation = StackOrientation.Horizontal;
       Image.Source = ImageSource.FromFile("img.jpg");
     } 

If the device is tablet then we will get imgtablet.jpg image which is having high resolution. But if it is other than the mobile version then we will see img.jpg image which is medium resolution.

This approach can be expanded to make significant changes to individual page layouts, or even to render entirely different pages on larger screen.We can navigate different layout or different pages according to device specification.

if (Device.Idiom == TargetIdiom.Tablet)

{
        await Navigation.PushAsync(new Somepage());

}
    else

{
        await Navigation.PushAsync(new Someotherpage());

}

If required we can change the Page design in case of grid view display or Master Page according to the device (i.e. phone or Tab).

For master detail page we can add following codes for Tablet version:

public class HamMenuPage : ContentPage

{

public HamMenuPage(MasterDetailPage m)

{

if (Device.Idiom == TargetIdiom.Tablet)

                {

                     m.MasterBehavior = MasterBehavior.Popover;

                     lblaboutus = new Label {

                           BackgroundColor = Color.White,

                           FontSize = 25,

                           HeightRequest = 90,

                           HorizontalOptions = LayoutOptions.StartAndExpand,

                           YAlign = TextAlignment.Center

                     };

                     lblregister = new Label {

                           BackgroundColor = Color.White,

                           FontSize = 25,

                           HeightRequest = 90,

                           YAlign = TextAlignment.Center,

                           HorizontalOptions = LayoutOptions.StartAndExpand

                     };

     else {

                     lblaboutus = new Label {

                           BackgroundColor = Color.White,

                           FontSize = 18,

                           HeightRequest = 40,

                           HorizontalOptions =LayoutOptions.StartAndExpand,                

                           YAlign = TextAlignment.Center

                     };

                     lblregister = new Label {

                           BackgroundColor = Color.White,

                           FontSize = 18,

                           HeightRequest = 40,

                           YAlign = TextAlignment.Center,

                           HorizontalOptions = LayoutOptions.StartAndExpand

                     };

           }

}

So from above example it is clear that how we can change different layout specification to customize view for tablet and mobile version App. Also how it behaves in case of master detail page is clear to us.

From this above  screen you will get idea how and when to  design screen of same content for different screen sizes.In above example for job listing and job details we have created two separate pages in case of mobile version. But in Tab version for more available spaces we have done it in one page.

Step 2:

Xamarin forms iOS:

For iOS at first we have to ensure it that tablet support is enabled on this App.For this we need to go info.plist of iOS project and go to Device option settings. There are three options: Phone/iPod, iPad/ Universal.

If we want to run our App both in mobile and ipad version then we have to choose universal option.

Rest of the technique is same we need to do in Xamarin.forms PCL project as described earlier.

Conclusion:

• We need proper resolutions picture which will be required in Tab.

We need a tab for testing.