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