Customizing Controls for different platforms (Android, iOS, and Windows Phone) using Renderer for Xamarin Forms

Xamarin Forms is a cross-platform UI toolkit that allows developers to easily create native user interface that can be shared across Android, iOS, and Windows Phone. The developer can write once and run the app in three different platforms.  Xaml and C# are  used for the development. Xamarin provides most of the basic controls for all the three platforms that are needed for an app development. In this post we will see how to customize a control using CustomRenderer.

Lets see what is Custom Renderer first custom renderers provide a approach for customizing the appearance and behavior of Xamarin.Forms controls.
We need to write renderer for each platform we target. In this sample we will see how to customize a button control using the custom renderer.

the Xamarin forms solution structure has four projects the first one is a portable project which will be shared by all three platforms and then three different projects for Android, iOS, and Windows Phone.

First create a CustomButtonRenderer class in Android Project. This renderer affects the Button that appears in the Android Platform. Inherit the class from the ButtonRenderer Class which is the default renderer for the Button Control.

Related Post :  Building your first end-to-end Cross Platform app

Override the OnElementChanged method and do the required customization for that control. For Eg. in our sample we are changing the background color of the control so we use the SetBackgroundColor method and change the color.

Add the ExportRenderer attribute which specifies that this Custom Renderer should be called when the control is rendered.

[assembly: ExportRenderer(typeof(Button), typeof(CustomButtonRenderer))]
namespace ButtonSample.Droid
{
 public class CustomButtonRenderer : ButtonRenderer
 {
 protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
 {
 base.OnElementChanged(e);

if (Control != null)
 {
 Control.SetBackgroundColor(global::Android.Graphics.Color.LightGreen);
 }
 }
 }
}

You can see the difference between the normal rendering and the custom rendering of the button in Android.

Lets create a CustomButtonRenderer class for the Windows project. This renderer affects the Button that appears in the Windows Phone Platform.

[assembly: ExportRenderer(typeof(Button), typeof(CustomButtonRenderer))]
namespace ButtonSample.WinPhone
{
public class CustomButtonRenderer : ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);

if (Control != null)
{
Control.Background = new SolidColorBrush(Colors.Cyan);
}
}
}
}

You can see the difference between the normal rendering and the custom rendering of the button in Windows.

Lets create a CustomButtonRenderer class for the IOS project. This renderer affects the Button that appears in the IOS Platform.

[assembly: ExportRenderer(typeof(Button), typeof(CustomButtonRenderer))]
namespace ButtonSample.iOS
{
public class CustomButtonRenderer : ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);

if (Control != null)
{
Control.BackgroundColor = UIColor.FromRGB(220, 180, 255);
}
}
}
}

That’s the button has been rendered with the customized colors as specified in the custom renderer.
Hope this post might have helped in understanding the Custom Renderer for Xamarin Forms.