Creating Adaptive UIs with Xamarin.Forms

Adrian.StevensAdrian.Stevens USXamarin Team, University, XamUProfessors, Developer Group Leader Xamurai
edited October 16 in Xamarin Blog

Oct 16, 2017 - We just blogged about techniques we can use to create flexible, responsive and adaptive UIs that look and work great across multiple device types (or idioms):

Posts

  • JimBennettJimBennett GBInsider, University, Developer Group Leader ✭✭✭✭

    Checks blog, no post...
    Taps foot...
    Checks blog, no post...
    Taps foot...

  • Adrian.StevensAdrian.Stevens USXamarin Team, University, XamUProfessors, Developer Group Leader Xamurai

    It should be live now :)

  • JaredHJaredH AUMember ✭✭

    It would be nice to have something better than Device.Idiom for Adaptive UI. For an adaptive UI it's typically more important to know the screen/window size than the hardware. I'd rather some usable state triggers or Android shortest width type approach to use in my XAML. As it stands right now, Device.Idiom doesn't accurately represent the size of the app nor the type of device it's running on. When multitasking on an iPad, a skinny little app still reports as running on a tablet. When multitasking on an Android tablet however, a skinny app says it's running on a phone and resizes accordingly. In a tiny UWP window where I'd be happy for the phone interface to kick in, it's just Desktop all the way. What good is Device.Idiom going to do for a responsive Windows app that could easily range from 320px to 3,840px wide or more?

  • DepechieDepechie BEInsider, Developer Group Leader ✭✭
    edited October 17

    Have to agree here with @JaredH !
    I discussed this already on an BugZilla item https://bugzilla.xamarin.com/show_bug.cgi?id=53301 but the general idea then was to leave it as is...
    Seeing there is now again a blog post about it, you guys better try to add what's on the roadmap so that uwp devs know things will be addressed in the near future.

    The fact that Idiom.Tablet is not hit on UWP is just wrong. For reference look at the form factors here : https://blogs.windows.com/buildingapps/2016/06/27/scaling-your-phone-app-design-to-all-uwp-device-families/

  • Adrian.StevensAdrian.Stevens USXamarin Team, University, XamUProfessors, Developer Group Leader Xamurai

    We can use the Width and Height properties on the Page class to determine the screen-size so we can do more fine-grained adjustments. Combining the screen size with Device.Idiom gives us quite a bit of information about the executing device.

    For UWP device families, we'll need to call into the platform-specific code. Let me know if you'd like to see a sample project on how to do this and I'll post it on GitHub.

  • DepechieDepechie BEInsider, Developer Group Leader ✭✭

    It's not that I don't know 'how' to do it... it's that Xamarin Forms now provides a promise it can't keep. Like tell people if they are on a Tablet or not and when a win phone runs in continuum mode it will also not provide the correct idiom.

    Still like to see a fix than having faulty results :)

  • JaredHJaredH AUMember ✭✭
    edited October 19

    @Adrian.Stevens said:
    We can use the Width and Height properties on the Page class to determine the screen-size so we can do more fine-grained adjustments.

    That can be a real pain if you just want to tweak a few properties inside a DataTemplate that sits inside another DataTemplate. OnIdiom goes close to solving the problem but it's not the right tool for the job, and shouldn't be advertised as such (IMHO). I recently bound a WidthRequest inside a DataTemplate to a property of the parent page's view model which is updated with the appropriate value based on a calculation using the page's Width and Height, but that was not a pleasant experience, nor something I'd rather do often.

  • NickRandolphNickRandolph AUUniversity ✭✭

    Awesome to see blog posts talking about Adaptive UI instead of just building for a single mobile style interface. We just posted about using visual states in xamarin forms applications (https://nicksnettravels.builttoroam.com/post/2017/10/15/Getting-Started-with-Visual-States-in-Xamarin-Forms-using-BuildItForms.aspx). It has support for triggers but I just need to implment some of the basic triggers (eg window size, platform idiom etc) - definitely keen to hear from others on what triggers they'd like to see implemented?

  • GVxGVx USMember ✭✭✭

    omg... where was this post a year ago ? Lot's of good ideas there, thanks....

  • GVxGVx USMember ✭✭✭

    @Depechie said:
    Like tell people if they are on a Tablet or not and when a win phone runs in continuum mode it will also not provide the correct idiom.

    Agreed.... Idiom is broken in general... I have an Android Tablet, which is actually a real tablet device, 10 inch, but Xamarin Forms reports it as a phone... Oh the joy to then go and re-write an entire UI xaml codebase as I have no way to force Idiom to be a tablet.....

  • DepechieDepechie BEInsider, Developer Group Leader ✭✭

    @NickRandolph good job on the triggers!

  • NickRandolphNickRandolph AUUniversity ✭✭

    @Depechie let me know what triggers you build and whether you want any to be include in the library itself

  • BenjaminFunkBenjaminFunk USMember ✭✭

    This is brilliantly simple to implement. It works perfectly for orientation changes. :)

Sign In or Register to comment.