question

StrangeMood-7209 avatar image
0 Votes"
StrangeMood-7209 asked LeonLu-MSFT edited

xamarin forms firebase notification UI

i have requirements to get push notifications on Xamarin app(android and iOS) by using firebase GCM(google cloud messaging)
the requirements to display the notification in custom UI with Image.
how can i implement this ?

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered LeonLu-MSFT edited

Hello,​

Welcome to our Microsoft Q&A platform!

If you want to achieve the FCM in xamarin, you have to use service in android, if you want to show the image in the fcm, you should create a notification in the FCM console like following screenshot. Add the key and value(image url)

129728-image.png

then you wirte a service to handle it. I get the image url by string imageReceived = data["image"];, If we get the image url, we have to convert it to bitmap with GetImageBitmapFromUrl method, in the end, you can add image to notifiation with BigPictureStyle and set SetStyle(picStyle).

[Service]
    [IntentFilter(new[] {"com.google.firebase.MESSAGING_EVENT"})]
    public class MyFirebaseMessagingService : FirebaseMessagingService
    {
        const string TAG = "MyFirebaseMsgService";

        public override void OnMessageReceived(RemoteMessage message)
        {
            Log.Debug(TAG, "From: " + message.From);
           
            var body = message.GetNotification().Body;
          //  message.GetNotification().().get("image-url");
            Log.Debug(TAG, "Notification Message Body: " + body);
            SendNotification(body, message.Data);
        }

        void SendNotification(string messageBody, IDictionary<string, string> data)
        {

           
            var intent = new Intent(this, typeof(MainActivity));
            intent.AddFlags(ActivityFlags.ClearTop);
            foreach (var key in data.Keys)
            {
                intent.PutExtra(key, data[key]);
            }

            string imageReceived = data["image"];
            var bitmap = GetImageBitmapFromUrl(imageReceived);
        

            BigPictureStyle picStyle = new BigPictureStyle();
            picStyle.BigPicture(bitmap);
            


            picStyle.SetSummaryText("This is a BigPicture");

            var pendingIntent = PendingIntent.GetActivity(this, MainActivity.NOTIFICATION_ID, intent, PendingIntentFlags.OneShot);

            var notificationBuilder = new NotificationCompat.Builder(this, MainActivity.CHANNEL_ID)
                                      .SetSmallIcon(Resource.Drawable.ic_stat_ic_notification)
                                      .SetContentTitle("FCM Message")
                                      .SetContentText(messageBody)
                                      .SetAutoCancel(true)
                                      .SetContentIntent(pendingIntent).SetStyle(picStyle);
                                      

            var notificationManager = NotificationManagerCompat.From(this);
            notificationManager.Notify(MainActivity.NOTIFICATION_ID, notificationBuilder.Build());
        }
        Bitmap imageBitmap = null;
        Bitmap roundedImage = null;
        private Bitmap GetImageBitmapFromUrl(string url)
        {
            using (var webClient = new System.Net.WebClient())
            {
                var imageBytes = webClient.DownloadData(url);
                if (imageBytes != null && imageBytes.Length > 0)
                {
                    imageBitmap = BitmapFactory.DecodeByteArray(imageBytes, 0, imageBytes.Length);
                    roundedImage = Bitmap.CreateScaledBitmap(imageBitmap, 300, 300, false);
                    //roundedImage = getRoundedShape(resizedImage);
                }
                webClient.Dispose();
            }
            return roundedImage;
        }
    }
}


129759-image.png

Best Regards,

Leon Lu



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



image.png (60.5 KiB)
image.png (172.2 KiB)
· 6
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

thanks for reply, can you share what is using part of service class?
130164-image.png


0 Votes 0 ·
image.png (329.7 KiB)

thanks for reply, can you share what is using part of service class?

130144-notification-support.png


0 Votes 0 ·

Using Android.Support.V4.App.NotificationCompat, I use the demo based on this thread: https://github.com/xamarin/monodroid-samples/tree/master/Firebase/FCMNotifications/FCMNotifications

0 Votes 0 ·

if you can notice this conflict, maybe i have to download some packages.
i also i found we have Android.Support.V13 now and in this mplementation we use Android.Support.V4 , i dont know maybe there is a new implementation for this.

130058-image.png


0 Votes 0 ·
image.png (331.7 KiB)
Show more comments