Xamarin Custom Renderer

Sometimes you may want your applications to look different on each platform, or you may want to use custom views on platforms. Xamarin provides us with Custom Renderer so we can use these features. Both with a very easy method. If you already have a java history, you will not be strangers to these processes.

To write Custom Renderer specifically for platforms, I first open a folder on that platform. The reason I do this is to make it easier to identify where to write the codes and to provide order. In order to show an example for Android, I’m opening a folder called Custom Renderers under the Android platform. In today’s case, I will make sure that the entities are different in the iOS environment and different in the Android environment. I create a class called CustomEntryRenderer under the Custom Renderers folder we opened in the Android environment. I will use this class to determine how my entrances will look. We need to inherit from EntryRenderer because we want to change the entities after we open this class, so we want to give the platforms a special look. After the override is over, I am confused, as I mentioned at the beginning of the article, the functions and features in the javascript are completely. Here we choose the OnElementChanged method. The first thing we do with this method is to see if we can control the look. So we will change the entrances, but do you have a check first? no? After that, classical transactions are starting. We are setting how the control we will change looks like. I gave it a red color in the background and I wanted it to be black in my writing. If you have something in your head, you can adapt it accordingly. Of course, we are not limited to this because we need to specify that this class is a Custom Renderer. We need to do the Custom Renderer classes in a similar way as we did a definition per class when writing Dependency Services. For this we write the code in the first line of the following code snippet. The first type we give here is what type of control we are going to change, and the second type specifies which type to use instead of the first type. We do the same for iOS and apply changes according to what we want to get there.

[assembly : Xamarin.Forms.ExportRenderer(typeof(Entry),typeof(CustomEntryRenderer))]
namespace XamarinCustomRenderers.Droid.CustomRenderers
{
    public class CustomEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control!=null)
            {
                Control.SetBackgroundColor(Android.Graphics.Color.Red);
                Control.SetTextColor(Android.Graphics.Color.Black);
            }
        }
    }
}

Sometimes you do not want to change all the entrances. Again, there is a practical solution. We open a folder in the portable layer of my project. We are opening these folders so that you will be more sophisticated than your project. Otherwise you can also put codes in. We add a class named CustomEntryRenderer into this folder, and we get the entry from the inheritance. In this way we actually created an entry class. But our goal is to make an entry the same on all platforms, while the other entry is to make it appear on the screen as we want it to look private to our platforms. Once we have created a class for it and set it to inherit the entry, we will first assign this class to the types we have defined at the beginning of our print renderers on different platforms. In this way we achieve our goal.

namespace XamarinCustomRenderers.CustomControls
{
    public class CustomEntry :  Entry
    {

    }
}

[assembly : Xamarin.Forms.ExportRenderer(typeof(CustomEntry),typeof(CustomEntryRenderer))]
namespace XamarinCustomRenderers.Droid.CustomRenderers
{
    public class CustomEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control!=null)
            {
                Control.SetBackgroundColor(Android.Graphics.Color.AntiqueWhite);
                Control.SetTextColor(Android.Graphics.Color.Black);
            }
        }
    }
}

Here you can find the project we have done.