Entry text and placeholders are not visible when using a custom entry on Android 11 and Android 13

Question

In my MAUI application, the entry and editor placeholder color and text color are not working, showing blank in UI. It is working fine on Android 10 and Android 12, but not working on Android 11 and Android 13. I am using a custom entry and custom editor. Adding its codes below:

Custom Entry

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.Background = gd;
            this.Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);
        }
    }
}

Custom Editor

public class CustomNoUnderLineEditorRenderer : EditorRenderer
{
    public CustomNoUnderLineEditorRenderer(Context context) : base(context)
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Editor> 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.Gray));
        }
    }
}

Xaml

<Frame 
     x:Name="titleentry_frame"
     Margin="0,5,0,5"
     Style="{StaticResource CreateRequest_Editor_FrameStyle}">

    <renderer:CustomEntry
     x:Name="title_entry"
     Keyboard="Default"
     Placeholder="Enter title"
     Style="{StaticResource CreateRequest_EntryStyle}"/>
</Frame>

<Frame 
     x:Name="requesteditor_frame"
     Margin="0,11,0,11"
     Style="{StaticResource CreateRequest_Editor_FrameStyle}">

    <renderer:CustomNoUnderLineEditor
        x:Name="description_editor"
        AutoSize="TextChanges"
        Placeholder="Enter description"
        Style="{StaticResource CreateRequest_EditorStyle}">
    </renderer:CustomNoUnderLineEditor>
</Frame>

I am adding a sample project here for reproducing this issue.

Update: 2023-11-02

Custom Entry For iOS

public class CustomEntryRenderer : EntryRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            Control.BorderStyle = UITextBorderStyle.None;
        }
    }
}

Custom Editor For iOS

public class CustomEditorRenderer : EditorRenderer
{
    public CustomEditorRenderer()
    {
        UIKeyboard.Notifications.ObserveWillShow((sender, args) =>
        {
            if (Element != null)
            {
                Element.Margin = new Thickness(0, 0, 0, args.FrameEnd.Height);
            }
        });

        UIKeyboard.Notifications.ObserveWillHide((sender, args) =>
        {
            if (Element != null)
            {
                Element.Margin = new Thickness(0);
            }
        });
    }
    
    protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
    {
        base.OnElementChanged(e);

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

When migrating to handler, how can I add the iOS entry and editor renderers to the code, could you please show me the sample of that too?

Update: 2023-11-03

After adding the iOS codes I am getting below errors.

Error CS0103 The name 'UITextBorderStyle' does not exist in the current context EntryMAUIDemo (net7.0-ios) MauiProgram.cs 43 Active

Error CS0103 The name 'UIColor' does not exist in the current context EntryMAUIDemo (net7.0-ios) MauiProgram.cs 59 Active

Error CS1061 'MauiTextView' does not contain a definition for 'BorderStyle' and no accessible extension method 'BorderStyle' accepting a first argument of type 'MauiTextView' could be found (are you missing a using directive or an assembly reference?) EntryMAUIDemo (net7.0-ios) MauiProgram.cs 61 Active

Error CS0103 The name 'UITextBorderStyle' does not exist in the current context EntryMAUIDemo (net7.0-ios) MauiProgram.cs 61 Active

So I run without that but same issue with text color. Entry text color is not working. Entry placeholder color and editor text and placeholder colors are not working.

Screenshot 1: Placeholders are working fine

Screenshot 2: Text color is working only for editor, entry text is not visible.

Device Details:

device name: OPPO A9 2020

Android version: 11

version : baseband & kernel

Model: CPH1937

I have moved the ModifyEntryandEditor() to MauiProgram.cs as per your suggestion. Here is the updated project.

Answer 1

Custom Renderers is used to customize the appearance and behavior of Xamarin.Forms controls on each platform. However, in MAUI, you should customize controls with handlers. You need to create a modified mapper for the Entry and Editor.

I have converted the Custom Renderers to Handlers. You could refer to the code above on how to implement it and I have confirmed that placeholder color and text color are working as expected.

Please add the following code into the MauiProgram.cs or code behind as below:

using Android.Text;
using EntryMAUIDemo.renderer;

namespace EntryMAUIDemo;

public partial class MainPage : ContentPage
{
      
      public MainPage()
      {
            InitializeComponent();
            ModifyEntryandEditor();
      }

   void ModifyEntryandEditor()
   {
    Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping(nameof(Entry), (handler, view) =>
    {
        if (view is CustomEntry)
        {
#if ANDROID
handler.PlatformView.SetTextColor(Android.Graphics.Color.ParseColor("Black"));
         handler.PlatformView.SetBackgroundColor(Android.Graphics.Color.Transparent);
            handler.PlatformView.SetRawInputType(InputTypes.TextFlagNoSuggestions);
#endif
        }

    });

    Microsoft.Maui.Handlers.EditorHandler.Mapper.AppendToMapping(nameof(Editor), (handler, view) =>
    {

        if (view is CustomNoUnderLineEditor)
        {
#if ANDROID
handler.PlatformView.SetBackgroundColor(Android.Graphics.Color.Transparent);               handler.PlatformView.SetRawInputType(InputTypes.TextFlagNoSuggestions);
            handler.PlatformView.SetHintTextColor(Android.Graphics.Color.Gray);

#elif IOS
            handler.PlatformView.Layer.CornerRadius= 10;     
            handler.PlatformView.TextColor = UIKit.UIColor.Black;
            //Need iOS 17+ VS preview veriosn .NET 8
            //handler.PlatformView.BorderStyle= UIKit.UITextBorderStyle.None;
#endif

        }
    });
}
}
           

For more details, you can refer to Customize controls with handlers;