[Xamarin Forms] Complete guide to design a TOAST component

In this guide, we will first show you how to design a toast component in Xamarin Forms (adding transition animations to the component), then in a second part, we list some existing controls that you can use directly...

Custom Toast design in Xamarin Forms 

Designing a "toast" component in Xamarin Forms involves creating a custom control to display brief messages to the user.  I will show you bellow a simple example on how to create a Toast component, and we will also how to add transition animation. Here are the steps to design and implement a toast component:

Step 1: Create the Toast View

First, you need to create a custom view that represents the toast message. You can add all the UI controls that you need to fit your needs (like an icon image...)

1.1 Create a ToastView class

Create a new class ToastView that inherits from ContentView.

public class ToastView : ContentView
{
    public ToastView(string message)
    {
        BackgroundColor = Color.FromRgba(0, 0, 0, 0.8);
        Padding = new Thickness(10);
        CornerRadius = 10;

        Content = new Label
        {
            Text = message,
            TextColor = Color.White,
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        };
    }
}

Step 2: Create the Toast Service

In order to display the toast component, following a classic way, you can create a service that will manage showing/hiding the Toast component:

2.1 Create an IToastService interface

public interface IToastService
{
    Task ShowToast(string message);
}

2.2 Implement the ToastService

Create a ToastService class that implements IToastService.

public class ToastService : IToastService
{
    private static Page GetCurrentPage()
    {
        var currentPage = Application.Current.MainPage;
        if (currentPage is NavigationPage navigationPage)
        {
            return navigationPage.CurrentPage;
        }
        return currentPage;
    }

    public async Task ShowToast(string message)
    {
        var toast = new ToastView(message);
        var page = GetCurrentPage();
        var absoluteLayout = new AbsoluteLayout();

        AbsoluteLayout.SetLayoutFlags(toast, AbsoluteLayoutFlags.PositionProportional);
        AbsoluteLayout.SetLayoutBounds(toast, new Rectangle(0.5, 0.9, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

        absoluteLayout.Children.Add(toast);
        page.Content = absoluteLayout;

        await Task.Delay(2000); // Show the toast for 2 seconds
        absoluteLayout.Children.Remove(toast);
    }
}

Step 3: Register the Toast Service

Depenging on how you manage your dependency injections you can register the ToastService in your container like bellow. You could use a Singleton instance as well.

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        DependencyService.Register<IToastService, ToastService>();
        MainPage = new MainPage();
    }
}

Step 4: Use the Toast Service

Now you can use the IToastService to display toast messages in your application.

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private async void OnShowToastClicked(object sender, EventArgs e)
    {
        var toastService = DependencyService.Get<IToastService>();
        await toastService.ShowToast("This is a toast message!");
    }
}

Step 5: Optional Customization, adding animations

You can further customize the ToastView to include animations, different styles, or varying display durations.

5.1 Add Animations

Modify the ToastService to include fade-in and fade-out animations.

public async Task ShowToast(string message)
{
    var toast = new ToastView(message);
    var page = GetCurrentPage();
    var absoluteLayout = new AbsoluteLayout();

    AbsoluteLayout.SetLayoutFlags(toast, AbsoluteLayoutFlags.PositionProportional);
    AbsoluteLayout.SetLayoutBounds(toast, new Rectangle(0.5, 0.9, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

    absoluteLayout.Children.Add(toast);
    page.Content = absoluteLayout;

    await toast.FadeTo(1, 250); // Fade in
    await Task.Delay(2000); // Show the toast for 2 seconds
    await toast.FadeTo(0, 250); // Fade out

    absoluteLayout.Children.Remove(toast);
}

Conclusion

By following these steps, you can create a custom toast component in Xamarin Forms that provides a brief, non-intrusive message to users. This basic implementation can be extended and customized to fit the needs of your application.

Example of Toast component you can do

Existing librairies with Toast component

Several third-party libraries and components provide "toast" capabilities in Xamarin.Forms. These libraries offer pre-built components that simplify the process of displaying toast messages in your application. Here are some popular options:

1. Rg.Plugins.Popup

   • A popular plugin for creating popups in Xamarin.Forms, which can be used to display custom toast messages.
   • GitHub Repository

2. Xamarin.CommunityToolkit

   • This toolkit provides a variety of components and utilities for Xamarin.Forms, including a Toast component.
   • Documentation

3. ToastMessage.Forms.Plugin

   • A simple and easy-to-use plugin specifically designed for displaying toast messages in Xamarin.Forms.
   • NuGet Package

4. Acr.UserDialogs

   • A library that provides various dialogs and notifications, including toast notifications.
   • GitHub Repository

5. Plugin.Toast

   • A cross-platform toast plugin for Xamarin.Forms that provides native-like toast notifications.
   • NuGet Package

6. Xamarin.Forms.Toast

   • A lightweight library for displaying toast messages in Xamarin.Forms applications.
   • GitHub Repository

7. Lottie.Forms

• While primarily used for animations, Lottie can be combined with other components to create visually appealing toast messages.
• GitHub Repository

These components can be integrated into your Xamarin.Forms application to provide toast notifications with minimal effort. Each library has its own set of features and customization options, so you can choose the one that best fits your needs.

If you know other good components, don't hesitate to let us a comment! 

https://stackoverflow.com/questions/35279403/toast-equivalent-for-xamarin-for,  @djooleean, https://julien.goenaga.fr