Creating A Snack Bar In Xamarin Forms XAML

Hello friends, notifying users about what happens in your mobile application is necessary. There is the Snack Bar which is good for this scenario. But in Xamarin.Forms by default, you don’t have the ability to call snack bar. Though by default you can’t do this, it is possible to make a Snack Bar in Xamarin Forms XAML exclusively. Without any platform specific code. This post is all about implementing this. Let’s dive in.

Let’s Build the Snack Bar in Xamarin Forms

The implementation of this control is very simple. With a Templated view, we will create a simple control, design the snack bar’s UI with XAML and add appropriate Bindable properties.

The Snack Bar’s Look With XAML

When you look at a snack bar, it is pretty simple. A text field and a button. The button has only simple functions like close, cancel… So with the Templated View, adding these controls and the appropriate bindable properties to have the behavior of Android’s original snack bar will do it.

Now, for the snack bar in Xamarin.Forms to behave as a snack bar, and be a reusable control, we need to add properties which are bindable. These properties include the The message, text color, background color, font size, button text color and so on. Here are some properties I added, you could add more if you wish.

Opening and Closing the Snack Bar With Animations

A snack bar is supposed to appear at the bottom of the app’s user interface. It should appear with an animation moving it from the bottom to a position where it will be visible to the user. We will do this with a Bindable property called IsOpen. This property will cause an animation when changed, and cause the snack bar to show or hide its self. Here is the code to accomplish this.

To animate the opening and closing of our snack bar control, we use Xamarin Forms animations. Specifically, the Translate animation to move the control upward and downward when needed. And at a particular speed. Here is how we do it.

Using the Xamarin Forms Snack Bar

To use this control as a typical snack bar, it is important to note that its placement and the container in which it is used will affect its look and feel. In this example, we will place it in a Grid, at the bottom. That is, setting its VerticalOptions property to End. But if it was placed in a StackLayout for example, it would behave differently. So here is it.

Conclusion

With this, we have built a Snack Bar in Xamarin Forms. This control is not a native implementation and sure is an easier implementation. If need be, you could add additional properties. Or even more buttons, all that in XAML without any platform specific code. Here is the source code for the simple app built in this post.

If you liked this post, or it was useful to you, please 👍 like it, share it on twitter, facebook or other social media… in case you want to get updated on any new useful post, follow me on twitter, Github and like my page on facebook. And every other social media by clicking on the buttons at the end of this post.Follow me on social media and stay updated