Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lessons Learned Customizing Xamarin.Forms

SmartyP
February 23, 2016

Lessons Learned Customizing Xamarin.Forms

This is a talk I did at the Atlanta Xamarin Users Group on February 23rd, 2016. The talk covers evaluating Xamarin VS Xamarin.Forms, and how to customize Xamarin.Forms. Please note, this talk was put together in just 3 days, and may have some shortcomings ;)

SmartyP

February 23, 2016
Tweet

More Decks by SmartyP

Other Decks in Programming

Transcript

  1. LESSONS LEARNED
    Presented by Roger Peters  
    Atlanta Xamarin Users Group  
    February 23rd, 2016
    CUSTOMIZING
    XAMARIN.FORMS

    View Slide

  2. ALL MOBILE
    Roger Peters (@SmartyP)  
    Independent Mobile Developer  
    AllMobileEverything.com  
    SmartyPantsCoding.com  
    SmartyP.net
    EVERYTHING

    View Slide

  3. LESSONS LEARNED
    Presented by Roger Peters  
    Atlanta Xamarin Users Group  
    February 23rd, 2016
    CUSTOMIZING
    XAMARIN.FORMS

    View Slide

  4. OVERVIEW
    Xamarin Native VS Xamarin.Forms
    Examples of Customizations
    Evaluating Best Platform Fit
    Xamarin.Forms Per-Platform Basics
    Custom Renderer Demos
    Show & Tell
    Lessons Learned
    Tips

    View Slide

  5. Xamarin Native
    VS
    Xamarin.Forms

    View Slide

  6. Xamarin Native VS Xamarin.Forms

    View Slide

  7. Xamarin Native VS Xamarin.Forms

    View Slide

  8. Built&in(
    Renderers(
    Custom(
    Renderers((
    (grows(as(
    more(needed)(
    (
    As more custom renderers are used, they add to the platform specific UI
    code (top row of illustration), and reduce the overall shared codebase.
    Xamarin Native VS Xamarin.Forms

    View Slide

  9. Xamarin.Forms - One UI to Define them All

    View Slide

  10. EXAMPLES OF
    CUSTOMIZATIONS

    View Slide

  11. TabbedView
    • Color icons on selected (not tinted) - iOS
    • Selected tab background fill - iOS
    • Font label changes - iOS
    • Text position changes - iOS
    • Tab bar fill changes - iOS
    • Tab color changes - Android
    NavigationPage (navigation bar)
    • Custom hamburger icon
    • Custom nav bar color
    • Brand logo next to hamburger icon
    EXAMPLES OF CUSTOMIZATIONS

    View Slide

  12. • Image carousel
    • Square border text entry control
    • Custom picker (both field and popup styles)
    • ListView text cell
    • Custom selected color
    • Custom cell accessory indicators (iOS)
    • Fixed line count with truncation
    • Content Page (allow left and right nav bar buttons)
    EXAMPLES OF CUSTOMIZATIONS

    View Slide

  13. EVALUATING BEST
    PLATFORM FIT

    View Slide

  14. No#Customiza,on# En,rely#Custom#
    Xamarin.Forms#
    (li7le/no#customiza,on)#
    Xamarin.Forms#
    (with#customiza,on)#
    Xamarin.iOS# marin.Android#
    (per#plaCorm#UIs)#
    Experien,al#
    Line#of#Business#
    Func,on#Focused#
    Brand#is#important#
    Experience#is#brand#
    RANGE OF CUSTOMIZATION / BRANDING

    View Slide

  15. FINDING THE SWEET SPOT
    Platform Specific Knowledge
    Overall Code Share
    Level of Customization
    Xamarin.Forms
    Xamarin
    Native

    View Slide

  16. No#Customiza,on# En,rely#Custom#
    Experien,al#
    Line#of#Business#
    Func,on#Focused#
    Brand#is#important#
    Experience#is#brand#
    EVALUATING BEST PLATFORM FIT
    Xamarin.Forms is an architecture with certain goals in mind. It is also not an
    open source project - although it allows for good extensibility. There are finite
    limits as to how deep you can modify Xamarin.Forms.
    There will be brick walls

    View Slide

  17. General suggestions
    • Have illustrations / comps / mood boards illustrating
    what is to be created
    • Do proof of concepts up front when unsure of feasibility
    EVALUATING BEST PLATFORM FIT

    View Slide

  18. General suggestions
    • Have illustrations / comps / mood boards illustrating
    what is to be created
    • Do proof of concepts up front when unsure of feasibility
    Questions to ask your design team
    • How much are we willing to change the design to fit the
    strengths of Xamarin.Forms?
    • How will we respond if you hit a wall?
    EVALUATING BEST PLATFORM FIT

    View Slide

  19. General suggestions
    • Have illustrations / comps / mood boards illustrating
    what is to be created
    • Do proof of concepts up front when unsure of feasibility
    Questions to ask your design team
    • How much are we willing to change the design to fit the
    strengths of Xamarin.Forms?
    • How will we respond if you hit a wall?
    Questions to ask your dev team
    • How much do we want to invest in R&D?
    • How much platform expertise do we have?
    EVALUATING BEST PLATFORM FIT

    View Slide

  20. EXAMPLES OF A BRICK WALL
    Icons on iOS are by
    default just a tinted
    mask, making using
    colored icons require
    custom code. Currently
    the code required to
    change this is done
    within a Private method
    in Xamarin.Forms.
    (ref: Bugzilla ID 38148)
    Update: Thanks to this talk I was told a way to get this working on iPhone
    (not iPad). Check the Xamarin Bugzilla page for this issue for more details:
    h#ps://bugzilla.xamarin.com/show_bug.cgi?id=38148

    View Slide

  21. EXAMPLES OF A BRICK WALL
    Divider colors on a MasterDetailPage on iPad (internally using a
    UISplitViewController) cannot be changed if the drawer can be opened
    and closed. Natively some will add an extra 1px child view and offset it to
    cover it up.

    View Slide

  22. Red Flags
    EVALUATING BEST PLATFORM FIT
    The Android Floating
    Action Button is unique
    to Android. Some
    companies have started
    implementing this in
    their own apps - even on
    iOS.
    This is not something in
    the Xamarin.Forms set of
    controls as there is no 1-
    to-1 with iOS.

    View Slide

  23. EVALUATING BEST PLATFORM FIT
    Segmented controls are
    unique to iOS and have
    no correlation on
    Android.
    May use tabs instead, but
    not if already using tabs -
    no facility for tabs within
    tabs on Android.
    Xamarin Forms
    NavigationPage is likely
    to not allow for custom
    controls within it.
    Red Flags

    View Slide

  24. XAMARIN.FORMS
    PER-PLATFORM BASICS

    View Slide

  25. PER-PLATFORM BASICS
    OnPlatform
    Change your layout based on device OS.

    View Slide

  26. PER-PLATFORM BASICS
    OnIdiom
    Change your layout based on device form factor.

    View Slide

  27. PER-PLATFORM BASICS
    DependencyServices

    View Slide

  28. PER-PLATFORM BASICS
    DependencyServices - Common Interface

    View Slide

  29. PER-PLATFORM BASICS
    DependencyServices - Per-Platform Implementation

    View Slide

  30. PER-PLATFORM BASICS
    DependencyServices - Per-Platform Implementation

    View Slide

  31. PER-PLATFORM BASICS
    DependencyServices - Usage

    View Slide

  32. PER-PLATFORM BASICS
    DependencyServices

    View Slide

  33. PER-PLATFORM BASICS
    Custom Renderers

    View Slide

  34. PER-PLATFORM BASICS
    Custom Renderers

    View Slide

  35. CUSTOM RENDERER DEMO

    View Slide

  36. ADVANCED CUSTOM
    RENDERER DEMO

    View Slide

  37. SHOW & TELL
    (The most customized app I’ve done)

    View Slide

  38. LESSONS LEARNED

    View Slide

  39. Offscreen “hamburger” menus operate
    differently in many apps. Amazon for
    instance has both the hamburger menu
    and a back button visible at the same time.
    Be sure your entire team understands how
    the offscreen nav will work in XF relative to
    the back stack and when it is available to
    avoid confusion down the line.
    Offscreen nav menu items effectively
    operate the same as a tab bar to swap out
    the visible page.
    NOT ALL HAMBURGERS ARE CREATED
    THE SAME

    View Slide

  40. Client wanted to show 4
    lines of detail per
    location. This required
    building custom
    renderers for both iOS
    and Android.
    Alternative closer
    matching the native
    platform experience
    could have avoided this
    need.
    DON’T REINVENT THE WHEEL UNLESS
    YOU REALLY NEED TO

    View Slide

  41. Navigation stacks
    relative to tabs are
    different between
    Android and iOS.
    On iOS, each tab
    contains it’s own
    navigation stack
    On Android, one
    navigation stack wraps
    all tabs.
    THERE ARE STILL DIFFERENCES IN
    NAVIGATION BETWEEN PLATFORMS

    View Slide

  42. • For Android, decide if basing off of Material Design or Holo
    Theme up front
    • Pages and Layouts can be harder to customize than controls
    • When you modify how controls render, factor in all details
    (ex: font-size adjustment, expanded status bar when on
    phone calls, etc.) to avoid appearing janky
    • Just because you can do something, doesn’t mean you
    should
    • Stacking ListViews 

    inside a StackLayout
    • Customizing controls in XAML
    LESSONS LEARNED

    View Slide

  43. • Xamarin.Forms is more powerful than I thought
    • Xamarin.Forms is most powerful with a knowledge
    of platform level intricacies
    • Xamarin.Forms has walls that can’t be surpassed
    • Xamarin.Forms can be used for much more than just
    line-of-business and proof-of-concept apps
    LESSONS LEARNED

    View Slide

  44. TIPS

    View Slide

  45. TIPS
    During Development - Grid & StackLayout Spacings
    Grids and StackLayouts
    have spacing that is not
    0 by default, this will add
    unexpected gaps if you
    don’t change them.
    Grid.RowSpacing
    Grid.ColumnSpacing
    StackLayout.Spacing

    View Slide

  46. TIPS
    During Development - Gorilla Player
    Gorilla Player allows you
    to preview your XAML
    layouts on both iOS and
    Android simulators as
    you lay it out.
    gorillaplayer.com

    View Slide

  47. TIPS
    Reference the Xamarin.Forms Documentation

    View Slide

  48. TIPS
    Reference the Xamarin.Forms Documentation

    View Slide

  49. TIPS
    Reference the Xamarin.Forms Documentation
    Make sure your designers are
    aware of the documentation
    and how to use it.

    View Slide

  50. • Get familiar with mobile controls on all supported
    platforms
    • Test on physical devices early
    • Mobile platforms have limits regardless of platform
    • Optimize approach for selected technology platform
    TIPS
    General

    View Slide

  51. • Have mood boards containing screenshots of apps
    that are similar to what is to be created
    • Do proof of concepts up front when unsure of
    feasibility
    • Evaluate the priorities of design VS development
    • Decide if the goal is native controls on each
    platform or custom styled controls that are the same
    on both platforms
    TIPS
    Before you get started

    View Slide

  52. • Modifying bound fields on a ViewModel on a background
    thread can cause UI thread exceptions
    • Calling a Command’s RaiseCanExecuteChanged() on a
    background thread can cause UI thread exceptions
    • IsVisible is different (bool vs Visible/Hidden/Collapsed)
    • Converter method signature is different (string for
    language vs CultureInfo)
    • Don’t name your App ‘App’
    TIPS
    Differences between Windows XAML and XF XAML

    View Slide

  53. • Don’t be afraid to use external packages to fill gaps
    where special controls are needed
    • Don’t start image filenames with numbers, or
    filenames that contain dashes to avoid having different
    image names per platform
    • Use ResourceDictionaries for common color
    references
    • Remember that Xamarin.Forms controls internally use
    native controls
    TIPS
    During development

    View Slide

  54. TIPS
    During Development - JetBrains dotPeek

    View Slide

  55. Q&A

    View Slide

  56. THANK YOU!

    View Slide

  57. ALL MOBILE
    Roger Peters (@SmartyP)  
    Independent Mobile Developer  
    AllMobileEverything.com  
    SmartyPantsCoding.com  
    SmartyP.net
    EVERYTHING

    View Slide