Lessons Learned Customizing Xamarin.Forms

10d21184dd4238cdb334ed3939a1d0bd?s=47 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 ;)

10d21184dd4238cdb334ed3939a1d0bd?s=128

SmartyP

February 23, 2016
Tweet

Transcript

  1. LESSONS LEARNED Presented by Roger Peters   Atlanta Xamarin Users

    Group   February 23rd, 2016 CUSTOMIZING XAMARIN.FORMS
  2. ALL MOBILE Roger Peters (@SmartyP)   Independent Mobile Developer  

    AllMobileEverything.com   SmartyPantsCoding.com   SmartyP.net EVERYTHING
  3. LESSONS LEARNED Presented by Roger Peters   Atlanta Xamarin Users

    Group   February 23rd, 2016 CUSTOMIZING XAMARIN.FORMS
  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
  5. Xamarin Native VS Xamarin.Forms

  6. Xamarin Native VS Xamarin.Forms

  7. Xamarin Native VS Xamarin.Forms

  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
  9. Xamarin.Forms - One UI to Define them All

  10. EXAMPLES OF CUSTOMIZATIONS

  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
  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
  13. EVALUATING BEST PLATFORM FIT

  14. No#Customiza,on# En,rely#Custom# Xamarin.Forms# (li7le/no#customiza,on)# Xamarin.Forms# (with#customiza,on)# Xamarin.iOS#&#Xamarin.Android# (per#plaCorm#UIs)# Experien,al# Line#of#Business#

    Func,on#Focused# Brand#is#important# Experience#is#brand# RANGE OF CUSTOMIZATION / BRANDING
  15. FINDING THE SWEET SPOT Platform Specific Knowledge Overall Code Share

    Level of Customization Xamarin.Forms Xamarin Native
  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
  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
  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
  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
  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
  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.
  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.
  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
  24. XAMARIN.FORMS PER-PLATFORM BASICS

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

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

    factor.
  27. PER-PLATFORM BASICS DependencyServices

  28. PER-PLATFORM BASICS DependencyServices - Common Interface

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

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

  31. PER-PLATFORM BASICS DependencyServices - Usage

  32. PER-PLATFORM BASICS DependencyServices

  33. PER-PLATFORM BASICS Custom Renderers

  34. PER-PLATFORM BASICS Custom Renderers

  35. CUSTOM RENDERER DEMO

  36. ADVANCED CUSTOM RENDERER DEMO

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

  38. LESSONS LEARNED

  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
  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
  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
  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
  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
  44. TIPS

  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
  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
  47. TIPS Reference the Xamarin.Forms Documentation

  48. TIPS Reference the Xamarin.Forms Documentation

  49. TIPS Reference the Xamarin.Forms Documentation Make sure your designers are

    aware of the documentation and how to use it.
  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
  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
  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
  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
  54. TIPS During Development - JetBrains dotPeek

  55. Q&A

  56. THANK YOU!

  57. ALL MOBILE Roger Peters (@SmartyP)   Independent Mobile Developer  

    AllMobileEverything.com   SmartyPantsCoding.com   SmartyP.net EVERYTHING