How to Change the Android Notification Icon/Status Bar Icon for Push-notification in #flutter?

Question

I want to replace the default Icon with my own icon for Push-notifications.

Now the App show the Icon as White box .

Solution 1

Just add a meta-data inside tag in your manifest file.

Reference

<!-- Set custom default icon. This is used when no icon is set for incoming notification messages. -->


<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="When Coin"
    android:icon="@mipmap/ic_launcher">
<meta-data
   android:name="com.google.firebase.messaging.default_notification_icon"
   android:resource="@mipmap/ic_stat_ic_notification" />

Solution 2

Ajay's answer is correct, but to expand on it a bit:

1. Create your mipmap notification icon. You can do this easily using Roman's Notification Icon Generator - Click on "Notification Icon Generator"

2. On the left panel, click "Image" to upload your own image or use ClipArt or text as provided.

3. After you're done, click the download button in the upper-right to download the zip file.

4. In the zip file, your icon files will be in individual directories with the same name as your mipmap directories in your project directory (e.g., "mipmap-hdpi", "mipmap-mdpi", etc.). Move the icon files to their respective folders within your project.

5. In your AndroidManifest.xml file (located at android/app/src/main/AndroidManifest.xml), add the meta-data within the "application" tag:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.your.package">

    <application
        android:name="com.your.package.Application"
        android:label="YourAppName"
        android:icon="@mipmap/launcher_icon">

        <meta-data
          android:name="com.google.firebase.messaging.default_notification_icon"
          android:resource="@mipmap/your_icon_file_name" />

6. Save your file. You may need to stop and restart or uninstall and reinstall your app for the notification icon to start showing.

7. Your icon is probably white, so if you want to change the color you can add the following meta-data tag below the icon meta-data tag you just added:

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

That will change the icon to black, but you can set your own colors in res/values as stated here: Android System Color Constants

Information about the meta-data tags is here: https://firebase.google.com/docs/cloud-messaging/android/receive

Comments

[Oliver Dixon]

You also need to generate the file in case anyone was wondering if this was some special Android setting..

[fenchai]

I did all but create the icon file, I just used my "@mipmap/ic_launcher" icon but it still displays white icon... why is this happening? I will try creating a new icon file

[fenchai]

ok I made a text constant image and it works, I can change the color of the text but I have no idea how to change the background color or image

[fenchai]

ok now I understand why it's white, it's because my icon image was circular, it needs to show some kind of transparency on the image. Solution works.