Yeei!😀 I got an awesome opportunity present a tech talk at Dot Net Developers Meetup in Singapore which was hosted by Microsoft. This happened to be my first ever Presentation on Xamarin, and yeah it was totally awesome. A great enthusiastic crowd and everything went pretty well..
Thank you so much for the Organizers and Microsoft for this incredible opportunity, and I’m truly humbled by it.
There I spoke about Xamarin and Xamarin Forms, Xamarin UI Rendering process, Overriding this process through Custom Renderers, and important facts to keep in mind when implementing Custom Renderers in Xamarin Forms.
So I thought of putting out a small article on the Summary of this tech talk on my blog.😀
Xamarin Forms Custom Renderers for the Rescue…
Here’s the slideshow I used during this talk…
Xamarin is truly a great platform. It let’s you create mobile applications using C# dot net having full Native Performance as well as Looks and Feels of each Native Platform.
As you can see in the diagram, thanks to Xamarin now we can maintain the same code base across all three mobile platforms, having the individual native UI implementation, which allows us to maintain up to about 70% percent shared codebase. So yeah its all Great.
Xamarin Forms is…
Xamarin Forms, in one single word, is awesome! Its more like the cross platform extension of Xamarin this is the component which brings to life of the concept, Write once, Run Everywhere, and not Suck allowing us to share the UI code layer among three platforms. So you no longer need to implement the UI separately for each platform.
Xamarin and Xamarin Forms ?
Some people are confused about these differentiation between Xamarin and Xamarin Forms, let me put it this way…
Xamarin Forms is more like the true cross platform extention of Xamarin. Where as Xamarin Forms provides us a unified UI Layer which has all the common UI controls (Layouts, Labels, TextBoxes, Buttons, etc…) of all three mobile platforms, with almost every single common property of those controls.
Still Confused ? Let me explain…
In your left hand side you can see the Native Xamarin architecture where you share the back-end code base, but you have to implement the UI separately for each platoform, allowing us to share upto 70-80% of code base.
Where as in Xamarin Forms you can share almost upto 100% of the code base across all three platforms with the Shared UI Layer.
A little Story about a fresh Xamarin Forms developer…
There’s this developer who started developing an application with Xamarin forms, where he’s given all the UI sketches and so on.
So he start off with default nice and simple controls in Xamarin Forms and manages to implement the basic UI design of the app. Then he slowly gets into complex UI designs implementations…
So he starts going through all the available properties in these Xamarin Forms Controls, and begins to wonder where are all the properties that he needs to be using in order to customize the app accordingly to the complex design.
So he looks up and down, here and there, wondering where did all the properties go?
Oh boy, he’s in trouble, isn’t he… He realise Xamarin Forms UI controls has limited set of properties for customization, and its very hard to do complex customization in these controls.
Any Solutions ?
Any solutions ? Well he could always go back to native development, but its late for it now, and it’ll put him through a lot of trouble for sure, having to implement in three platforms.
Now that’s where Xamarin Forms Custom Renderers comes in for the rescue, let me explain.
Xamarin Forms UI Rendering process…
Each and every UI Control in Xamarin Forms has it’s own Native Renderer which renders and maps its Properties and Behaviours to the Native Control level.
So yeah behold the Magic of Xamarin Forms, this happens accordingly to the Native Platforms. This is why we get the Native look and feel and performance with Xamarin Forms.
Take a look at the Diagram here it shows how the default texbox UI Control of Xamarin Forms, which is called “Entry” control gets rendered down to the Native level through the Renderers. Now focus down through the iOS rendering, where the Entry control gets rendered down to the native UITextField control. And on Android and Windows Phone, EditText and UserControl respectively.
Overriding this Rendering Process ?
Xamarin has allowed us to access this Rendering process, which in return allows us to Override this default process and use it for our own requirements.
So by accessing this process we can customize all kinds of properties and behaviours of the Xamarin Forms controls, in each platform according to our needs.
Xamarin Forms Custom Renderers…
So in order to access this rendering process we need to create Custom Renderers of our own by sub classing the base Renderers Xamarin provides. Thereby it allows us to access and modify the native level properties and behaviours of the Xamarin Forms Controls.
Take a look at the Diagram above, that’s how Custom Renderers gets involved in the Rendering process, where as the Xamarin Forms Entry control goes through the Custom Renderer and down to the base renderer, where we control and modify its properties and behaviours in our Custom Renderer as we need.
How to create Xamarin Forms Custom Renderers ?
Just 3 simple steps…
- First you create a Custom Control by subclassing the default Xamarin Forms Control that you need to create a Custom Renderer for.
- Second you consume that subclassed Custom Control in your Xamarin Forms application.
- Thirdly and finally, you implement the Custom Renderer in the Native levels project.
Yeah how hard could it be, just three simple steps!😉
Here’s a Simple Custom Renderer Demo on the house…
Check out the live demo Custom Renderer I implemented during this presentation on my Github from below, https://github.com/UdaraAlwis/XFCircleCornersButtonControlDemo
Important facts to consider WHEN implementing Custom Renderers…
So here are some important facts to keep in mind when you implement Custom Renderers in Xamarin Forms, so that you get a good understanding about how to implement a custom renderer and what to keep in mind…
1. Always Export your Custom Renderers…
Whenever you create a custom renderer you need to Export it and register it, otherwise Xamarin would not recognise your Custom Renderer and it will go ahead with the default base class Renderer for your Custom Control.
2. Overriding the OnElementChanged Method…
Whenever a Custom Renderer is being execute, the first method it fires is the OnElementChanged() method.
This method gets called when the Rendering process starts for the custom control, which allows us the opportunity to to tap into the native properties and behaviours and modify them as we wish by overriding this method.
Also something to keep in mind this method consumes an important parameter, ElementChangedEventArgs which contains two important Properties.
- The OldElement property represents the Xamarin Forms level Control this renderer was attached to (previously attached to) and
- The NewElement property represents the Xamarin Forms level Control this renderer is currently attached to, its more of a reference.
So if you are using any Event Handlers in your Custom Renderer, you have to keep an eye out for these two properties in order to Subscribe and Unsubscribe accordingly to prevent memory leaks.
3. Control vs Element Property…
If you think about it, Custom Renderer is more like a middle guy, in between Xamarin Forms level Control and the Native level Control, where as it’s got hooks for both levels.
So those hooks are represented by these two important properties, Control and Element.
Element property, it holds a reference to the Xamarin.Forms control that’s being rendered, so you could use this property to access anything on the Xamarin Forms level of the custom control, such as Text, WidthRequest, HeightRequest and so on.
Control property holds a reference to the Native Control being used of the Custom Control. So using this property you can straight away add your native customisations and behaviours to the Rendering Control.
3. Overriding the whole Native Control ?
What if you want to get rid of the default Native Control associated with your Custom Renderer ? Create your own Native Control and use it for your Custom Control ?
As an example You need to have a TextBox with an underneath shadow, in iOS you can’t do this with the default native UITextView, so one way to do it is by adding another UIView along with the UITextView, where as you merge two native views together to form one View.
So for instances like that, you could use the SetNativeControl() method, and pass in your custom native view, which will get rid of the default native view and override it with your custom native view.
But you have to keep in mind something very important, hence you are flushing away the default native control, you have to handle all the Behaviours (Events) of your own Native Control manually by yourself and map it back and forth with the Xamarin Forms level.
4. Creating your own Base Renderer…
For every Xamarin Forms Control, there is a Base Renderer, that maps it to the Native Level and we use those Base Renderers all the time such as Button Renderer, Label Renderer and so on.
Now what if you wanted to create your own Base Renderer ? Let’s say you are creating a total complex Custom Control by yourself, and you need to have your own Renderer for it?
YES! it is possible, you just simply have to derive your Base Renderer from the generic ViewRenderer<?,?> where as you have to pass in your Custom Renderer type name and the associating Native Control type name for the renderer.
Well actually Xamarin doesn’t really recommend this, there some instance that you need to move towards this approach.
Let me Share some Wisdom…
Here’s something interesting I really want share with your all is that, Xamarin doesn’t really require in depth Mobile Development knowledge but it is very beneficial to have some, specially in scenarios like these Custom Renderer implementation. The more you are aware of the Native development, the more advantages for you.
So if you are planning to move towards Xamarin mobile development, I would suggest you take a little look at native development as well… Which will prepare you better for your Xamarin Mobile Development journey.
Important facts to consider BEFORE implementing Custom Renderers…
Earlier I mentioned about the facts that you need to keep in mind when you implement Custom Renderers, now let’s see what are the facts you need to focus BEFORE you decide to implement Custom Renderers in your application.
1. Think twice…
You need to think twice before you move on towards Custom Renderer implementation for your Application. Once you get familiar with Custom Renderer implementation, you get very tempted to go for custom renderers all the time even for the simplest requirement, but trust me it is not a good practice at all.
Why I say this is because, and untold truth about Custom Renderers is that, they are a little process intensive.
Therefore it’s wise to first of all explore all the possible solutions you could come up with from Xamarin Forms level it self to solve your requirement. So do not over-use Custom Renderers just because of the ease of development.
You could also try out other alternatives such as,
- Xamarin Forms Controls sub-classing and forming Custom Control (by merging multiple Controls to create a new Control).
- Xamarin Forms Effects (which is almost like Custom Renderers but simplified).
Whenever you decide to implement a Custom Renderer You need to pay attention to the reusability of it. Make sure to implement it in a way its reusable as much as possible.
When ever you implement Custom Renderers, don’t only focus on the current implementation, think ahead and implement all the possible needs in one go, without implementing custom renderers for every single need from one type of control.
Since Custom renderers are process intensive it very important to focus on reusability.
3. Mapping of Xamarin Forms -> Native Level…
Last but not least before you implement your Custom Renderer always make sure to take a look down through your Rendering Hierarchy…
Look at the available Properties and Behaviours down to the Native control and see whether it actually fulfils your requirements, in all three platforms (Android, iOS, Windows Phone). That way you will have a better idea on how to implement the Custom renderer more efficiently.
Custom Renderers plays an extremely important role in Xamarin Forms development. In my opinion it’s more like the Magic behind the whole Xamarin Forms Awesomeness.
Don’t be scared of Custom Renderer’s because they are here for your rescue.
Also finally make sure to keep in mind all the important tid bits I discussed today, so it will help you implement custom renderers more efficiently and effectively.
AAAANND THAT BROUGHT US TO THE END OF THE PRESENTATION! Hope this was helpful for anyone missed this session and keep in touch everyone!😀
Once again Thanks for the Organisers for organising this event and Microsoft for hosting. As well as the enthusiastic crowd.
– Udara Alwis
CODENAME: [ÇøŋfuzëÐ SøurcëÇødë]