Toast

Toast Control

Namespace: DIPS.Xamarin.UI.Controls.Toast

A Toast view appears over the active page. Commonly used to give feedback to users of certain activities. The user can also interact with the Toast.

Only one Toast will be displayed at a given time in the active page. If a toast is set to display while there is a previous toast on screen, the previous toast will be closed immediately allowing way to display the new toast.

Source Code can be found here

Samples can be found here

👉 To get started, make sure you have followed the getting started steps

Example usage

Import the Toast control with the following using statement,

using DIPS.Xamarin.UI.Controls.Toast;

Initialize the Toast

First, the Toast control should be Initialized. It is ideal to do it in the App.xaml.cs file.

public App()
{
    InitializeComponent();
    // some code
    Toast.Current.Initialize();
    // some code
}

Display the Toast

The DisplayToast method displays the Toast in the currently Active page. This method has two overloads.

Both methods intake a string, which will be the displayed Text. ToastOptions is used to set the basic options for the Toast and ToastLayout is used to define the layout of the Toast.

The first overload is,

var options = new ToastOptions();
var layout = new ToastLayout();

Toast.Current.DisplayToastAsync("Hello World!", options, layout);

in here, options and layout are optional parameters. So the toast can also be displayed via,

Toast.Current.DisplayToastAsync("Hello World!");

This will display the Toast with the given text in default settings.

You can also display the toast using another overloaded method,

Toast.Current.DisplayToastAsync("Hello World!", options => { }, layout => { });

This is a complete example of displaying the Toast,

var options = new ToastOptions {
    ToastAction = async () =>
    {
        // something
        await Toast.Current.CloseToastAsync();
    },
    DisplayAnimation = toastView =>
    {
        toastView.TranslationY -= 50;
        return toastView.TranslateTo(0, toastView.TranslationY + 50, 500, Easing.Linear);
    },
    CloseAnimation = toastView => toastView.TranslateTo(0, -(toastView.TranslationY + 50), 500, Easing.Linear),
    HideToastIn = 5000
};

var layout = new ToastLayout {
    BackgroundColor = Color.DodgerBlue,
    CornerRadius = 10,
    FontFamily = "Arial",
    FontSize = 12,
    HasShadow = true,
    HorizontalMargin = 25,
    LineBreakMode = LineBreakMode.TailTruncation,
    MaxLines = 2,
    Padding = new Thickness(20, 10),
    TextColor = Color.White,
    YPosition = 20
};

Toast.Current.DisplayToastAsync("Hello World!", options, layout);

Close the Toast

The following method simply closes the toast on screen.

Toast.Current.CloseToastAsync();

Look and feel

On iOS

On Android

Toast Properties

Property	Explanation	Remarks	Default value
Current	A static property holding an active Toast instance	This is a static property	new Toast()

ToastOptions Properties

Property	Explanation	Remarks	Default value
ToastAction	Performs action on tapping the toast	Will override closing the toast on tapping	Closing the toast action
DisplayAnimation	Animation on displaying the Toast	Value in milliseconds	Fading-In in 250 ms
CloseAnimation	Animation on closing the Toast	Value in milliseconds	Fading-Out in 250 ms
HideToastIn	Hide the toast automatically after the given milliseconds	If value is 0, toast won't be hidden automatically	3000

ToastLayout Properties

Property	Explanation	Remarks	Default value
BackgroundColor	Gets or sets the color which will fill the background of the Toast		Color.Black
CornerRadius	Gets or sets the corner radius of the Toast		8
FontFamily	Gets or sets the font family to which the font for the Toast belongs		Null
FontSize	Gets or sets the size of the font for the Toast		11
LineBreakMode	Gets or sets the LineBreakMode for the Toast		LineBreakMode.TailTruncation
HasShadow	Gets or sets a flag indicating if the Toast has a shadow displayed		False
HorizontalMargin	The left and right margins of the Toast control in device pixels		10
MaxLines	Maximum lines for the Toast view text		1
Padding	Margin between text and Toast view border		8
TextColor	Gets or sets the Color for the text of this Toast		Color.White
YPosition	The vertical positioning of the toast from the Navigation Bar in device pixels	Value in device pixels	10