Xamarin.Forms on Tablet and Smartphone

Hello,

currently we port our html5 app to Xamarin. Can anybody say what is the best way to build and style the new App for Smartphone and Tablet.
Did we need different Apps or can we solve this in only one App?

Thanks in advance

Posts

  • rmarinhormarinho PTMember, Insider, Beta Xamurai
    edited June 2014

    You can have only one app, but you could have different views/pages.

    Then in your code you could use the OnIdiom see if the device is a tablet or not and show a tablet page or a phone page

  • CraigDunnCraigDunn USXamarin Team Xamurai
    edited June 2014

    We do not have detailed docs on making UIs for different form factors, but the Working with Platform Tweaks document explains how Device.Idiom can be used to detect phone versus tablet.

    if (Device.Idiom == TargetIdiom.Phone) {
        // layout views vertically
    } else {
        // layout views horizontally or use different Page
    }
    
  • SKallSKall USMember ✭✭✭✭

    Just FYI, on the XForms.Toolkit you can also determine the exact measurements of the display for finer grain of control:

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭

    If we're using XAML (as I am), any views/best practice on where to switch depending on idiom?

    Is it possible to have conditional idiom-based code in the XAML? Can one include other XAML layouts?

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    I don't think one can avoid coding completely. There are two approaches normally employed.

    1. Design two different views for portrait and landscape and use the appropriate one based on the Idiom.
    2. Place your controls in a grid with sufficient rows and columns and move the controls as required, again, based on the Idion.

    So both the approaches need to test what is the current device orientation. So even if you want to do it in XAML, you will have to have two templates, albeit in the same XAML, and use the one that is appropriate.

    So you can't avoid coding altogether. A combination is the best.

  • SKallSKall USMember ✭✭✭✭

    I am hoping Xamarin will implement device independent pixel size for their next release as the layout sizes are all over the place without the OnPlatform code. I would assume the layout dimensions are bindable so one could recreate something like this on XAML:

    http://forums.xamarin.com/discussion/18670/define-layout-sizes-in-inches-with-idisplay-extension-code-only#latest

    At this point, without a XAML visual designer, I don't see much point in XAML based pages over code based. From code they just much more flexible (and easy) to construct. If the objects were serializable (which Xamarin indicated they are working on) that would be another story of course.

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    Earlier VS used to have anchored self-adjusting controls. In this if you drag an edge of control, the other anchored one used to change accordingly. Also in WPF we have auto-scaling. Probably these techniques should be more prevalent so that designing a UI is more practical.

    @SKall‌, In VS doing it in XAML is so convenient since we can see the UI changes immediately. With code based, you have to run the app to see the changes. Xamarin.Forms just born. I know they must be working hard to give us a GUI design surface. You know the advantage of having a design surface for Xamarin.Android against the traditional Android dev tools. I generally use XAML to present the initial / most used UI and use the code for context based manipulations.

    @StephaneDelcroix‌ has shown me an exciting way of using OnIdiom. I think I will be using it more often.

  • RussellFustinoRussellFustino USUniversity ✭✭

    The test below works to detect an iPad, but not an Android tablet... I have tested on Nexus 7 (7 inch tablet) and Nexus 9 (9 inch tablet) emulators (both Android player and Android SDK emulators) as well as an actual device 7 inch tablet, Toshiba Excite AT7-C8 tablet. Has anyone else gotten this statement to detect Android tablets? All of the devices above return true on the phone test even though it is tablet.

    if (Device.Idiom == TargetIdiom.Tablet) ...

  • RussellFustinoRussellFustino USUniversity ✭✭

    I bought a 10 inch HP 10 Plus 2201 Android Tablet, and it has a higher resolution 1920x1200 and has a bigger diagonal screen size then the Nexus 7, Nexus 9 and Toshiba Excite AT7-C8 tablet as discussed above. It works and detects that this device is a tablet! I am guessing the algorithm for determining tablet or phone is based on both diagonal size as well as resolution as the three 7-9 inch tablets all had lower resolutions? What is the criteria for determining if a device is tablet or phone factor? Here is the link to the device that is detected as a tablet in the code: http://www.amazon.com/HP-Plus-10-1-Inch-Tablet-Silver/dp/B00LPC3W1Q/ref=sr_1_1?ie=UTF8&qid=1427999317&sr=8-1&keywords=HP+10+Plus+10.1-Inch+16+GB+Tablet+(Silver)

  • RadekOborilRadekOboril CZMember
    edited April 2015

    @RussellFustino Genymotion image of Nexus 7 also returns TargetIdiom.Phone :(

  • Question: Is every comment that comes from https://github.com advertising for consultant services?

  • RobdeHaasRobdeHaas NLMember
    edited January 2016

    Create a method that get's excecuted on appearing

    protected override OnAppearing(){
    
        //Now after appearing the width and height of your application are known.
    
        double w = this.Width;
        double h = this.Height;
    }
    
  • BhaurajBiradarBhaurajBiradar USUniversity ✭✭

    I think below override method will solve, irrespective of smartphone or tab size

    protected override void OnSizeAllocated (double width, double height)
    {
    base.OnSizeAllocated (width, height);
    }

Sign In or Register to comment.