Lessons Learned Customizing Xamarin.Forms

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Xamarin Native VS Xamarin.Forms

Slide 6

Slide 6 text

Xamarin Native VS Xamarin.Forms

Slide 7

Slide 7 text

Xamarin Native VS Xamarin.Forms

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Xamarin.Forms - One UI to Define them All

Slide 10

Slide 10 text

EXAMPLES OF CUSTOMIZATIONS

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

• 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

Slide 13

Slide 13 text

EVALUATING BEST PLATFORM FIT

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

XAMARIN.FORMS PER-PLATFORM BASICS

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

PER-PLATFORM BASICS DependencyServices

Slide 28

Slide 28 text

PER-PLATFORM BASICS DependencyServices - Common Interface

Slide 29

Slide 29 text

PER-PLATFORM BASICS DependencyServices - Per-Platform Implementation

Slide 30

Slide 30 text

PER-PLATFORM BASICS DependencyServices - Per-Platform Implementation

Slide 31

Slide 31 text

PER-PLATFORM BASICS DependencyServices - Usage

Slide 32

Slide 32 text

PER-PLATFORM BASICS DependencyServices

Slide 33

Slide 33 text

PER-PLATFORM BASICS Custom Renderers

Slide 34

Slide 34 text

PER-PLATFORM BASICS Custom Renderers

Slide 35

Slide 35 text

CUSTOM RENDERER DEMO

Slide 36

Slide 36 text

ADVANCED CUSTOM RENDERER DEMO

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

LESSONS LEARNED

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

• 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

Slide 43

Slide 43 text

• 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

Slide 44

Slide 44 text

TIPS

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

TIPS Reference the Xamarin.Forms Documentation

Slide 48

Slide 48 text

TIPS Reference the Xamarin.Forms Documentation

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

• 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

Slide 51

Slide 51 text

• 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

Slide 52

Slide 52 text

• 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

Slide 53

Slide 53 text

• 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

Slide 54

Slide 54 text

TIPS During Development - JetBrains dotPeek

Slide 55

Slide 55 text

Q&A

Slide 56

Slide 56 text

THANK YOU!

Slide 57

Slide 57 text

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