xamarin forms firebase notification UI

Strange Mood 1 Reputation point
2021-09-06T10:11:23.933+00:00

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 ?

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,314 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 70,811 Reputation points Microsoft Vendor
    2021-09-07T07:38:29.843+00:00

    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.