Firebase Notification is grey flutter

Question

I'm using Firebase Cloud Messaging to send notifications to my Flutter app. It works fine but my app icon notification is grey on the Google Pixel XL. I can see the outline, but for some reason, it's still grey. I've read in different articles that it has to do with the Android SDK level, but the minSdkVersion in Flutter is already 16 (less than 21) so I don't understand why the color won't show on.

So is it possible to show my app icon for notifications with the color?

--Thanks in advance

Answer 1

I know this question is regarding Firebase notification but since on searching the same for local_notifiction grey icon error this post came ...so finally I was able to find the solution to that(in my case icons work fine in debug mode but on building apk icons become grey boxes)

Solution:- in Android/app/src/main/res create a new directory named raw and in that directory add a file named keep.xml and copy paste the following:-

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools"
    tools:keep="@drawable/*" />

Answer 2

I did the following and it worked for me:

1. Create a transparent and white notification icon (you can use the following tool: AndroidAssetStudio )

Download the zip folder, unzip and you'll see it contains a res folder with different drawable folders. Copy and paste the contents of the res folder in "android\app\src\main\res" path

2. Then open the AndroidManifest.xml file and add the following lines to it:

ic_stat_calendar_today is the name of my notification icon. And each of the drawable folders that have been pasted contain a different size of icon with the same name.

3. If you want to change the color of the icon then check the above image. Add the metadata tag after the notification icon tag

4. Go to "android\app\src\main\res\values" and add a colors.xml file

<color name="colorAccent">#00FF00</color>

I have shared this answer in the following Github chain as well- Solution.

Answer 3

add this in android/app/build.gradle in section "buildTypes" if not show icon only in release:

shrinkResources false

buildTypes {
    release {
        shrinkResources false  //  <------------

    }
}

Answer 4

Majority are making one single problem.

They are placing the meta tags

<meta-data
           android:name="com.google.firebase.messaging.default_notification_icon"
           android:resource="@drawable/ic_notification" />
       <meta-data
           android:name="com.google.firebase.messaging.default_notification_color"
           android:resource="@color/colorAccent" />

Inside the tags while they should be placing it above and inside the <application tag f.e.

    package="xxxx">
   <application
        android:label="xxxx"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
       <meta-data
           android:name="com.google.firebase.messaging.default_notification_icon"
           android:resource="@drawable/ic_notification" />
       <meta-data
           android:name="com.google.firebase.messaging.default_notification_color"
           android:resource="@color/colorAccent" />
        <activity
            android:name="xxxx"
            android:exported="true"
            android:launchMode="singleTask"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <meta-data
                android:name="com.google.android.gms.wallet.api.enabled"
                android:value="true" />
            <!-- Set custom default icon. This is used when no icon is set for incoming notification messages. -->
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
            <intent-filter android:autoVerify="true">
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="flutterstripe" android:host="safepay" />
                <data
                    android:scheme="https"
                    android:host="xxxxx" />
            </intent-filter>
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
```` </manifest>


Also its important to create separate file colors.xml and include color of your choice.
```` <?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="splash_color">#00ABC8</color>
 </resources>



Rebuild app (close and run again)

and it will work.