What size can we use for the notification badge icon in FCM?

Question

I am using FCM push notification for my app, everything is working fine. but right now, I am getting a small icon below my notification icon. See below image.

Can any one tell me what is the size we can use for this icon? And how can we customize it?How can i add icon or image at that place?

Can you post your code snippet for the Notification builder? — AL., Sep 23 '16 at 10:13

score 2 · Answer 1 · answered Oct 04 '16 at 12:28

You can use badge icon of any size like 72x72 or any but the thing is your icon should be .png extension only of transparent background and icon color should be white only... Here is the code for setting large notification icon and badge icon

 String title = context.getString(R.string.app_name);
    Bitmap bm = BitmapFactory.decodeResource(context.getResources(), R.drawable.logo);
    NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(context)
            .setSmallIcon(R.drawable.tlogo)
            .setLargeIcon(bm)
            .setContentTitle(title)
            .setContentText(message)
            .setStyle(new NotificationCompat.BigTextStyle().bigText(message))
            .setWhen(when);

Matt Gaunt · Answer 2 · 2017-08-31T19:15:31.780

The icon in the image suggests that the notification has come from Chrome which recently added support for badge customisation in version 53.

There is sadly no guidance on the recommended size, but a square image with transparent background and only white would be the recommendation I can give.

72x72px is probably a good bet for image size based on Android docs which suggest a badge size of 24dips (which can be thought of as 24px multiplied by a devices screen density). So 24px x 3 = 72px.

To set the badge on a web notification you need to include a badge options:

self.addEventListener('push', function(event) {
  event.waitUntil(
    self.registration.showNotification(
      'Hello', {
        body: 'Thanks for sending this push msg.',
        icon: './images/icon-192x192.png',
        badge: './images/icon-72x72.png'
      })
  );
});

Info from: https://medium.com/dev-channel/custom-notification-badges-for-all-df524a4003e8#.jwbxe7eft

Further Info: https://web-push-book.gauntface.com/chapter-05/02-display-a-notification/#badge

score 1 · Accepted Answer · answered Feb 28 '17 at 06:31

I tried this and it solved,sorry for late answer

    private void sendNotification(String messageBody,String titles) {


            Intent intent = new Intent(this, NotificationList.class);
            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
            PendingIntent pendingIntent = PendingIntent.getActivity(this, 0 /* Request code */, intent,
                    PendingIntent.FLAG_ONE_SHOT);

            Uri defaultSoundUri= RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
            Bitmap largeIcon = BitmapFactory.decodeResource(getResources(), R.mipmap.appicon);

            NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this)

                    .setContentTitle(titles)
                    .setLargeIcon(largeIcon)
                    .setContentText(messageBody)
                    .setAutoCancel(true)
                    .setSound(defaultSoundUri)
                    .setSmallIcon(getNotificationIcon())
                    .setContentIntent(pendingIntent);

            NotificationManager notificationManager =
                    (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);

            notificationManager.notify(0 /* ID of notification */, notificationBuilder.build());
        }

private int getNotificationIcon() {
        boolean useWhiteIcon = (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.M);
        return useWhiteIcon ? R.mipmap.notismall : R.mipmap.appicon;
    }

looptheloop88 · Answer 4 · 2016-09-26T05:18:08.783

0

The icon size is not stated in the Firebase reference documentation for the notification payload used to send messages to client apps, however you can check out the guidelines in creating icons for Android and IOS.

edited Sep 26 '16 at 05:18

answered Sep 26 '16 at 04:25

looptheloop88

3,026
17
20

i am asking about android – Aditya Vyas-Lakhan Sep 26 '16 at 05:00

score 0 · Answer 5 · edited May 23 '17 at 11:53

So I did some digging about Android Notifications and Building Notifications. You can set the icon by using the icon parameter.

However, for the Badge inside the notification, this one seems to be handled by the Android System itself and cannot be modified. Depending also on the device, it may very well be that the badge is not visible, since Android itself doesn't allow Notification Badges even for App Icons.

So far, I've done some testing on my device and only the notifications that show badges are the ones that can be opened by Google Apps (Gmail, Drive, Photos, etc.) and the notifications sent by Device Manufacturer.

The one you've included in your post must be a default badge made by the device manufacturer and it is only showing because of the Device's App Launcher.

So long story short, it's not possible for you to set the Notification's Icon Badge.

score 0 · Answer 6 · answered Oct 04 '16 at 12:29

if you want to hide the small icon on top of large icon use

int smallIconId = mContext.getResources().getIdentifier("right_icon", "id", android.R.class.getPackage().getName());
        Notification notification = notificationBuilder.build();
        if (smallIconId != 0) {
            notification.contentView.setViewVisibility(smallIconId, View.INVISIBLE);
        }

you can even play more with findviewById(smallIconId)

What size can we use for the notification badge icon in FCM?

6 Answers6