Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
  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. 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
  6. 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
  7. • 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
  8. FINDING THE SWEET SPOT Platform Specific Knowledge Overall Code Share

    Level of Customization Xamarin.Forms Xamarin Native
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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.
  15. 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.
  16. 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
  17. 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
  18. 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
  19. 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
  20. • 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
  21. • 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
  22. 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
  23. 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
  24. • 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
  25. • 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
  26. • 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
  27. • 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
  28. Q&A

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

    AllMobileEverything.com   SmartyPantsCoding.com   SmartyP.net EVERYTHING