xamarin forms firebase notification UI

Question

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 ?

Answer 1

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)

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;  
           }  
       }  
   }  

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.