Can't change background color of Android notification using Firebase and dotnet Maui

Question

I am using Firebase to send push notifications to a .NET8 MAUI app... The notifications work, but the background color of the notification shows as a very light grey, making it impossible to see the icon (pictures included below)...

There is supposedly a workaround to add a line to the AndroidManifest.xml file, but that doesn't appear to fix the problem.....

Here is the relevant part of my code:

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.mycompany.myapp">
    <application android:icon="@mipmap/appicon">

        <!-- sets the icon, which it is doing correctly. -->
        <meta-data 
            android:name="com.google.firebase.messaging.default_notification_icon"
            android:resource="@drawable/push_notification_icon" />

        <!-- This should set the background color of the icon when you swipe down, 
             but it doesnt seem to work -->
        <meta-data 
            android:name="com.google.firebase.messaging.default_notification_color" 
            android:resource="@color/default_notification_color"
            tools:replace="android:resource" />

        <receiver android:name="com.google.firebase.iid.FirebaseInstanceIdInternalReceiver" android:exported="false" />
        <receiver android:name="com.google.firebase.iid.FirebaseInstanceIdReceiver" android:exported="true" android:permission="com.google.android.c2dm.permission.SEND">
            <intent-filter>
                <action android:name="com.google.android.c2dm.intent.RECEIVE" />
                <action android:name="com.google.android.c2dm.intent.REGISTRATION" />
                <category android:name="${applicationId}" />
            </intent-filter>
        </receiver>
    </application>
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
</manifest>

Platforms\Android\Resources\values\colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="default_notification_color">#FF0000</color>
</resources>

MauiProgram.cs

using Plugin.Firebase.Auth;
using Plugin.Firebase.Bundled.Shared;

#if IOS
using Plugin.Firebase.Bundled.Platforms.iOS;
#elif ANDROID
using Plugin.Firebase.Bundled.Platforms.Android;
#endif

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        return MauiApp
            .CreateBuilder()
            .UseMauiApp<App>()
            .UseMauiCompatibility()
            .UseMauiCommunityToolkit()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            })
            .RegisterFirebaseServices()
            .Build();
    }

    private static MauiAppBuilder RegisterFirebaseServices(this MauiAppBuilder builder)
    {
        builder.ConfigureLifecycleEvents(events =>
        {
#if IOS
            events.AddiOS(iOS => iOS.FinishedLaunching((app, launchOptions) => {
                CrossFirebase.Initialize(CreateCrossFirebaseSettings());
                return false;
            }));
#elif ANDROID
            events.AddAndroid(android => android.OnCreate((activity, _) =>
                CrossFirebase.Initialize(activity, CreateCrossFirebaseSettings())
            ));
#endif
        });
        builder.Services.AddSingleton(_ => CrossFirebaseAuth.Current);
        return builder;
    }

    private static CrossFirebaseSettings CreateCrossFirebaseSettings()
    {
        return new CrossFirebaseSettings(
            isAuthEnabled: true,
            isCloudMessagingEnabled: true,
            isAnalyticsEnabled: false);
    }
}

Platforms\Android\MainActivity.cs

using Plugin.Firebase.CloudMessaging;

[Activity(Label = "MyApp", Theme = "@style/Maui.SplashTheme", MainLauncher = true)]
public class MainActivity : MauiAppCompatActivity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        if (OperatingSystem.IsAndroidVersionAtLeast(33))
        {
            if (ContextCompat.CheckSelfPermission(this, Manifest.Permission.PostNotifications) != Permission.Granted)
            {
                ActivityCompat.RequestPermissions(this, new[] { Manifest.Permission.PostNotifications }, 0);
            }
        }

        HandleIntent(Intent);
        CreateNotificationChannelIfNeeded();
    }

    protected override void OnNewIntent(Intent intent)
    {
        base.OnNewIntent(intent);
        HandleIntent(intent);
    }

    private static void HandleIntent(Intent intent)
    {
        FirebaseCloudMessagingImplementation.OnNewIntent(intent);
    }

    private void CreateNotificationChannelIfNeeded()
    {
        if (Build.VERSION.SdkInt >= BuildVersionCodes.O)
        {
            CreateNotificationChannel();
        }
    }

    private void CreateNotificationChannel()
    {
        if (OperatingSystem.IsAndroidVersionAtLeast(26))
        {
            var channelId = $"{PackageName}.general";
            var notificationManager = (NotificationManager)GetSystemService(NotificationService);
            var channel = new NotificationChannel(channelId, "General", NotificationImportance.Default);
            notificationManager.CreateNotificationChannel(channel);
            FirebaseCloudMessagingImplementation.ChannelId = channelId;
            FirebaseCloudMessagingImplementation.SmallIconRef = Resource.Drawable.push_notification_icon;
        }
    }
}

MyApp.csproj

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFrameworks>net8.0-ios;net8.0-android</TargetFrameworks>
    <OutputType>Exe</OutputType>
    <UseMaui>true</UseMaui>
    <!-- lots more here removed -->
  </PropertyGroup>
  
  <ItemGroup>
    <!-- App Icon -->
    <MauiIcon Include="Resources\AppIcon\appicon.png" BaseSize="48,48" Color="#01CAFF" />
    <!-- Images -->
    <MauiImage Include="Resources\Images\*" />
  </ItemGroup>

  <ItemGroup Condition="'$(TargetFramework)' == 'net8.0-android'">
    <GoogleServicesJson Include="Platforms\Android\google-services.json" />
    <PackageReference Include="Xamarin.AndroidX.Core" Version="1.12.0.3" />
    <PackageReference Include="Xamarin.AndroidX.Collection" Version="1.3.0.2" />
    <PackageReference Include="Xamarin.AndroidX.Collection.Ktx" Version="1.3.0.2" />
    <PackageReference Include="Xamarin.AndroidX.Activity.Ktx" Version="1.8.1.1" />
    <PackageReference Include="Xamarin.Google.Android.Material" Version="1.10.0.2" />
  </ItemGroup>
  <ItemGroup>
    <MauiImage Update="Resources\Images\push_notification_icon.png" Resize="false" />
  </ItemGroup>
  <ItemGroup>
    <PackageReference Include="CommunityToolkit.Maui" Version="9.0.3" />
    <PackageReference Include="ExifLib.Standard" Version="1.7.0" />
    <PackageReference Include="Microsoft.Extensions.Http" Version="8.0.0" />
    <PackageReference Include="Microsoft.Extensions.Http.Polly" Version="8.0.8" />
    <PackageReference Include="Microsoft.Extensions.Http.Resilience" Version="8.8.0" />
    <PackageReference Include="Plugin.Firebase" Version="3.0.0" />
    <PackageReference Include="Xamarin.Build.Download" Version="0.11.4" />
  </ItemGroup>

  </ItemGroup>
  <ItemGroup>
    <None Update="Resources\Raw\app_store_logo128x128.png">
      <Pack>True</Pack>
      <PackagePath>\</PackagePath>
    </None>
  </ItemGroup>
</Project>

I also obviously have my google-services.json file in there as well and the app created in the Firebase console....

When I send a test message from the console, the notification comes through. BUT, you will see when I swipe down, the icon background is nearly white.

Here is my icon file

Here is the notification prior to swiping down. Looks beautiful!!!

Here is my notification when I swipe down, but you can barely see the icon because the background color is so light:

Any ideas at all?????

Answer 1

Still not sure why this wasn't working, but something was wrong with the png file I was using. I created another PNG file - changed nothing else - and it started to work. No idea what was wrong with the first file, but it is working now....