Xamarin.Forms: How to create an Initials View as custom control for Android and iOS

If you are working with Xamarin.Forms to create a mobile application for Android and/or iOS you have lots of predefined controls which you can easily integrate into your app. But sometimes these controls don’t fit your actual needs and so you need to think about creating your own controls.

In this blog post I want to show you how I’m creating a custom control using the default controls for Xamarin.Forms which work on Android and iOS.

For my own project I was searching for a solution that shows the initials of a person inside of a colored circle. By default Xamarin.Forms doesn’t include such a control, so I decided to write it on my own by using a rounded BoxView, a Label and a little bit of magic.

The final result for my name ‘Sebastian Jensen’

First we start by creating a new ContentView, for example InitialsView.

Create a new ContentView with the name InitialsView

We will start by thinking about the layout of the control. As I mentioned earlier we will need a BoxView and a Label. We will place both controls inside a Grid.

As you can see we will use the name property to have access from the code-behind to our two controls. Now let’s think about the Bindable Properties we need to add to our control. Due to the fact that we later will apply a color to the BoxView we will need different color information, like a default background color, and two colors for the text, in a light and a dark mode. Last but not least we need the name which will be used to extract the initials from.

In my mind I have the idea to set the color of the BoxView and the Label by creating a color value from the provided Name. So we will create a method called SetColors with the provided name as parameter. Out of this name we will create a Color and this will be applied to the BoxView. We also calculate the brightness of the color to apply the corresponding color to the Label.

Now we need to think about the initialization of the control. In my opinion the best way is to pass a desired size and then create a rounded BoxView, change the FontSize of the Label to the provided size and apply the default background color. If a name is already provided we also need to update the color accordingly.

Where do we call this method you will ask, because currently ContentViews don’t have lifecycle events. In this case I will use the OnParentSet method and will check if a size was provided. If this is not the case I will use a default size.

We also need to implement now the method SetName, which will extract the initials from a provided name. The logic is quite simple, because we will split the provided name at the spaces and then we will use the first letters of the first and last entry. After that we will update the colors.

Last but not least we want to implement the PropertyChanged of the name property. In this case we simply call the SetName method to update the background color and the initials.

Now we are good to go and a first version of the Initials View is ready. You can now start thinking about improvments like a monospace font for displaying the initals.

The final InitialsView control in action.

As you have seen sometimes it isn’t that complicated to create a custom control for Xamarin.Forms which can be used on Android and iOS.

You can find the whole source-code in my GitHub repository.

Feel free to describe your own custom controls in the comments.

This article is my contribution to #XamarinUIJuly, which is basically a series of blog posts where every day of July a Xamarin community member posts a blog about Xamarin and UI. You can also find some more blog posts on my personal blog tsjdev-apps.de.

Software Developer @ medialesson GmbH

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store