CODEWITHSUNDEEP
androidfirebasefirebase-cloud-messaging
Jayson Tamayo
Jayson Tamayo

Reputation: 2811

Image not showing in push notification

I am using the notification payload below and use Postman to send a push notifications to Android devices:

{
    "to" : "/topics/xxxx" ,
    "data" : {
        "url" : "https://res.cloudinary.com/demo/image/upload/w_200/lady.jpg",
        "dl" : ""
    },
    "notification" : {
        "title" : "This is a sample notification from general2",
        "body" : "Rich notification testing (body)",
        "image": "https://res.cloudinary.com/demo/image/upload/w_200/lady.jpg"
    }

}

I have used the image key value pair to include an image in the push notification. My expected output is:

enter image description here

But this is what it is showing in the phone:

enter image description here

As you can see, the image is not appearing. What might be the problem?

Upvotes: 7

Views: 18015

Answers (8)

Sanjay KM
Sanjay KM

Reputation: 1

As per my knowledge FCM dont send image if we use topics, Images will be sent if we send to registration ids (Even in bulk).

Upvotes: 0

Mudit Goel
Mudit Goel

Reputation: 344

Try Using the following code :

val threadPolicy = ThreadPolicy.Builder().permitAll().build()
StrictMode.setThreadPolicy(threadPolicy)

var bmp: Bitmap? = null
try {
    val `in`: InputStream = URL(imgUrl).openStream()
    bmp = BitmapFactory.decodeStream(`in`)
} catch (ex: Exception) {
    ex.printStackTrace()
}
notificationBuilder = NotificationCompat.Builder(ctx, channelId)
    .setSmallIcon(R.mipmap.ic_puch_notification1)
    .setLargeIcon(bmp)
    .setContentTitle(title)
    .setPriority(Notification.DEFAULT_ALL)
    .setContentText(description)

notificationBuilder.setStyle(
    NotificationCompat.BigPictureStyle().bigPicture(bmp)
        .bigLargeIcon(null)
)

Upvotes: 0

Ban
Ban

Reputation: 1

Check your image size, mostly if you prefer to use an image less than or equal to 1 mb, mostly your issue will get resolved, I tried it and works in Xiaomi device.

Upvotes: 0

Divyam Kumar
Divyam Kumar

Reputation: 71

In-short Uploading Image to a popular image hosting website and putting that link for notification image url worked for me. Also check image size i used (1000 × 500 px)

Expaned I was also facing the same problem but creating MyFirebaseMessagingService did not help. I was trying to load image from own hosting like (https://www.example.com/image/img.png). Although it was https and firebase console was showing the image but on actual device it was not displayed.

For me uploading image to imggur.com or putting it in firbase storage and using that link for notification worked without any extra messaging service code.

Upvotes: 2

Sam Chen
Sam Chen

Reputation: 8847

2021 Working Solution:

override fun onMessageReceived(remoteMessage: RemoteMessage)
    remoteMessage.notification?.let {
        sendNotification(it.title!!, it.body!!, it.imageUrl)  //image url in uri type
    }
}

private fun sendNotification(title: String, message: String, imageUri: Uri?) {        
    ...

    val imageBitmap = imageUri?.let {
        Glide.with(requireContext()).asBitmap().load(it).submit().get()

        //you pick one, Glide or Picasso

        Picasso.get().load(it).get()
    }

    ...
}

Upvotes: 0

c0dehunter
c0dehunter

Reputation: 6140

I found out the problem is in aggressive battery savers. For example, Xiaomi and Samsung (Android 11 especially) phones will restrict FCM to do background networking (to fetch the image), thus, the image will be missing. This will only happen when phone is in deep sleep. If it's not (and your app is closed or in background), the image will be showing. If the app is in foreground, onMessageReceived() will be called and you need to fetch the image manually anyways and it will not be restricted by phone.

Sadly, I didn't find any workaround around this, except users manually disabling battery saving for your app :/

enter image description here

Upvotes: 12

user9578753
user9578753

Reputation:

you have to handle the reception of the image on your own,like said in the last line here of the official documentation: With notification set as shown, this send request enables the receiving client to handle the image delivered in the payload. Firesebase official documentation

Upvotes: 0

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

This code might help

public class MyFirebaseMessagingService extends FirebaseMessagingService {

    private static final String TAG = "MyFirebaseMessagingServ";

    Target target = new Target() {
        @Override
        public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
            sendNotification(bitmap);
        }

        @Override
        public void onBitmapFailed(Exception e, Drawable errorDrawable) {

        }

        @Override
        public void onPrepareLoad(Drawable placeHolderDrawable) {

        }
    };

    @Override
    public void onMessageReceived(RemoteMessage remoteMessage) {
        super.onMessageReceived(remoteMessage);

        if(remoteMessage.getData()!=null)
            getImage(remoteMessage);
    }

    private void sendNotification(Bitmap bitmap){


        NotificationCompat.BigPictureStyle style = new NotificationCompat.BigPictureStyle();
        style.bigPicture(bitmap);

        Uri defaultSound = RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);

        Intent intent = new Intent(getApplicationContext(), MainActivity.class);
        intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP);
        PendingIntent pendingIntent = PendingIntent.getActivity(getApplicationContext(), 0, intent,0);

        NotificationManager notificationManager = (NotificationManager)getSystemService(Context.NOTIFICATION_SERVICE);
        String NOTIFICATION_CHANNEL_ID = "101";

        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.O){
            @SuppressLint("WrongConstant") NotificationChannel notificationChannel = new NotificationChannel(NOTIFICATION_CHANNEL_ID, "Notification", NotificationManager.IMPORTANCE_MAX);

            //Configure Notification Channel
            notificationChannel.setDescription("Game Notifications");
            notificationChannel.enableLights(true);
            notificationChannel.setVibrationPattern(new long[]{0, 1000, 500, 1000});
            notificationChannel.enableVibration(true);

            notificationManager.createNotificationChannel(notificationChannel);
        }

        NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this, NOTIFICATION_CHANNEL_ID)
                .setSmallIcon(R.mipmap.ic_launcher_round)
                .setContentTitle(Config.title)
                .setAutoCancel(true)
                .setSound(defaultSound)
                .setContentText(Config.content)
                .setContentIntent(pendingIntent)
                .setStyle(style)
                .setLargeIcon(bitmap)
                .setWhen(System.currentTimeMillis())
                .setPriority(Notification.PRIORITY_MAX);


        notificationManager.notify(1, notificationBuilder.build());


    }

    private void getImage(final RemoteMessage remoteMessage) {

        Map<String, String> data = remoteMessage.getData();
        Config.title = data.get("title");
        Config.content = data.get("content");
        Config.imageUrl = data.get("imageUrl");
        Config.gameUrl = data.get("gameUrl");
        //Create thread to fetch image from notification
        if(remoteMessage.getData()!=null){

            Handler uiHandler = new Handler(Looper.getMainLooper());
            uiHandler.post(new Runnable() {
                @Override
                public void run() {
                    // Get image from data Notification
                    Picasso.get()
                            .load(Config.imageUrl)
                            .into(target);
                }
            }) ;
        }
    }
}

Upvotes: 0

Related Questions