How to add custom renderer in MAUI

Question

I am trying to add a custom render in my MAUI application. I have added renderer class on my project, android and iOS platform folders.

On Main Project:

namespace MyApp.Renderer
{
    public class CustomEntry : Entry
    {
    }
}

Android Platform:

using Android.App;
using Android.Content;
using Android.Content.Res;
using Android.Graphics.Drawables;
using Android.OS;
using Android.Runtime;
using Android.Text;
using Android.Views;
using Android.Widget;
using MyProject.Droid.Renderer;
using MyProject.Renderer;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Compatibility.Platform.Android;
using Microsoft.Maui.Controls.Platform;

namespace MyProject.Droid.Renderer
{
    public class CustomEntryRenderer : EntryRenderer
    {
        public CustomEntryRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                GradientDrawable gd = new GradientDrawable();
                gd.SetColor(global::Android.Graphics.Color.Transparent);
                this.Control.SetBackgroundDrawable(gd);
                this.Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);
                //Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.White));
            }
        }
    }
}

iOS Project:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using MyProject.iOS.Renderer;
using MyProject.Renderer;
using Foundation;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Compatibility.Platform.iOS;
using Microsoft.Maui.Controls.Platform;
using UIKit;

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace MyProject.iOS.Renderer
{
    public class CustomEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.BorderStyle = UITextBorderStyle.None;
                //Control.Layer.CornerRadius = 10;
                //Control.TextColor = UIColor.White;
            }
        }
    }
}

On XAML:

<local:CustomEntry
    x:Name="username_entry"
    Placeholder="UserName"
    ReturnType="Next"
    Keyboard="Email"/>

I have added this custom renderer for removing the default underline from entry. But the custom entry effect is not working after this. Anything else is pending to add for the working of custom renderer?

Answer 1

Hello,

You need to register this custom renderer in the MauiProgram.cs.

1.Enable the UseMauiCompatibility

2.Add AddCompatibilityRenderer for android platform and iOS platform.

public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                })
                .UseMauiCompatibility()
                .ConfigureMauiHandlers(handlers => {
#if __ANDROID__
                    handlers.AddCompatibilityRenderer(typeof(CustomEntry), typeof(MauiApp4.Platforms.Android.CustomEntryRenderer));
#elif IOS
                    handlers.AddCompatibilityRenderer(typeof(CustomEntry), typeof(MauiApp4.Platforms.iOS.CustomEntryRenderer));


#endif
                });

By the way,this.Control.SetBackgroundDrawable(gd); is deprecated, you can set it by this.Control.Background = gd; directly in the CustomEntryRenderer for android platform.

As note, custom renderer is deprecated way, if you want to custom control in MAUI, you can try to use Handler,

Here is a document about custom entry with handler.

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.