Cross Platform Image

Resources Management in

Xamarin.Forms

- Udara Alwis -CODENAME: [ÇøŋfuzëÐ SøurcëÇødë]

I am Udara Alwis

• Xamarin Developer / Enthusiast

• Mad Love for Mobile Development / UX

• Microsoft Dot Net FTW!

• 23 Years of Awesomess…

• Nature, Adventures, Running, Skateboarding, Cycling and Socializing

• Occasional YouTube-er!

linkedin.com/in/UdaraAlwis

Yay! Xamarin Forms!

• Truly Cross platform

• Native Performance

• Native Looks and Feel

• Share almost up to 100% of codebase

Take a moment… Resources?

• Resources in Mobile App Development

• For Decorating/Enhancing/Improving a Mobile App

• Specially Image Resources

• IT IS CRUICIAL!

• Specially Cross Platform Mobile Development!

• How about Xamarin Forms?

Xamarin Forms? Image Resources?

• Two ways,

1. Local Images

2. Embedded Images (Resources)

1. Xamarin Forms Local Images

• Image Files to be added to each application project

• Reference from Xamarin.Forms shared code level

• Same File Name for every platform

• Fully Native features. But Properties Should be

configured locally

(Build Actions, Sub-Directories, Resolution Support, etc…)

• Valid File naming for each platform

2. Xamarin Forms Embedded Images

• Image File are Embedded in the PCL Assembly

as Resources

• Build Action: EmbeddedResource

• Centralized…

• No control over Screen Resolution / Device Type

• Handle everything through code

Blah blah… in reality, it sucks!

• Duplicate Effort? Or Triplicate?

• Hard to make changes, update and monitor

• Resources, only going to increase.. Imagine 50? 100?

• Naming conventions?

• Manual Management of everything

• Multi-Resolution / Multi-Device Support, NIGHTMARE!

• As Embedded Images? Give me a break! Lol

So what is the Solution?

• Think about it…

• We need a solution that,

• lets you store your images in one place (ex: PCL Project level)

• provides multi-screen resolution/ device type support

• And doesn’t suck!

• Our Struggle? Yes it is real!

Behold, Forms9Patch Library

“ Simplify image management and text formatting

in your PCL Xamarin.Forms mobile apps…”

• Provides Centralized Image Resources management

• With complete multi-resolution/Device support

• Exclusively for Xamarin.Forms

• For iOS and Android. But unfortunately not yet for Windows Phone

Forms9Patch Library…

• Manage all your Image Resources right from your PCL project

• Generate and configure your Image Resources once.

• Finds the best fit image among the provided images based on Screen Resolution/ Device type

Xamarin Forms Image Mechanics?

• Xamarin.Forms.ImageSource Instance• Instance that loads (from File or Web) and holds the Image Source object in

memory

• Xamarin.Forms.Image Control/View• UI Control or the View that displays and populates the ImageSource on to the

User Interface

Likewise Forms9Patch?

• Forms9Patch.ImageSource instance

- Extends Xamarin.Forms.ImageSource

• Forms9Patch.Image Control/View

- Extends Xamarin.Forms.Image

• Interchangeable in-between

Forms9Patch.ImageSource instance

- Automatically loads the best fit image among the provided images (EmbeddedResource) based on screen-resolution/device

- No need of explicit image extension

- Forms9Patch.ImageSource.FromMultiResource() static method

- Supports same file formats as Xamarin.Forms.ImageSource

Forms9Patch.Image Control/View

- Scalable image view

- Ability to Tile an image within its parent

Stretch-ability of an Image

• Native development situation?

• iOS's provides resizableImageWithCapInsets

• make an UIImage a scalable image

• CapInset argument is used to specify the regions (distance inset from

the edges) which will not scale

Stretch-ability of an Image

• Android provides NinePatchDrawable to allow apps to

• display Nine-patch images as scalable drawing elements.

• used to mark the regions that are allowed scale

Stretch-ability of an Image

• Both are great!

• Android Nine-patch image format allows for un-scalable regions to be anywhere in the image (not just at the edges).

• Scaled regions are marked within the image file

• So scaling can be customized to each file

• iOS resizableImageWithCapInsets define the scaling regions at runtime - which provides some flexibility and convenience.

Stretch-ability of an Image in Forms9Patch

• Seeing the advantages to both approaches,

• Forms9Patch.Image allows for both.

• If NinePatch image is provided -> Use the Android approach

• If CapInsets property is provided -> Use the iOS approach

• Duh! You can’t use both!

• CapInsets will override NinePath image regions

Stretch-ability of an Image in Forms9Patch

• Yes thanks to Forms9Patch now you could

• Use Android’s Nine-Patch image stretch-ability in iOS

• And iOS’s resizableImageWithCapInsets in Android

• With Nine-Patch image or CapInsets property

NinePatch Image vs CapInsets in Forms9Patch

Forms9Patch Naming Convention Schema

• Unique naming convention

• Identification of multi-device / multi-resolution image files

• Similar to iOS approach has ~3x better performance

• project_assembly_name.image_path.base_image_name

[resolution_modifier][device_modifier].filename_extension

Forms9Patch Naming Convention Schema

Demo – Let’s try it out

Forms9Patch Extra Goodies…

• Forms9Patch.Label

- Custom Fonts

- HTML Formatted Text

• ImageButton

- State Support, Gestures

• Forms9Patch Layouts

- AbsoluteLayout, Frame, Grid, RelativeLayout and StackLayout

• Etc…. So much more…

• More about Forms9Patch : http://forms9patch.com/

Conclusion

• Image Resource Management in Cross Platform Mobile

Development is crucial

• Xamarin Forms default Image Management is not

sufficient enough

• Forms9Patch Library provides Provides Centralized Image Resources management

• With complete multi-resolution/Device support

Thank You!

For Weekly Xamarin Articles check out my blog, https://theconfuzedsourcecode.wordpress.com

- Udara Alwis

CODENAME: [ÇøŋfuzëÐ SøurcëÇødë]