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

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.

renderer

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);
 }
 }
 }
}

android_renderer

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);
}
}
}
}

windows_renderer

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.

Arun Kumar

Arun kumar Surya Prakash, is a  Developer  Consultant. He  is a Microsoft Certified Solution  Developer  for Store App Development, and a Azure Solution Developer. His core skills is on developing Windows Store App and Cross Platform App development. You can follow him @arunnov04

2 Comments to “Customizing Controls for different platforms (Android, iOS, and Windows Phone) using Renderer for Xamarin Forms”

Comments are closed.