[Android] Do we have any control over the heads-up notification icon background?

[piljac1]

Hello (again... will probably be my last thread in a while, because this one and my other opened thread are my last 2 remaining issues)!

I have been able to implement notification icon/text color in the notification center as per Firebase docs. However, on Android 11 (or at least, on my Galaxy S20 FE), heads-up notifications (when you just received a notification) shows the icon circled in a blue background (see screenshot), no matter what color I set up in AndroidManifest.xml. I thought it might be a system thing, but yesterday, I received an Instagram heads-up notification that had a purple background. I also received one from La Presse, which was red. I've searched for around 2 hours and couldn't find anything related to this specific issue (it always gravitated around the classic icon/color AndroidManifest.xml setup).

Here's what I'm talking about:

My AndroidManifest.xml related config:

<meta-data
    android:name="com.google.firebase.messaging.default_notification_icon"
    android:resource="@mipmap/ic_notification" />
<meta-data
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@color/black"
    tools:replace="android:resource" />

[mikehardy]

I haven't played with this myself. I wonder if this is of interest? It's the official quickstart

https://github.com/firebase/quickstart-android/blob/7e85a2083cb908def88dc86575edba3b42952e60/messaging/app/src/main/AndroidManifest.xml#L15-L24

[piljac1]

Haven't seen anything in there that seems to have an impact. I'm starting to think it might be related to a broader value, such as the app primary color or accent/secondary color.

[piljac1]

@mikehardy Hi Mike, sorry to ping you. Have you ever encountered a way to set the heads up notification background color? I'm searching for a fix every few months, but no luck so far.

[piljac1]

Nvm, it works now apparently. I haven't changed anything in my code or versions. Android and/or Samsung might have fixed that issue in a software update.

Edit: it still doesn't work for the app I was coding when I posted this issue. However, it works with other apps that have practically the exact same code base (apart from components). Why? That's what I can't figure out.

[mikehardy]

I'm not sure if I like this or not, that is to say: I love that you appear to have this problem, but problems that fix themselves always make me nervous! Hope it stays fixed, good luck with your project

[piljac1]

Finally found an explanation.

@nurassyl stated that changing the app icon background color worked for him because it gets the dominant color and uses it. At first, I thought he was talking about the notification icon background (which should always be transparent according to guidelines), because he never replied to my question, but he was indeed talking about the main app icon (mipmap ic_launcher icons).

As for the "dominant color" color statement, that is not entirely true. From my tests, it seems like it considers the most dominant non black or white color of your app icon (haven't tried with gray shades, but they might get ignored too). So if your app icon is a small yellow logo on a black background, even though the black is dominant, it will consider the logo's yellow color as the color to use for the heads-up notification background.

In my case, I thought the problem had fixed itself by a possible software update because the logo color happened to be the same as the notification color stated in the manifest. For the "problematic" app (the one that made me start this discussion), the logo color of the app icon (blue) and the specified notification color (black) mismatched, hence why I would see a blue background in heads-up notifications, but a black color in the notification center.

I hope the explanation and fix is clear to anyone that encounters this thread.

[nurassyl]

I solved this problem by changing my app icon background color, it will get dominant color of app icon.

[piljac1]

Hi @nurassyl ! Thanks for your reply. I'm not sure I understand what you did. Android guidelines state that notification icons should be white with a transparent background. Did you change that at all? If not, what changes have you made exactly (code wise)?

[piljac1]

@nurassyl I know it's been a while, but you never answered to my first question. I would really appreciate it, because I'm in dire need to change the background color. Thanks!

[piljac1]

Finally found an explanation.

@nurassyl stated that changing the app icon background color worked for him because it gets the dominant color and uses it. At first, I thought he was talking about the notification icon background (which should always be transparent according to guidelines), because he never replied to my question, but he was indeed talking about the main app icon (mipmap ic_launcher icons).

As for the "dominant color" color statement, that is not entirely true. From my tests, it seems like it considers the most dominant non black or white color of your app icon (haven't tried with gray shades, but they might get ignored too). So if your app icon is a small yellow logo on a black background, even though the black is dominant, it will consider the logo's yellow color as the color to use for the heads-up notification background.

In my case, I thought the problem had fixed itself by a possible software update because the logo color happened to be the same as the notification color stated in the manifest. For the "problematic" app (the one that made me start this discussion), the logo color of the app icon (blue) and the specified notification color (black) mismatched, hence why I would see a blue background in heads-up notifications, but a black color in the notification center.

I hope the explanation and fix is clear to anyone that encounters this thread.

[mikehardy]

That was a great writeup, thanks @piljac1 ! This seems like something that would be a great note on https://rnfirebase.io/messaging/usage#notification-color - what do you think? If you hit the pencil icon on the top of each page there it walks through a quick+easy web UI from github and you could add a blurb and maybe save people from having the issue in the first place + then maybe finding it here (or not finding it!)

[piljac1]

Hi Mike! I'll try to, but very overwhelmed with work right now (within and outside of office hours).

[Dayeon1233]

It seems like we can't control the color of heads-up notification. it automately change the color by the app icon's dominant color. is it right? Thank you!!

[victorroatt]

@piljac1 But if I want to use a white color in the background of my icon, how can I set it?

[piljac1]

It's hard to find any info on that subject, so I can't say for sure it isn't feasible, but from what I tested and what I saw from other app notifications that I receive (haven't seen any notification with white or black background), I would assume it is not unfortunately. I always see a white icon on a colored background.

[victorroatt]

Me too, thanks a lot for the quick reply!!

[HanhoKim]

This is not related to the android system. Rather, it is related to the One UI system with the Samsung phone. One UI has a pop-up notification feature(even device user can customize/theme their notification color), and this system has quite a lots of bug.