[regression/8.0.0-preview.4.8333] [Android] Setting the background property of AppCompatEditText in a handler mapping does not work

[matt-goldman]

Description

In a .NET MAUI project using the latest .NET 8 RC, setting the background property of a AppCompatEditText doesn't seem to work.

Using this code:

Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping("TestEntry", (handler, view) =>
{
    handler.PlatformView.Background = null;
    handler.PlatformView.SetBackgroundColor(Android.Graphics.Color.Pink);
    handler.PlatformView.SetTextColor(Android.Graphics.Color.Aqua);
});

Has the following results:

❌ Figure: PlatformView background properties not applied, but other mappings are applied

✅ Figure: The same code in .NET 7

Repro is linked below. Repo with working version in .NET 7: https://github.com/matt-goldman/Net7AndroidHandlers

Steps to Reproduce

1. Create a .NET MAUI app in .NET 8
2. Create a handler mapping to set the background of the PlatformView for Entry
3. Add an Entry to your UI
4. Run the app, observe bug 🐞

Link to public reproduction project repository

https://github.com/matt-goldman/Net8AndroidHandlers

Version with bug

8.0.0-preview.4.8333

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

8.0.0-preview.3.8149

Affected platforms

Android

Affected platform versions

Android - all versions

Did you find any workaround?

I could not find a workaround

Relevant log output

No response

[ieuangriffiths97]

Came across the same issue just commenting to keep track of this issue.

[borrmann]

also applies to Picker and Editors

[borrmann]

anyone have a workaround?

[matt-goldman]

@borrmann I expect the team will fix this pretty quickly as it will affect everyone. And probably the controls vendors too.

[XamlTest]

Verified this on Visual Studio Enterprise 17.9.0 Preview 1. Repro on Android 14.0-API34(8.0.3), not repro on Android 14.0-API34(7.0.101) with below Project:
Net8AndroidHandlers.zip

[vhugogarcia]

Hello @matt-goldman , it appears this is not a .NET MAUI 8/7 issue. On this post found in StackOverflow, the Android developers shared that to change the edit text line color we must use BackgroundTint, and we should not use BackgroundColor.

Honestly, I was like you, I have been using the background color to remove the line color on Android in .NET MAUI 7, but after reviewing I was able to remove the bottom line of the edit text on android in my .NET MAUI 8 projects, by using the following code line on my handler:
handler.PlatformView.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(Colors.Transparent.ToAndroid());

I updated my article on my blog, reflecting this change: So, based on the findings, I believe this is not a bug of .NET MAUI and instead we were setting wrong the code to hide the Entry form control border in Android. I just wanted to share my grain of salt @jsuarezruiz .

I hope this helps other developers!

Reference of the official Android documentation: https://developer.android.com/reference/androidx/core/view/TintableBackgroundView

Thanks in advance.

cc: @XamlTest @borrmann @ieuangriffiths97

[matt-goldman]

Nice catch @vhugogarcia! Thanks for this, and the write-up too!

[vhugogarcia]

Nice catch @vhugogarcia! Thanks for this, and the write-up too!

Happy to help. Please feel free to close this issue if you believe it has been solved.

[matt-goldman]

Do we know what changed between .NET 8 and .NET 7?

[vitalbit]

@vhugogarcia, @matt-goldman

I believe there is still handler.PlatformView.Background setter, that is required to be fixed. Meanwhile we have ability to remove line for entry with Colors.Transparent approach, we still not able to update Background with any native Android.Graphics.Drawables.Drawable in .NET8.

[samhouts]

Hey friends! From reading the comments, it looks like this can be closed. Is there further action required from the MAUI team? Thanks!

[ghost]

Hi @matt-goldman. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[vitalbit]

Hello @samhouts,
I prepared sample to show that Background property of AppCompatEditText does not apply changes. In the project you can find CustomEntryHandler.cs which change Background to round violet border and usage of CustomEntry.cs in MainPage.xaml.

https://github.com/vitalbit/AndroidEntryBackgroundChangeSample/

master branch - provides .NET 7 project, which works fine.

net8-migration branch - provides .NET 8 project, with background issue.

The workaround mentioned above provides possibility to remove underline for Android, meanwhile we still can not fully control Background natively for Android, that's why I believe this bug should still be in Open state.

[zh0018]

I have tested it in version 8.06 and still have this issue

Hello @samhouts, I prepared sample to show that Background property of AppCompatEditText does not apply changes. In the project you can find CustomEntryHandler.cs which change Background to round violet border and usage of CustomEntry.cs in MainPage.xaml.

https://github.com/vitalbit/AndroidEntryBackgroundChangeSample/

master branch - provides .NET 7 project, which works fine.

net8-migration branch - provides .NET 8 project, with background issue.

The workaround mentioned above provides possibility to remove underline for Android, meanwhile we still can not fully control Background natively for Android, that's why I believe this bug should still be in Open state.

[ALJASAC]

I came here with the same issue, please this needs attention.

[ieuangriffiths97]

Any update from the MAUI team on when this will be fixed? This is stopping me from using .NET 8 Android in production. .NET 7 end of life is in May.

[Kirill-Novozhilov]

Are there any workarounds, on how to change the line color in EditText and setting a background color in so that it works?

If set the BackgroundColor and set the BackgroundTintList in handler, then the whole view gets the color of the tintlist.

[knasher]

I can confirm this is still happening in 8.0.70

[mackayn]

Just ran into this too, applying a gradient has no effect in the handler in Android.

 public class AndroidBorderedEntryHandler : EntryHandler
 {
     protected override AppCompatEditText CreatePlatformView()
     {
         var nativeView =  base.CreatePlatformView();
         if (VirtualView is BorderedEntry entry)
         {
             // Remove underline
             nativeView.BackgroundTintList = ColorStateList.ValueOf(Color.Transparent);

             GradientDrawable gd = new GradientDrawable();
             gd.SetCornerRadius(3);
             gd.SetStroke(1, entry.BorderColor.ToAndroid());
             nativeView.Background = gd;
             return nativeView;
         }
         return nativeView;
     }
 }

MAUI 8.0.70

[tbaggett]

+1

[mattleibow]

This all looks very complicated with the append mapper and/or custom handler. It appears you want to replace the background? We have a feature for that since net6:

builder.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    EntryHandler.Mapper.ReplaceMapping<IEntry, IEntryHandler>("Background", (handler, view) =>
    {
        var platformView = handler.PlatformView;

        // Android will reset the padding when setting a Background drawable, so we need to reapply the padding after
        var padLeft = platformView.PaddingLeft;
        var padTop = platformView.PaddingTop;
        var padRight = platformView.PaddingRight;
        var padBottom = platformView.PaddingBottom;

        // Set the custom background
        var gd = new Android.Graphics.Drawables.GradientDrawable();
        gd.SetCornerRadius(3);
        gd.SetStroke(1, Android.Graphics.Color.Red);
        gd.SetColor(Android.Graphics.Color.Pink);
        platformView.Background = gd;

        // Apply previous padding
        platformView.SetPadding(padLeft, padTop, padRight, padBottom);
    });
#endif
});

This results in:

[pmahend1]

Thank you! @mattleibow . This is really helpful.
Looks like we need more documentation on when to use AppendMapping and when to use ReplaceMapping.

[mackayn]

This all looks very complicated with the append mapper and/or custom handler. It appears you want to replace the background? We have a feature for that since net6:

builder.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    EntryHandler.Mapper.ReplaceMapping<IEntry, IEntryHandler>("Background", (handler, view) =>
    {
        var platformView = handler.PlatformView;

        // Android will reset the padding when setting a Background drawable, so we need to reapply the padding after
        var padLeft = platformView.PaddingLeft;
        var padTop = platformView.PaddingTop;
        var padRight = platformView.PaddingRight;
        var padBottom = platformView.PaddingBottom;

        // Set the custom background
        var gd = new Android.Graphics.Drawables.GradientDrawable();
        gd.SetCornerRadius(3);
        gd.SetStroke(1, Android.Graphics.Color.Red);
        gd.SetColor(Android.Graphics.Color.Pink);
        platformView.Background = gd;

        // Apply previous padding
        platformView.SetPadding(padLeft, padTop, padRight, padBottom);
    });
#endif
});

This results in:

Thanks but not really what I was trying to achieve, is there a way to apply using this approach to a subclassed control ? this would apply to all entries in the app. I can add a mapper to my custom handler I suppose, it's just pretty clunky...

[pmahend1]

@mackayn I was able to apply it for sub-classed control
Here is how I did it.

MauiProgram.cs

 MauiApp.CreateBuilder().ConfigureMauiHandlers(handlers =>
 {
     handlers.AddHandler(typeof(BorderedEntry), typeof(BorderedEntryHandler));
 });

Created BorderedEntryHandler in Platforms/Android, namespace has to be same as of MauiProgram

public partial class BorderedEntryHandler : EntryHandler
{
    public BorderedEntryHandler()
    {
        Mapper.ReplaceMapping<IEntry, IEntryHandler>("Background", BorderedEntryMapper);
    }

    private void BorderedEntryMapper(IEntryHandler handler, IEntry entry)
    {
        var platformView = handler.PlatformView;

        // Android will reset the padding when setting a Background drawable, so we need to reapply the padding after
        var padLeft = platformView.PaddingLeft;
        var padTop = platformView.PaddingTop;
        var padRight = platformView.PaddingRight;
        var padBottom = platformView.PaddingBottom;

        // Set the custom background
        var gd = new Android.Graphics.Drawables.GradientDrawable();
        gd.SetCornerRadius(3);
        gd.SetStroke(1, Android.Graphics.Color.Red);
        gd.SetColor(Android.Graphics.Color.Pink);
        platformView.Background = gd;

        // Apply previous padding
        platformView.SetPadding(padLeft, padTop, padRight, padBottom);
   }
}

[mackayn]

@mackayn I was able to apply it for sub-classed control Here is how I did it.

MauiProgram.cs

 MauiApp.CreateBuilder().ConfigureMauiHandlers(handlers =>
 {
     handlers.AddHandler(typeof(BorderedEntry), typeof(BorderedEntryHandler));
 });

Created BorderedEntryHandler in Platforms/Android, namespace has to be same as of MauiProgram

public partial class BorderedEntryHandler : EntryHandler
{
    public BorderedEntryHandler()
    {
        Mapper.ReplaceMapping<IEntry, IEntryHandler>("Background", BorderedEntryMapper);
    }

    private void BorderedEntryMapper(IEntryHandler handler, IEntry entry)
    {
        var platformView = handler.PlatformView;

        // Android will reset the padding when setting a Background drawable, so we need to reapply the padding after
        var padLeft = platformView.PaddingLeft;
        var padTop = platformView.PaddingTop;
        var padRight = platformView.PaddingRight;
        var padBottom = platformView.PaddingBottom;

        // Set the custom background
        var gd = new Android.Graphics.Drawables.GradientDrawable();
        gd.SetCornerRadius(3);
        gd.SetStroke(1, Android.Graphics.Color.Red);
        gd.SetColor(Android.Graphics.Color.Pink);
        platformView.Background = gd;

        // Apply previous padding
        platformView.SetPadding(padLeft, padTop, padRight, padBottom);
   }
}

I never thought of consuming the API that way, your 100% right about needing more documentation on mappers, I'm guessing some of these 3.5K open issues are this type of thing, a misunderstanding of the mappers API. That's working very nicely, thanks.

[mattleibow]

You should be able to override the behaviour using the generics (note the use of BorderedEntry instead of IEntry:

EntryHandler.Mapper.ReplaceMapping<BorderedEntry, IEntryHandler>("Background", (handler, view) =>
{
    // your code here
});

public class BorderedEntry : Entry
{
}

With this XAML where once is a normal entry and the other is a custom one, the mapper only applies to the custom one - without requiring a new handler and new handler registration. We basically register the mapper as a smaller unit.

<Entry
    Text="Hello, World!"
    Background="Orange" />

<local:BorderedEntry
    Text="Hello, World!"
    Background="Orange" />

[mackayn]

You should be able to override the behaviour using the generics (note the use of BorderedEntry instead of IEntry:

EntryHandler.Mapper.ReplaceMapping<BorderedEntry, IEntryHandler>("Background", (handler, view) =>
{
    // your code here
});

public class BorderedEntry : Entry
{
}

With this XAML where once is a normal entry and the other is a custom one, the mapper only applies to the custom one - without requiring a new handler and new handler registration. We basically register the mapper as a smaller unit.

<Entry
    Text="Hello, World!"
    Background="Orange" />

<local:BorderedEntry
    Text="Hello, World!"
    Background="Orange" />

Nice, worked well for the Editor too.

[pmahend1]

@mackayn how were you able to make it work for Editor. As soon as I set Background or BackgroundTintList the background color is getting reset to white. It is annoyingly evident in Dark theme mode. I tried replace and append mapper both

[borrmann]

@pmahend1
I use this:

public partial class MyEditorHandler : Microsoft.Maui.Handlers.EditorHandler
{
    protected override void ConnectHandler(AppCompatEditText platformView)
    {
        base.ConnectHandler(platformView);

        if(platformView != null)
        {
            // remove the line below text
            platformView.SetBackgroundColor(Color.Transparent);
            platformView.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(Color.Transparent);
        }
    }

[pmahend1]

@borrmann Thanks but I had tried the same logic. I am on Android 34 if that matters.

[mackayn]

@mackayn how were you able to make it work for Editor. As soon as I set Background or BackgroundTintList the background color is getting reset to white. It is annoyingly evident in Dark theme mode. I tried replace and append mapper both

Sorry, on vacation, not near a dev env but if you setup the correct handler type it works for editor in iOS and Android, don't override ConnectHandler.

https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/?view=net-maui-8.0#view-handlers. Use the approach recommended by @mattleibow