 Good evening. So how are you doing today? Everyone good? Come on, cheer up. It's the end of the day. All right. So today I'm going to talk about cross-platform image resources management in submarine forms. So before I get started, can I see a quick show of hands who's done any native mobile development here? Any Android developers, iOS, Windows phone? OK. So I won't get into much detail, since the crowd isn't that into native development. So before I start off, let me give a little introduction to myself. I'm a submarine developer here in Singapore. And I'm a crazy submarine enthusiast. And I happen to be a Microsoft fanboy too, yeah. And so I'm still 23-year-old. The kid goes in trouble here and there. And I go on adventures running skateboarding when I'm not coding. So yeah, that's me. Now, submarine forms, yeah, the true cross-platform approach of submarine lets you create mobile applications with .NET, and with full native performance, looks and feels and everything. So allowing you to share almost up to 100% of your code base across three platforms. So that's submarine forms. Now let's take a little moment here, because when it comes to mobile development, managing the resources of your mobile application is very crucial, especially when it comes to image resources. The stuff that we use to decorate and enhance and improve the user experience of our mobile application. So managing these image resources in your mobile application development, it's very crucial. And now when it comes to submarine forms, let's see how does submarine allows us to manage our image resources within the framework. So there are two approaches that submarine forms provides us for managing image resources in our code. That is by using local images, whereas putting your images in the local native projects. And then the second approach is using embedded resources, putting your images in the PCL project level as embedded resources. Now, if you get into the further details of these two approaches, the first approach, that is the submarine forms local images, where you have to put all your images in the local native project level of submarine form solution, whereas submarine Android, iOS, and Windows Phone, and address them from the PCL project level. And something you have to keep in mind is you have to use the same file name for all the images that you put in these three platform code. And so that's a little bit of hassle there. And also, the bright side of this approach is that it gives you full native features and properties to configure, such as build action, actions letting you do control the sub-directories, resolution support, providing different image resources for different resolutions, and so on. But what is the main disadvantage here is that you have to manage this in all three platforms, three places, just for one change. So let's keep that in mind and move on to the second approach that submarine forms provides us. That is the embedded resource approach, whereas it allows you to put your images in your PCL project level by setting those image resources as embedded resources. And this is more of a centralized solution. It's actually quite good, but the only problem here is it does not give you any control over the screen resolution support or the device support for your image resources. So if you are to handle these stuff, you have to manually handle them by code, and that is not a fun thing to do. I have tried, trust me. So all that being said, these two approaches, they're not very practical at all. So think about it like, in the first approach, you have to put these images in all three native project levels with submarine forms. And how much of a hassle is that? If you want to make one change in an image, you have to do in all three other native projects and change the name and do all the three platform projects. And also, this approach is okay for 10 or 20 images, but what if your project gets bigger and bigger, more resources gets added? Let's say it goes up to 100 images. How are you to manage these resources like in three different places? So that's no excuse at all. Now, how about naming convention? iOS uses a different naming convention, Android different, Windows Phone different, so on you have to think of all these aspects when it comes to managing your image resources with submarine forms. So, and also multi-resolution support, Android uses a different approach using the image resources with the resolution support and the device type like Windows, the phone devices or the tablet devices and so on. Now, some of you might say, if the first approach is such a hassle, then why not we go for the second approach, the embedded images? Well, if you think about it, it's really not a solution at all because it does not give you any control over the resolution support or the type of device support when loading your images to your mobile application during the runtime. Now, that being said, like what is the actual solution that we need at this point, right? The thing we need here is that some solution that lets you store your images in one single place, a centralized location, preferably the PCL project, it's a good place to start, and it should also provide multi-screen resolution support for your image resources. So at the runtime, it lets you the option to load the specific image resource suited for the resolution of the screen and so on. And the device type, if it's a phone load this image, if it's a tablet, then load this image and so on. And it should not suck, that's obvious. Now, we've been struggling this issue for weeks and months and we've come to a point that we came to a point that we wanted to implement our own solution for this ground up. Then suddenly, lucky enough, we stumbled upon this library right here, Forms Nine Patch Library. So by the author of this project, he defines this as a simplifying image management in PCL Samurain Forms project. So what this library does is that it provides you a centralized solution for managing your image resources when it comes to Samurain Forms development. So this library also supports a full multi resolution and multi device support for your resources. So you don't have to worry about all that anymore. It'll be done by this library automatically. And this one is built exclusively for Samurain Forms. So you have nothing to worry about the support and everything. And this one is currently available for iOS and Android, but not for Windows Phone unfortunately at the moment. So speaking of this library, this lets you put all your image resources in the PCL level, it's a PCL project level and manage them at one project level itself. And so you just have to generate your image resources for different screen resolutions and put them in one place just one time, done deal. So, and the best thing about this library is that it during the runtime, when we ask this library to load an image, what it does is it goes through the provided images that the images image resources we have provided and it will find the best fit image based on the resolution of the device that the app is running on and the type of device whether it's a phone or a tablet and it will automatically load these resources by itself. We don't have to worry about the resolution support or whatever anymore. It will automatically taken care by this guy. Now, before I continue with this library, now let's see what Samin Forms provides us from handling images at the runtime of our application. Samin Forms provides us two components for images that is image control or the image view and the image source with the component that loads the image from the disk or the web and holds it in the memory. Now, the image control here it takes that image source and populates into the UI. Now, you can see at the bottom how those two interact with each other. You set the image control source to the image source that is loaded from file or from URI and so on. So that is Samin Forms approach. Now, likewise, how does Samin Forms nine patch solve this issue, right? What it does is that the special thing about this, the beauty of this library is that it provides you two components just like Samin Forms does, but the special thing is these two components, they extend from Samin Forms default controls. So these two components, they have the interchangeability between Samin Forms images and the Forms nine patch this library images. So what I mean by is that if you use the Samin Forms image control, you could use that Samin Forms image control with the Forms nine patch image component. And if you use the Forms nine patch image control, you could use it with the Samin Forms image source instance. So likewise, this is a really great library for resource management, image resource management. Now, if you dive into the details of those main two components, is that this component right here, image source instance component, it loads the image during the runtime by going through the images that you have provided and finding the best fit image resource based on the screen resolution. It does for you automatically. And also this component eliminates the need of defining the images extension in your code. So it kind of simplifies your code base as well. And this method right here, this static method that this component has from multi resource method, we use this method to do all this magic that I have mentioned at the top that is automatically load the best resources based on the device resolution. Now, this also supports the same file formats as Samin Forms component does because it extends from the same base. And then Forms nine patch image control, the second component that this library provides, it provides a very nicely scalable properties for these images to populate in your UI. And also it gives you a new approach of stretching your images across the UI. So in Samin Forms default image control, what we have is aspect fit, aspect fill, right? But this guy provides the tiling capability of an image. So when you load an image to the UI, it allows you to like tile the image across the parent view, not just fit it or just stretch it out in an ugly manner. So this is another useful property that this library provides. Now, let's talk a little bit about the images, how it gets stretched during the runtime, right? Now, because it is very crucial because when we develop mobile applications, we need to make sure that our app's resources, the image resources has the capability to support multiple devices with the screen types and device types and so on. So we need to make sure that our image resources, they get stretched out at the runtime very nicely without interrupting the user experience. So how do we do this in native level? In iOS, what we do is we use the resizable image with cap insets functionality, which allows us to create the UI image that could stretch across the screen without interrupting the user experience. So we use the cap inset property, the argument in order to define the regions of the image that we do not want to stretch during the runtime. So what happens here is that it nicely stretched across the interface without interrupting or without over-stretching the image through the parent component. So that's how it is done in iOS. Now in Android, Android provides a nine-patch strobe component where it allows you to define the areas that you need to stretch at the runtime. So we have the image and then what Android allows you to do is with the nine-patch tool, we could define the regions that we need to specifically stretch during the runtime so we can make sure that it doesn't over-stretch or whatsoever. Now that's how it is done in Android. So both these approaches, native approaches are great and they have their own advantages. Now if you consider Android, Android lets you define these stretchable regions for each and every image file, right? So it gives more flexibility and that is really great because we know what kind of a fragmented device environment we have here when it comes to Android. Like so many types of device resolutions and device types and so that's a really great approach for Android environment. But when it comes to iOS, we don't have that much of flexibility but we don't really need that much because we have quite set of predefined set of devices and image resolutions that we have to deal with but it also provides somewhat of flexibility towards the iOS environment considering that there's not much fragmentation of devices. Now when it comes to forms nine-patch, so because those two native approaches are really great, forms nine-patch library allows you to use both the approaches with Samurain forms. So what I mean by is that if you want to use the Android's image stretching approach with your image resources in Samurain forms, you could do that with this library. And how about the iOS approach? You could do the same with this library. Now by defining the cap insets property just like you do in native iOS. So but the thing is you can't use both because it doesn't make sense, right? I mean in iOS you define the regions that you don't want to stretch during the runtime. In Android you define the areas you want to stretch, right? So those two different aspects. Now so it doesn't make any sense to use both of them at the same time. So if you're using these properties, make sure use one that is best catered to your requirement. So that's being said. Now with that implementation of this library, this one provides you the option to use nine-patch images with Samurain forms and also iOS is scaling properties with Samurain forms. So yeah, thank you nine-patch. And that being said, here's a little example how it is being used with the library. And we have a normal image right here and then we mark it as a nine-patch with the nine-patch tool that Android SDK provides. And at the runtime with the forms nine-patch library we load the image and this is how it nicely gets rendered on the screen and it stretches fully without interrupting the user experience. And now if you consider this image right here, this one uses the iOS approach, the Capinsets property. So now imagine this image being stretched across the screen with the normal Samurain forms image control. It will look extremely ugly because it will try to stretch to the fullest. And yeah, so it'll give some overstretched user experience. But with this property right here with the help of forms nine-patch library we can define the Capinset regions that we need to, we do not need to stretch and it will nicely stretch out only the stretchable areas of the image. So that's how the stretchability is handled in this library. Now I'm talking about the naming convention of the image resources when we are using this library that this one uses somewhat similar to iOS's naming approach that is defining by 2x or 3x resolution and so on. And so the way we address these images that we put into our PCL and use it in our code level is that we will call the multi-resource loading method and we define the same project or same the name and then the file, the folder part of the image and then we give the images name. So that's how the naming convention is done and how we load the image through the library at the runtime. And also you can also give the file name extension and so on, but it's not really necessary. So that's been said now. The naming convention with the forms nine patch library is that it maps their own naming convention towards the native naming convention such as if you consider the at 2x naming convention that you could add as a suffix for your image resource it automatically gets mapped to the iOS at 2x property and in Android maps to the XHDPI naming convention. So it balances quite nicely in between the iOS and Android native level naming convention and this libraries convention and also same as if the type of device whether it's a phone or tablet type of resource you want to load you could define them right just like this and it will get mapped to the native level. So now that's been done. Let's give it a try for the demo. Now, all right. So here with special studio. Okay, so here's here I have a sample project that is pure empty but I have included the forms nine patch library in this project. Now first of all let's see how we usually load an image, right? So first of all let's create a resource folder here. Okay, the resource and let's see images. Image resources, yeah. Okay, let's just, yep, okay. So let's add these three images here. Okay, now I'm gonna load these images as some informed embedded resources. Content and then embedded resources. All right, so let's create an image. New image not forms nine patch. Some forms image from resource. So the way we usually load an embedded image in some forms is that we give the assembly name that is my demo app and then the resources folder name. And then we give the, oh, sorry. Give the image name that is image.png. And let's load this too before I do that. Let me add a new label here. Okay, so that's done. Let's load this guy. So. Oh, oh yeah, resources. All right, thanks for that. Resources, all right. So let's, and also we have reset the embedded resources. Okay, so let's run this and see. Oh, yeah, by the way, if you want to find out more information about this library, you could go to ninepatch forms ninepatch.com. And yeah, so let's see on Android. Oh, yeah, so this is how the image is loaded, the default image control that is provided by Samarin Forms. Now, see that it loads the smallest image, like normal default image. We don't have any control over the resolution or the device type here. So that's why it uses the default name and just load it straight away as an embedded resource. But let's stop the button and come on. Oh, yeah. All right, now let's use the Forms ninepatch control. Forms ninepatch control image source. It's from multi-resource method. And then just like we do here, we are gonna pass in the name of the image, but we're not gonna be putting up the extension because it's not required with the library. Like that. Let's put a nice little label here. Let's center the text. Horizontal Text Alignment Center. Boom. The screen is really small, guys. So it takes a little time to type and they're hard to see. Okay, so there we go. It's like that. Do it here. Boom. Then Forms ninepatch image control. Forms ninepatch image control. Okay. So if you can see at the resources folder that I created and I added three images, right? So the reason is that I want to show you that I have these three images with three different results. I mean, three different image, no, sorry, screen resolution support, that is by the smallest to the biggest and so on, by with the actual naming convention of Forms ninepatch library, that is the smallest one is the normal naming. And then if you want to support a bigger one, then you put the active just like you in iOS and then three X and so on. So that is the naming convention. Now, if you go to the application, you can see that it loads the image with that supports this screen resolution perfectly. So at the top, you can see that we are using the normal salmon forms image control, but we use the forms ninepatch. It uses it specifically tailored image that is compatible with the screen resolution. So, yeah, now that's being said. Yeah, let's try out the screen image stretchability property now. Okay, so I'm not going to type that whole thing. It's going to take a little time. So have this tiny little code here with cap insets. Boom. All right. Erase this whole thing. Oh, yes. So just like I showed in the sample, let's use the same image and then try to use this one with the assignment forms default image control and the forms ninepatch library. Better results. All right. Cap insets. Everything is good. All right. Let's see. Okay, so here is the end result of using salmon forms image control and the forms ninepatch image control. You can see with the default control, when the image gets stretched across the screen, it gets all overstretched and ugly, right? Completely disrupts the user experience, but with forms ninepatch, we define the cap inset regions that we do not want to stretch and it stretches across the screen very nicely without interrupting the UX. So now if I show you the code that we are using here, how I set the cap insets property. Yeah. So this is the forms ninepatch image control and you can see we are setting the cap insets and we are also setting the filling aspect property to aspect fill that is to fully stretch it out throughout the parent component. Now in this salmon forms default image that we are also setting the aspect of stretch property to fill the parent control and you saw how it results in the runtime. So yeah, that's how it is about forms ninepatch library, how it gets, how it chooses the best fit image based on the resolution and so on. Now let me get back to the presentation. Well, that's done. Now this library also brings you a bunch of very useful extra goodies with the library that provides you the special label that lets you use custom fonts. Whereas if you had to use custom fonts in our salmon forms project, we have to create a native renderers and load it from the native level. But this component right here lets you load the custom fonts right from the PCL project level. And it also enables you to use HTML formatted text in your label controls. And also likewise, it provides you several other interesting controls. So if you want to find out more about this library, just go to the forms ninepatch.com. Now, so that brings us to the conclusion of the presentation. And so like I mentioned earlier, image resource management in cross-platform mobile development is very crucial because we have to pay attention to all these different screen resolution types of devices in each and every native platform, Android, iOS, and they have their own different ways of stretching the images based on the native controls and so on. But so the two default approaches salmon forms provides us isn't very sufficient enough as you can see because it doesn't give you a centralized solution to manage your image resources. And forms ninepatch library gives you a perfect solution for this scenario, how to manage your images from one central location. And at the same time, take care of the screen resolution support and the device type support. So that brings the end of the presentation and make sure to do check out my blog where I write about Samaritan, about weekly posts and so on. So that being said, thank you everyone. So yeah, have a good night. Thank you.