Ajay
Ajay

Reputation: 16290

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

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

Now the App show the Icon as White box .

Upvotes: 43

Views: 71946

Answers (4)

ali moradi
ali moradi

Reputation: 15

Hello, after all the research, I was able to change the service icon. Pay attention, the name of your photo must be ic_bg_service_small. According to the attached photo, you must create the drawable folders and add your own xml or png photos and use them.

enter image description here

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
      FlutterLocalNotificationsPlugin();

if (Platform.isIOS || Platform.isAndroid) {
    var androidInitialize =
        const AndroidInitializationSettings("ic_bg_service_small");
    var initializationSettings =
        InitializationSettings(android: androidInitialize);
    flutterLocalNotificationsPlugin.initialize(initializationSettings);
}

await flutterLocalNotificationsPlugin
      .resolvePlatformSpecificImplementation<
          AndroidFlutterLocalNotificationsPlugin>()
      ?.createNotificationChannel(channel);

void initialNotify(
  FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin) {
  flutterLocalNotificationsPlugin.show(
    notificationId,
    'COOL SERVICE',
    '',
    const NotificationDetails(
      android: AndroidNotificationDetails(
        notificationChannelId,
        'MY FOREGROUND SERVICE',
        icon: 'ic_bg_service_small',
        ongoing: true,
      ),
    ),
  );
}

Upvotes: -1

Islom Rixsiyev
Islom Rixsiyev

Reputation: 53

Once you done the steps mentioned above sometimes does not work and show default flutter icon.In this case, need to change or set Notification setting of flutter_local_notifications like this:

flutterLocalNotificationsPlugin.show(id, title, body,
      payload: payload,
      NotificationDetails(
        android: AndroidNotificationDetails(
          channel.id,
          channel.name,
          channelDescription: channel.description,
          icon: '@mipmap/your_icon_name',
        ),
          )
    );
  

for more information read this instruction

https://firebase.flutter.dev/docs/messaging/notifications

Upvotes: -1

Ajay
Ajay

Reputation: 16290

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" />

NOTE: Before starting, make sure your icon/image has a transparent background. The solution will seem like it's not working if your image background has a color.

Want to generate mipmap icons, try appicon.co/

Upvotes: 47

Sludge
Sludge

Reputation: 7385

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

NOTE: Before starting, make sure your icon/image has a transparent background. The solution will seem like it's not working if your image background has a color.

  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. Alternative to Roman's Notification Icon Generator, try appicon.co

  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" />
  1. Save your file. You may need to stop and restart or uninstall and reinstall your app for the notification icon to start showing.

  2. 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

Upvotes: 88

Related Questions