Toast Notifications for Xamarin Forms

I manage the fairly popular Toasts.Forms.Plugin which displays toast like notifications on all platforms. This was originally created almost 2 years ago by EgorBo when the notification system on each platform was not very extensible or usable, hence you had to create your own if you wanted to display notifications while the app was in the foreground and have some respectable customization options. With iOS10, Android Lollipop and UWP there is now a decent notification system on each platform. Considering the new functionality, the Plugin has been rewritten to use each of native platforms notification systems.

toast

Whats Changed

In version 3.0 a lot has changed including many breaking changes but its still easy to use.

#1 – Native Platform Notifications

While this has now limited the customization of the notification, it now brings the notifications inline with the platform look and feel and allows them to be placed in the notification center. To me this is much better than out of place notifications with its own style and now works more seamlessly with the platform and what the user is expecting. It also allows possibilities such as sound and badges.

#2 – More informative result

I have kept the flow of the API the same meaning you await for the response of the notification, but instead of just a Tapped response you receive a much better result as to what happened. You now receive a NotificationResult with an Action with one of these options.

 [Flags]
 public enum NotificationAction
 {
     Timeout = 1, // Hides by itself
     Clicked = 2, // User clicked on notification
     Dismissed = 4, // User manually dismissed notification
     ApplicationHidden = 8, // Application went to background
     Failed = 16 // When failed to display the toast
 }

#3 – Options

You now pass through options instead of a large parameter list. This will enable future API enhancements to be made without breaking existing apps.

public interface INotificationOptions
{
    string Title { get; }
    string Description { get; }
    bool IsClickable { get; }

    // Platform Specific Options
    IWindowsOptions WindowsOptions { get; }
    IAndroidOptions AndroidOptions { get; }
    IiOSOptions iOSOptions { get; }
}

#4 – Override the Image

On UWP, Android (Notification.Builder only) and iOS you can override the logo image. On iOS it isn’t possible to replace the logo image via code but can be done in your info.plist.

The images work much like other components in Xamarin Forms, where you can just reference the name of the image and in UWP it will search the project root.

var options = new NotificationOptions() { WindowsOptions = new WindowsOptions { LogoUri = "image.png" } }

You can also add a url such as https://example.com/myimage.png or do a platform specific url such as ms-appx://.

For Android you can set the SmallIconDrawable in the Init() method on the platform. The Image MUST be in the Drawables folder to work.

// This is called on the Android Platform
ToastNotification.Init(this, new PlatformOptions() { SmallIconDrawable = Android.Resource.Drawable.IcDialogInfo } );

Alternatively if you can pass this int value down into your PCL you can use this in AndroidOptions on a per toast notification.

Using The Plugin

After you have installed the plugin on each platform and your portable library, you will need to register and initialize it. Just after the Xamarin.Forms.Init(); line add the following. I am just using the DependencyService as an example, you can use any DI Framework.

DependencyService.Register<ToastNotification>();
ToastNotification.Init();

// For Android pass through the activity
ToastNotification.Init(this);

On iOS just after this, we need to request permissions to show notifications because as Apple correctly states, they are disruptive to the user and hence permission is just common courtesy.

// Request Permissions
UNUserNotificationCenter.Current.RequestAuthorization(UNAuthorizationOptions.Alert 
                                                      | UNAuthorizationOptions.Badge 
                                                      | UNAuthorizationOptions.Sound, 
                                                      (granted, error) =>
                                                      {
                                                           // Do something if needed
                                                      });

Now we can call a notification anywhere in your app with the following.

var options = new NotificationOptions()
{
    Title = "Title",
    Description = "Some Description",
    IsClickable = false // Set to true if you want the result Clicked to come back (if the user clicks it)
};
var notification = DependencyService.Get<IToastNotificator>();
var result = await notification.Notify(options);

Future Roadmap

This is open source software being coded on in my spare time, hence I can never guarantee any enhancement schedules but here is the main focus for improvements.

  1. Customizable Action Buttons
  2. Callback Action on notification result (so you don’t have to await)
  3. Further customizable content
  4. Receive user input in from the notification

Posted

in

by

Tags: