Icon not displaying in notification: white square shown instead

My app generates a notification, but the icon I set for that notification is not being displayed. Instead I get a white square.

I have tried resizing the png of the icon (dimensions 720×720, 66×66, 44×44, 22×22). Curiously, when using smaller dimensions the white square is smaller.

  • Converting from GLSurfaceView to TextureView (via GLTextureView)
  • Android rotate animation between two activity?
  • Unable to play some Youtube videos using YouTube Android Player API
  • Get current location in onMapReady in android using google locations API
  • How to implement first launch tutorial like Android Lollipop apps: Like Sheets, Slides app?
  • Android listSelector still partly visible when the item is scrolled out
  • I have googled this problem, as well as the correct way of generating notifications, and from what I’ve read my code should be correct. Sadly things are not as they should be.

    My phone is a Nexus 5 with Android 5.1.1. Problem is also present on emulators, a Samsung Galaxy s4 with Android 5.0.1 and a Motorola Moto G with Android 5.0.1 (both of which I borrowed, and don’t have right now)

    Code for notifications follows, and two screenshots. If you require more information, please feel free to ask for it.

    Thank you all.

    @SuppressLint("NewApi") private void sendNotification(String msg, String title, String link, Bundle bundle) {
        NotificationManager notificationManager = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);
        Intent resultIntent = new Intent(getApplicationContext(), MainActivity.class);
        resultIntent.putExtras(bundle);
        PendingIntent contentIntent = PendingIntent.getActivity(this, 0,
                resultIntent, Intent.FLAG_ACTIVITY_NEW_TASK);
        Notification notification;
        Uri sound = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.notificationsound);
        notification = new Notification.Builder(this)
                    .setSmallIcon(R.drawable.lg_logo)
                    .setContentTitle(title)
                    .setStyle(new Notification.BigTextStyle().bigText(msg))
                    .setAutoCancel(true)
                    .setContentText(msg)
                    .setContentIntent(contentIntent)
                    .setSound(sound)
                    .build();
        notificationManager.notify(0, notification);
    }
    

    without opening the notification
    notifications opened

    Related posts:

    RxJava resubscribe to event after activity restore
    Crop image to square - Android
    How to handle Basic Authentication in WebView
    onCreate(…) is called twice after the device is rotated
    Android, Saving and loading a bitmap in cache from different activities
    how to animate one item of layer-list
  • android - string.xml parsing error
  • Error getGoogleAppId failed with status: 10 Android KitKat - GCM and Google Drive
  • Android Webview: “Uncaught TypeError: Cannot read property 'getItem' of null”
  • Using android.support.v7.widget.CardView in my project (Eclipse)
  • How to customize the width and height when show an Activity as a Dialog
  • Retrofit 2 HTTP method annotation is required (e.g., @GET, @POST, etc.)
  • 11 Solutions collect form web for “Icon not displaying in notification: white square shown instead”

    Cause: For 5.0 Lollipop “Notification icons must be entirely white”.

    If you want to support Lollipop Material Icons then make transparent icons for Lollipop and above version.
    Please refer following:
    https://design.google.com/icons/

    Implementation of Notification Builder for below and above Lollipop OS version would be:

    NotificationCompat.Builder builder = new NotificationCompat.Builder(this);
    if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        builder.setSmallIcon(R.drawable.icon_transperent);
    } else { 
        builder.setSmallIcon(R.drawable.icon);
    } 
    

    If you want to set colored single icon for all OS version then

    Solution: For colored icons, use

    defaultConfig {
            applicationId "com.your.app.pkj"
            minSdkVersion xx
            targetSdkVersion 20 // < 21 (target sdk version in manifest file will be less than 21).
            versionCode x
            versionName "x.x"
        }
    

    in app/build.gradle file. It will solve your problem completely!!

    I really suggest following Google’s Design Guidelines:

    “Notification icons must be entirely white.”

    Here is how you can implement it:

    If you are using Gradle/Android Studio to build your apps, use build.gradle:

    defaultConfig {
        targetSdkVersion 20
    }
    

    Otherwise (Eclipse etc) use AndroidManifest.xml:

    <uses-sdk android:minSdkVersion="..." android:targetSdkVersion="20" />
    

    We can do like below:

    Create a new object of notification builder and call setSmallIcon() using notification builder object like in below code.

    Create a method in which we will check on which OS version we are installing our app . If it is below Lolipop i.e API 21 then it will take the normal app icon with background color else it will take the transparent app icon without any background. So the devices using os version >= 21 will set the background color of icon using method setColor() of Notification builder class.

    Sample Code:

    NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this);
    
    notificationBuilder.setSmallIcon(getNotificationIcon(notificationBuilder));
    
    private int getNotificationIcon(NotificationCompat.Builder notificationBuilder) {
    
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                 int color = 0x008000;
                 notificationBuilder.setColor(color);
                 return R.drawable.app_icon_lolipop_above;
    
        } else {
                 return R.drawable.app_icon_lolipop_below;
        }
    }
    

    If you wan to provide lollipop support notification icon then make two type notification icon :

    1. normal notification icon : for below lollipop version.
    2. notification icon with transparent background : for lollipop and above version.

    Now set appropriate icon to notification builder at run time base on OS version :

    NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(this);
    if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        mBuilder.setSmallIcon(R.drawable.ic_push_notification_transperent);
    } else {
        mBuilder.setSmallIcon(R.drawable.ic_push_notification);
    }
    

    Finally I’ve got the solution for this issue.

    This issue occurs only when the app is not at all running. (neither in the background nor in the foreground). When the app runs on either foreground or background the notification icon is displayed properly.(not the white square)

    So what we’ve to set is the same configuration for notification icon in Backend APIs as that of Frontend.

    In the frontend we’ve used React Native and for push notification we’ve used react-native-fcm npm package.

    FCM.on("notification", notif => {
       FCM.presentLocalNotification({
           body: notif.fcm.body,
           title: notif.fcm.title,
           big_text: notif.fcm.body,
           priority: "high",
           large_icon: "notification_icon", // notification icon
           icon: "notification_icon",
           show_in_foreground: true,
           color: '#8bc34b',
           vibrate: 300,
           lights: true,
           status: notif.status
       });
    });
    

    We’ve used fcm-push npm package using Node.js as a backend for push notification and set the payload structure as follows.

    {
      to: '/topics/user', // required
      data: {
        id:212,
        message: 'test message',
        title: 'test title'
      },
      notification: {
        title: 'test title',
        body: 'test message',
        icon : 'notification_icon', // same name as mentioned in the front end
        color : '#8bc34b',
        click_action : "BROADCAST"
      }
    }
    

    What it basically searches for the notification_icon image stored locally in our Android system.

    Declare this code in Android Manifest :

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

    I hope this usefull to you.

    For SDK >= 23, please add setLargeIcon

    notification = new Notification.Builder(this)
                .setSmallIcon(R.drawable.ic_launcher)
                .setLargeIcon(context.getResources(), R.drawable.lg_logo))
                .setContentTitle(title)
                .setStyle(new Notification.BigTextStyle().bigText(msg))
                .setAutoCancel(true)
                .setContentText(msg)
                .setContentIntent(contentIntent)
                .setSound(sound)
                .build();
    

    Notifications are greyscale as explained below. They are not black-and-white, despite what others have written. You have probably seen icons with multiple shades, like network strength bars.

    Prior to API 21 (Lollipop 5.0), colour icons work. You could force your application to target API 20, but that limits the features available to your application, so it is not recommended. You could test the running API level and set either a colour icon or a greyscale icon appropriately, but this is likely not worthwhile. In most cases, it is best to go with a greyscale icon.

    Images have four channels, RGBA (red / green / blue / alpha). For notification icons, Android ignores the R, G, and B channels. The only channel that counts is Alpha, also known as opacity. Design your icon with an editor that gives you control over the Alpha value of your drawing colours.

    How Alpha values generate a greyscale image:

    • Alpha = 0 (transparent) — These pixels are transparent, showing the background colour.
    • Alpha = 255 (opaque) — These pixels are white.
    • Alpha = 1 … 254 — These pixels are exactly what you would expect, providing the shades between transparent and white.

    Changing it up with setColor:

    • Call NotificationCompat.Builder.setColor(int argb). From the documentation for Notification.color:

      Accent color (an ARGB integer like the constants in Color) to be applied by the standard Style templates when presenting this notification. The current template design constructs a colorful header image by overlaying the icon image (stenciled in white) atop a field of this color. Alpha components are ignored.

      My testing with setColor shows that Alpha components are not ignored. Higher Alpha values turn a pixel white. Lower Alpha values turn a pixel to the background colour (black on my device) in the notification area, or to the specified colour in the pull-down notification.

    You can use different icon for different versions. Simply set logic on your icon like this:

    int icon = Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP ? R.drawable.colored_: R.drawable.white_tint_icon_for_lolipop_or_upper;
    

    Requirements to fix this issue:

    1. Image Format: 32-bit PNG (with alpha)

    2. Image should be Transparent

    3. Transparency Color Index: White (FFFFFF)

    Source: http://gr1350.blogspot.com/2017/01/problem-with-setsmallicon.html

    Try this

    i was facing same issue i tried lot of anwers but didn’t get any solutions,finally i found the way to solve my problem.

    – make notification icon with transparent background .The app’s width and height must be like below sizes and paste all these in your project->app->src->main->res

    • MDPI 24*24

    • HDPI 36*36

    • XHDPI 48*48

    • XXHDPI 72*72


    after the above paste this below line in your onMessageReceived method


    Intent intent = new Intent(this, News.class);
                intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                PendingIntent pendingIntent = PendingIntent.getActivity(this, 0, intent,
                        PendingIntent.FLAG_ONE_SHOT);
                Uri defaultSoundUri = RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
                NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this);
                if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
                {
                    notificationBuilder.setSmallIcon(R.drawable.notify)
                                          //            .setContentTitle(title)
                                //                        .setContentText(message)
                            .setAutoCancel(true)
                            .setSound(defaultSoundUri)
                            .setContentIntent(pendingIntent);
                } else
                    {
                        notificationBuilder.setSmallIcon(R.drawable.notify)
                           //                                .setContentTitle(title)
                            //                        .setContentText(message)
                                .setAutoCancel(true)
                                .setSound(defaultSoundUri)
                                .setContentIntent(pendingIntent);
                }
                NotificationManager notificationManager =
                        (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
                notificationManager.notify(0, notificationBuilder.build());
    

    Foreground Screenshot

    Background Screenshot

    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.