Xamarin.Forms Display Toast Message

While developing a mobile application, do you sometimes need to send feedback to the user after his actions? Even without disturbing the functioning of the application. It is possible to do this with Toast messages. However, you do not directly use Toast messages in Xamarin.Forms.

In this article, I will show you how to show Toast messages like native in Xamarin.Forms applications. We will first create a platform specific Dependency Service on the .Android side and then use it in Xamarin.Forms.

So let’s start with the definition of Toast messages. And follow the steps below in order.

What is Toast Messages?

Toast message provides the user with a feedback on the process being applied. The displayed message remains on the screen for a short time and disappears by itself. By default, it appears horizontally centered at the bottom of the screen. There are two types defined as long and short.

It is possible to use toast messages directly in native applications. However, we have no such option on cross platforms. Fortunately, it is possible to access local features by defining Depencency Services in Xamarin.Forms.

Follow the steps below in order.

1) Add IToast Interface

Firstly I need to an interface that has methods showing short and long messages. Because I will implement DependencyServices that I will define on local platforms from this interface.

For this, follow the path right click project > add > new item > interface. And add an interface called IToast.

public interface IToast
{
    void ShortToast(string message);
    void LongToast(string message);
}

Here I have defined two methods that take a string type message as parameter. I will override these methods in the Dependency class that I will create on the native side.

2) Create a Dependecy Service

Now create a class called ToastMessage.cs that inherits the IToast interface on the .Android side. And implement the interface members. Then implement the methods of the IToast interface as follows. Actually, I have defined native’s features for my own methods.

public class ToastMessage : IToast
{
    public void ShortToast(string message)
    {
        Toast.MakeText(Android.App.Application.Context, message, ToastLength.Short).Show();
    }
    public void LongToast(string message)
    {
        Toast.MakeText(Android.App.Application.Context, message, ToastLength.Long).Show();
    }
}

MakeText() method takes three parameters: the Context parameter, the text to be displayed, and the display time of the text. You can set the duration to Long and Short.

You can view the message notification with the Show() method.

Also don’t forget to declare that this class is a Dependecy. This is required to use this class in Xamarin.Forms.

[assembly: Dependency(typeof(ToastMessage))]

3) Add Toast.xaml Content Page

Now I can show that the Dependency class is ready. I’ll first create a view with XAML and then use the methods that print Toast messages on the back of this view.

Create a Content Page named Toast.xaml in the Xamarin.Forms side and add two buttons to show short and long messages. For this, follow the path right click project > add > new item > Content Page.

Add below code in your page.

<ContentPage.Content>
    <StackLayout  HorizontalOptions="Center" VerticalOptions="Center">
        <Button Text="Short Toast" Clicked="Button_Clicked"/>
        <Button Text="Long  Toast" Clicked="Button_Clicked_1"/>
    </StackLayout>
</ContentPage.Content>

4) Consume Dependency in Toast.xaml.cs Class

Type the Click events of the buttons you define on the XAML page in the Toast.xaml.cs class. Get the methods of the class you wrote as Dependecy with the Get<> method.

Add the following codes into the class.

private void Button_Clicked(object sender, EventArgs e)
{
    DependencyService.Get<IToast>().ShortToast("Lorem ipsum dolor sit amet");
}

private void Button_Clicked_1(object sender, EventArgs e)
{
    DependencyService.Get<IToast>().LongToast("Lorem ipsum dolor sit amet");
}

4) Set the MainPage in App.xaml.cs

To start the application from the Toast.xaml page, define this page as MainPage in the App.xaml.cs class.

public App()
{
    InitializeComponent();
    MainPage = new Toast();
}

Everything is ok. Now run the application and check it. We expect toast messages to be displayed on the screen for a long and short period of time.

Conclusion

Toast messages are very important both when testing the application and in terms of user experience. It is possible to show these messages directly in native applications, but it is necessary to use DependecyServices in Xamarin.Forms applications.

In this article, I showed you how to use Toast messages in Xamarin.Forms applications. I hope it was useful.

If you’re still not sure what to do, or if you got any errors, then I suggest you use the comment section below and let me know! I am here to help!

Also, share this blog post on social media and help more people learn.