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 ;)

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