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ë]
Yes I am a Developer! A Software Engineer by career!
But truth be told, I’m not the typical type of software-engineer-developer-geek ! 😛
I’m a hyper-active, overjoyed, crazy enthusiastic, energized, optimistic human being! 😉
I often go on Adventures, Hiking, Running, Cycling and Basketball, also includes Socializing and talking to People in Public…
I run a lot ! literally like a mad man, and I’m addicted to it. It makes me feel free, refreshed, de-stressed, energized, hyped up, and allows me to push myself beyond the physical limitations. Hence it keeps reminding me that nothing is impossible as long as I keep on pushing myself without giving up.
I enjoy every single moment of my life, seeing the positive perspective of everything that happens around me. And I never regret any decisions I have ever made. I like making others happy and cheering up people around me is something I enjoy a lot. 😀
Yes! obviously I’m always cheered up! 😛 that’s probably the easiest way to recognize me from any crowd lol! 😉
I do a lot of crazy random stuff! 😀
I truly enjoy helping others, teaching others new stuff, I’m not very good at teaching though, but I enjoy engaging in such activities to the fullest.
So basically whenever I’m blogging the same chemical reactions fires up in my brain which is responsible for the above, thereby almost all the time my blog articles ends up being a hyper active conversation lol! 😛
So you may find my blog articles UNPROFESSIONAL most of the time! but I DO NOT CARE! Hence blogging programming articles is something I do for fun and I enjoy it insanely. 😉 And yes this is probably going to be one of the weirdest tech-blogs you have ever seen given my unprofessional-blogging-style! lol 😉
Well I couldn’t care less as long as I share the knowledge across the articles, in a very friendly, easy to understand manner for even a high school kid could understand.
So you got any complains about the ÇøŋfuzëÐ SøurcëÇødë Blogging Style? Don’t bother complaining! 😀 As ÇøŋfuzëÐ SøurcëÇødë wouldn’t ever care! 😛
Stay Awesome fellas! 😀
For me its not about Winning or Losing, Its about reaching my limits, going as far as I can go and then going farther… One of the greatest secrets of my life is, I never executed for victory against anyone else, or being better than anyone else…
I have always executed for the ultimate victory over myself, becoming the best I can be, breaking through my own impossibilities, redefining possibilities, and achieving greatness !
– ÇøŋfuzëÐ SøurcëÇødë
Oh yeah ! xD One of the most awesome moments in my entire life was when they announced… 😀
“ICTA e-Swabhimani competition’s e-Entertainment and Games section SPECIAL AWARD goes to Sri Lankan Newspaper Cartoons project by Udara Alwis ! “
OMG ! 😀 that moment of unexpectancy, thinking that I would have no chance among the big companies I competed with during the competition…
WOHOOOOOOOOO ! 😀 Thank you very much Information and Communication Technology Agency of Sri Lanka (ICTA) and yes it was truly a wonderful event ! 😀
And this was me presenting on my project ‘Sri Lankan Newspaper Cartoons‘ in front of all the judges and competing Corporate giants… as a Finalist at ICTA e-Swabhimani Competition 2014 ! 😀
Link to Sri Lankan Newspaper Cartoons project –
You can Check out the Official Fan page of the Project here –
Some Moments to Share…
Receiving the Special Award at ICTA e-Swabhimani all island competition for my Sri Lankan Newspaper Cartoons project ! 🙂
That moment when you make your own Mother proud… :’) ! Oh yeah so much of Amma points 😛
Among the Winners at ICTA e-Swabhimani all island Competition… 🙂
Sometimes you just gotta believe in yourself and follow your Dreams by yourself… despite of what everyone else tells you…
And someday you will end up there among the giants… 😉
Some Blog posts regarding my project, Sri Lankan Newspaper Cartoons,
#SriLankanNewspaperCartoons #SriLanka #Newspaper #Cartoon #NewspaperCartoons #ICTA
Welcome to the ignition of Tech Innovations in Sri Lanka. We are a Sri Lankan based company that focuses on Technological Innovations and pushing the the boundaries beyond the Imagination.
I have always been extremely passionate about Innovation and Creativity, and as a result of that I used to invent new things using whatever I learned. Even back in School Days I used to develop new inventions and win awards at competitions. That drove me to University, while studying Software Engineering, I always used to build new software tools y my self in whatever the theory that we learned during lectures, whereas most of the time I got too obsessed and I went ahead learning everything by myself about any specific subject.
I have always dreamed of solving real life problems through new inventions and ideas, which is still the force that drives me forward. So as a result of my passion towards innovations and experimentation, I happened be developing so many softwares and apps which I had published to the public market. This sparked me the idea of initiating a startup of my own which I could drive through my passion. So here it is, Ladies and Gentlemen, Welcome to ÇøŋfuzëÐ SøurcëÇødë Tech Innovations ! – Udara Alwis a.k.a. [CODENAME : ÇøŋfuzëÐ SøurcëÇødë]
Connect with us on our official Facebook page from the below link,
We already have a series of ongoing Innovative Development Projects and below are some of them.
Windows Phone App Development
We have already developed and published a series of Innovative and Creative Windows Phone Applications and published on Microsoft Windows Store which has gotten over 160,000 downloads worldwide along with a rapidly growing user base.
Over 30 Windows Phone Apps published…
Over 160,000 Users Worldwide…
As we go on forward we are hoping to keep on developing more and more Innovative Windows Phone mobile apps. Also we are offering services to the public and business, so if you are in need of developing a Windows Phone app for your Company or Business, contact us immediately.
You can view all our Windows Phone apps by from below link,
Sri Lankan Newspaper Cartoons Project
Welcome to “Sri Lanka Newspaper Cartoons” project, A centralized portal for showcasing and viewing all Sri Lankan Newspaper Cartoons published across the web. How we do this ? We have hosted cloud servers that crawls throughout the web searching for Newspaper Cartoons using our unique Web Crawling technologies and algorithms, where we will capture them and present to you by streaming from those servers.
We simply bring all the Sri Lankan Newspaper Cartoons that are published across the web to one place and let you access them in a very easy to use, friendly, interactive way. We bring an ultimate experience of viewing Sri Lankan Newspaper Cartoons. Stunning visuals, interactive user experience blended together along with a faster and easier access and look up. “Sri Lanka Newspaper Cartoons”, we are empowering talented Sri Lankan Cartoon Artists to showcase and reach more audience easily and quickly and for the User, we are bringing an ultimate experience to view all Sri Lankan Newspaper Cartoons published across web, right from your fingertips….
Our fully automated system that is running behind this project was able to fetch over 11,000 Sri Lankan Newspaper Cartoons, while making this project the Sri Lanka’s first ever Largest Sri Lankan Newspaper Cartoons collection ever created.
Over 11,000 Newspaper Cartoons…
We are also opened up for Advertisers to publish ads on this project’s website and mobile app which are being used by over 1000s of users worldwide…
Download the Windows Phone app of our Sri Lankan Newspaper Cartoons project –
Here are some of the special features that we are bring you…
- View all the Sri Lankan Newspaper Cartoons that has ever been published in Newspaper from one single place as you wish…
- Stay up to date with the latest Sri Lankan Newspaper Cartoons and you can even view the oldest Cartoons ever…
- Like or Dislike and Rate every single Cartoon…
- Add Keywords and Tags to Cartoons as you like..
- Easily share Cartoons with your Social Networks…
So join with us for the ignition of the next step of Sri Lankan Newspaper Cartoons entertainment…
Sri Lankan Memes Book
Welcome to the first ever largest Sri Lankan Memes collection ! The most awesome place for Sri Lankan Memes ! (^_-) Join with us today…
So are you Bored at Home ? or Work ? 9gag much ? a Memes fan ?
Welcome to the first ever largest Sri Lankan Memes collection !
Join Sri Lankan Memes Book today for the most awesome Sri Lankan Memes entertainment…
Welcome to the epic Book of all the Sri Lankan Memes Published on Facebook with over 15,000 Memes encountering Thanks to our unique intelligent Web Crawlers executing on Cloud… We are still on Beta level.. Stay tuned for our Official Release ! (^_-)
Sri Lankan Memes Book brings you the most amazing experience you ever had with Sri Lankan Memes entertainment. Such as,
- View all the best Memes on Facebook
- Even the Latest Memes, Recent Memes, Older Memes, most Liked or Disliked Memes, most Viewed Memes and so on..
- View all the Memes under your favorite Meme pages
- Vote Your favorite Memes
- Daily updates of all the best Memes on Facebook
- Like or Dislike Memes as you wish
- Easily Share on Facebook or Twitter
- View the best, Sri Lankan funny videos on Youtube…
You can also Watch the most awesome funny Sri Lankan Videos on Youtube via Sri Lankan Memes Book TV !
Visit our official Website –
You can Subscribe to our Mailing list to receive daily awesome Sri Lankan Memes right into your inbox – http://goo.gl/oF6rTA
Please drop a Like to the page if you think its awesome 😀 ! This is the first time such an app has been developed, so your support is highly appreciated. Please share with your friends as much as possible. 🙂
We have also opened up for Advertisers to publish Ads and Banners on our website and the mobile application. Please contact us if you are interested…
I Was There Map
I Was There Map, allows you to view all the places you have visited and your Facebook Check-ins. You can view all the amazing information statistics you have never known about those places and your check-ins. You will be shown all the interesting information about You and those check-ins like no other.
This project was developed based on ASP .net and C#. We have developed by our own custom API to grab data from Facebook for each and every user upon their permissions. We have invented a couple of innovative Algorithms in order to generate the relational data and information regarding the user and their check-ins information.
Please check out more information from the below link,
Your Friends Map
Using ‘Your Friends Map’ you can view all your Facebook friends locations and hometowns in the world map. And it shows you a full list of all the locations and hometowns of your friends separately along with the number of friends in each location. This project was developed based on ASP .net and C#, where as I have used my own Custom Facebook API for pulling and streaming data from Facebook by the user’s permissions when the log in to the App.
We have invented a series of innovative algorithms to process the data and produce information regarding the user and their Friends, to populate statistical relationships.
Please check out more information from the below link,
Sri Lankan Photography Project
This project brings all Sri Lankan Photography that are published on Facebook to a one place, giving an ultimate experience to the user. With “Sri Lankan Photography”, we are empowering talented Sri Lankan Photographers to reach more audience easily and quickly and for the User, we are bringing a stunning ultimate experience for you to view all Sri Lankan Photography published on Facebook, right from your fingertips. This app provides so many special features, such as facilities keep in touch with the user’s favorite photographers as they wish, instantly viewing all the photo albums published on their public pages. Sharing those photography with user’s friends immediately on demand.
Please go to this link to view the full Article of our Sri Lankan Photography Project,
Mobile In-App Advertising Project (Phase 1)
We have launched a project where we are giving In-App Advertising facilities to Advertisers and Companies in a series of popular Mobile apps developed by ÇøŋfuzëÐ SøurcëÇødë Tech Innovations.
Please go to this link to view the Full Article of this project –
Undisclosed Projects (under development) –
Intelligent Data Mining App (based on Social Media) Framework
A framework to fetch public Social Media data and coming up with analytical information through data mining…
Lanka Tuk Tuk Services Project
A new way of thinking about three wheeler services in Sri Lanka… (Coming Soon)
Mobile In-App Advertising Platform
A mobile in-app advertising platform for Sri Lankans…
So thats a little heads up about ÇøŋfuzëÐ SøurcëÇødë Tech Innovations initiation. So if any of you are interested of being a partner or an investor we would be very grateful to have you.
Till next time everyone.. 🙂 Cheers !
We Always Wonder…
Then this is for You…
You might be At…
Now I Know What You are Thinking… 😉
We will tell you where you are right now very preciously along with the exact Address of your current location, where ever you are on Earth ! Also we will let you send your current location to anyone and share with them, such as text, email and even Social Media Networks instantly ! 🙂
Oh yes we know, this is totally Epic ! (^_^)