Firebase Cloud Messaging: How to set the notification icon on android?

Question

I am having trouble setting the notification icon on android studio.

I set up the drawable folder like so:

And I've also set the default icon in my AndroidManifest.xml file:

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

And here I'm setting the icon field to notification_icon: https://developers.google.com/cloud-messaging/http-server-ref#downstream-http-messages-json (p.s. I'm aware that's GCM, but it works. I'm receiving the notification with everything besides the icon)

What am I missing? All I see is a white square inside a grey circle.

This is my backend code: Pushex.push(%{title: user.name, body: "message goes here", badge: 1, sound: "default", icon: "notification_icon"}, to: user.fcm_token, using: :gcm) (https://github.com/tuvistavie/pushex)

Answer 1

I am using the FCM plugin and here is what worked for me (September 2019):

1. In config.xml (yourapp/config.xml) Add the following to the tag at the end xmlns:android="http://schemas.android.com/apk/res/android"

It should look something like this now:

<widget id="com.mydomain.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">

Or simply, copy the above line, replace the value of widget id, with your own.

2. In the same config.xml file: Just before the tag corresponding to , add this:

<config-file parent="/manifest/application/" target="app/src/main/AndroidManifest.xml">
            <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/fcm_push_icon" />
</config-file>

3. Visit the following link: Notification Icon Generator

Upload a White version (single color) of your logo on a Transparent background. If you upload a colored version, you will get a dark gray icon, which would look nasty. If you don't have a white version of your logo, get it designed. Leave the rest of the settings as they are. For the Name textbox value, enter: fcm_push_icon. Then click on the Blue colored round shaped button to download the zip file.

4. Unzip the zip file that you just downloaded it the above step and extract its contents to a folder. You will notice that it contains a res folder. If you open this folder, it will contain other folders with the following names:

   • drawable-hdpi
   • drawable-mdpi
   • drawable-xhdpi
   • drawable-xxhdpi
   • drawable-xxxhdpi

Each of those folders will contain a PNG icon by the name "fcm_push_icon.png". The only difference between the icons in those different folders is their size.

5. Open the following file path in your app (If it doesn't exist, create it as shown below):

yourApp/platforms/android/app/src/main/res

Simply copy all the 5 folders listed in in the point 4 above, to the location shown just above i.e. into the res folder i.e. into yourApp/platforms/android/app/src/main/res

That's it! Now just build your app. Whenever you receive a notification, you will see your app icon in the notifications (at least on Android).

If anyone has figured out how to make colored icons appear in the Android notifications, please share your solution.

Answer 2

Fixed it... this is so stupid. Was inspired by this answer: https://stackoverflow.com/a/28387744/1555312

I made my notification icon my app icon:

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

And then the magic line in android/app/build.gradle...

defaultConfig {
    targetSdkVersion 20 // this has to be < 21
    ...
}

Hope I save hours of someone else's life

Answer 3

Check this code. It may help you.

 public class MyFirebaseMessagingService extends FirebaseMessagingService {
            private static final String TAG = "FCM Service";

            @Override
            public void onMessageReceived(RemoteMessage remoteMessage) {       
                Uri defaultSoundUri = RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
                            Intent intent = new Intent(getApplicationContext(), YourClass.class);
                    PendingIntent contentIntent = PendingIntent.getActivity(getApplicationContext(), NotificationID.getID(), intent,
                            PendingIntent.FLAG_UPDATE_CURRENT);
                    NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(getApplicationContext())
                            .setSmallIcon(getNotificationIcon())
                            .setContentTitle(remoteMessage.getData().get("title"))
                            .setContentText(remoteMessage.getData().get("body"))
                            .setAutoCancel(true)
                            .setSound(defaultSoundUri)
                            .setStyle(new NotificationCompat.BigTextStyle().bigText(remoteMessage.getData().get("body")))
                            .setContentIntent(contentIntent);
                    NotificationManager notificationManager =
                            (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
                    notificationManager.notify(NotificationID.getID(), notificationBuilder.build());
            }
            private int getNotificationIcon() {
                boolean useWhiteIcon = (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP);
                //If the build version is higher than kitkat we need to create Silhouette icon. 
                return useWhiteIcon ? R.mipmap.ic_notification : R.mipmap.ic_launcher;
            }

            public static class NotificationID {
                private static final AtomicInteger c = new AtomicInteger(0);

                public static int getID() {
                    return c.incrementAndGet();
                }
            }
        }

If the build version is higher than kitkat we need to create Silhouette icon. For that online tool is available Refer:https://romannurik.github.io/AndroidAssetStudio/icons-notification.html

Answer 4

With SDK 9.8.0 however, you can override the default! In your AndroidManifest.xml you can set the following fields to customise the icon and color:

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

and

<manifest>
<application 
    android:icon="@drawable/icon" 
    android:label="@string/app_name">

    <!-- Add your meta-data here-->

    <activity 
        android:name=".MainActivity" 
        android:label="@string/app_name">

        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>

    </activity>

</application>