Forum Xamarin.Forms

Different layouts for Tablets and Phones

AlexeyShikovAlexeyShikov UAMember ✭✭

What approach should be used, to apply different layouts for different form-factors?

I understand, that for simple projects it does not matter.
But if we are going to create a medium project and determine layout according to interface idiom?

Posts

  • MarkSmith.8123MarkSmith.8123 USXamarin Team, University, XamUProfessors Xamurai

    There are several approaches, but an easy one is to create different ContentPage-derived classes and then return the appropriate one based on the Device.Idiom property. For example:

    public static Page GetMainPage()
    {
       return Device.Idiom == TargetIdiom.Tablet
         ? new MyTabletPage()
         : new MyPhonePage();
    }
    
    public class MyTabletPage : ContentPage
    {
       public MyTabletPage() { .. construct your Tablet UI .. }
    }
    
    public class MyPhonePage : ContentPage
    {
       public MyPhonePage() { .. construct your Phone UI .. }
    }
    
  • AlexeyShikovAlexeyShikov UAMember ✭✭

    Thanks Mark!

    That is what I wanted to know.

  • VitalyChuprykVitalyChupryk USMember

    @msmith‌

    How to do same but using XAML? Can I have two XAML files with same code behind or?

  • GerryHighGerryHigh USBeta ✭✭✭

    @VitalyChupryk I like the Android approach where it will pick up the correct layout based upon the device (e.g. layout or layout-sw600dp, etc.).

  • VitalyChuprykVitalyChupryk USMember

    @GerryHigh‌, yeah, that would be nice especially for Android and for new possible iOS devices with different resolutions.

  • MarkSmith.8123MarkSmith.8123 USXamarin Team, University, XamUProfessors Xamurai

    @VitalyChupryk:

    You could use a similar technique, yes. You create two different XAML pages, one for Phone, one for Tablet and then do the same trick to load one or the other by checking the Device.Idiom.

    To share the logic, create one or more ViewModels and use data binding, INotifyPropertyChanged and ICommand and put all your real processing in the ViewModel layer vs. the code behind file. The code behind file should really be considered "page-specific", and therefore (in this case) idiom specific.

    Does that help?

    Thanks,
    Mark

  • MarkSmith.8123MarkSmith.8123 USXamarin Team, University, XamUProfessors Xamurai

    Keep in mind that in many cases, the layout system can and will resize content to fit on larger devices; so by simply using StackLayout and Grid, along with *Expand layout options, you can get your content to "fit" properly on phone vs. tablet form factors. So, depending on your app, it might not even be necessary to change all the pages - some might "just work" on both.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai
    edited May 2014

    Filed a bug for XAML idiom support, thank you, no promises on when though ;)

  • VitalyChuprykVitalyChupryk USMember

    @msmith‌. That's idea is obvious. I just hoped I can do simpler. And yes, those layouts are great and in many cases different xaml files for different idioms aren't' required.

    @JasonASmith‌. Would be great. Thanks!

  • BobStekeurBobStekeur USMember ✭✭

    Can anyone point me to where I can find out more about what different size layout folders I should use Ex. layout-sw600dp and how to figure out what dp to use for the device for the layouts

  • cezardcezard PLMember

    Yes, that's my question, now I am working with Xamarin Android poject.

  • MUR0MUR0 USMember
    edited January 2017

    Is it possible to use layout folders for the android part of Xamarin.Forms? For example layout-sw320dp or layout-sw600dp?
    I think those layout folders only accept .axml files which can be created using the android designer. In Xamarin.Forms there are no designer (UI is created with Code or XAML).
    Is the approach with the Device class and the OnSizeChanged function (for Rotation) the only way to create different layouts?

    @BobStekeur https://developer.android.com/guide/topics/resources/providing-resources.html#SmallestScreenWidthQualifier

  • JassimRahmaJassimRahma USMember ✭✭✭✭

    @MarkSmith.8123 what about XAML?

    Do you mean I can have multiple ContentPage in my XAML, one for Phone and one for Tablet?

  • MarkSmith.8123MarkSmith.8123 USXamarin Team, University, XamUProfessors Xamurai

    No, not in the same XAML file, but you could have two XAML files - one for phones, one for tablets.

    Also, check out this post: https://blog.xamarin.com/adaptive-ui-xamarin-forms/ which covers more aspects of adaptive design with Xamarin.Forms from Xamarin University.

Sign In or Register to comment.