Skip to content
Rizan Zaky edited this page Jul 30, 2020 · 27 revisions

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 = toast =>
    {
        toast.TranslationY -= 50;
        return toast.TranslateTo(0, toast.TranslationY + 50, 500, Easing.Linear);
    },
    CloseAnimation = toast => toast.TranslateTo(0, -(toast.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),
    PositionY = 20,
    TextColor = Color.White
};

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
PositionY The vertical positioning of the toast from the Navigation Bar in device pixels Value in device pixels 10
TextColor Gets or sets the Color for the text of this Toast Color.White
Clone this wiki locally