How to display a snackbar or toast at top of the screen in xamarin forms

Question

I implemented snackbar in xamarin project. But I need to displaty that snackbar at top of the screen.

Code:

SnackBarOptions options = new SnackBarOptions
{
    MessageOptions = new MessageOptions
    {
        Foreground = Color.Black,
        Message = toastMsg,
        Padding= 15
        
    },
    BackgroundColor = Color.White,
    Duration = TimeSpan.FromSeconds(8),
    CornerRadius = 15,
    IsRtl = true,
    
    
};
Application.Current.MainPage.DisplaySnackBarAsync(options);

Himanshu Dwivedi · Accepted Answer · 2021-08-17T05:10:50.437

0

You need to write custom platform specific code to achieve this:

Android:


    GradientDrawable shape = new GradientDrawable();
    shape.SetCornerRadius(15); //For Corner radius
    shape.SetColor(Android.Graphics.Color.Black);
    var contentView = Xamarin.Essentials.Platform.CurrentActivity?.FindViewById(Android.Resource.Id.Content);
    Snackbar snackBar = Snackbar.Make(contentView, "Your Message", 5000);
    Android.Views.View view = snackBar.View;
    view.SetBackground(shape);
    FrameLayout.LayoutParams frameLayout = (FrameLayout.LayoutParams)view.LayoutParameters;
    frameLayout.Gravity = GravityFlags.Top;
    view.LayoutParameters = frameLayout;
    snackBar.Show();

edited Aug 17 '21 at 05:10

answered Aug 13 '21 at 08:21

Himanshu Dwivedi

7,934
3
31
52

I need to display both in iOS and in Android @Himanshu Dwivedi Any article is there to implement custom toast message – Priyanka Aug 13 '21 at 08:28
@Priyanka You can use the Xamarin.Essential toolkit code containing the snackbar implementation of iOS platform and set the Constraint to Top (NSLayoutConstraint) – Himanshu Dwivedi Aug 13 '21 at 08:40
Toast implementation article: https://www.c-sharpcorner.com/article/xamarin/ Please do vote if this works for you – Himanshu Dwivedi Aug 13 '21 at 08:42
snackbar showing full screen width. frameLayout.SetMargins(20, 30, 20, 20); not working properly. – Priyanka Aug 16 '21 at 12:34
And I'm not able to provide corner radius also @Hinamshu Dwivedi – Priyanka Aug 16 '21 at 12:41
@Priyanka I have updated the answer, if you need a corner radius then you will have to set the background color of the snackbar explicitly. – Himanshu Dwivedi Aug 17 '21 at 05:12
I need to add patting to an alert in xamarin.iOS Using this code. view.Text.PadLeft(20); This code is not working.Help me in this. – Priyanka Aug 17 '21 at 10:22

Jessie Zhang -MSFT · Answer 2 · 2021-08-16T07:43:35.267

Yes, you can use Xamarin.Forms DependencyService to achieve this .

Please refer to the following code:

1.create interface IToast in forms:

public interface IToast
{
    void Show(string message);
}

2.In android, create class Toast_Android to inplement interface IToast and set gravity to GravityFlags.Top:

[assembly: Xamarin.Forms.Dependency(typeof(Toast_Android))]
namespace ToastApp.Droid
{
    public class Toast_Android : IToast
    {
        public void Show(string message)
        {
            Toast toast = Toast.MakeText(Android.App.Application.Context, message, ToastLength.Long);
            View view = toast.View;
            view.SetBackgroundColor(Color.Yellow);
            TextView text = (TextView)view.FindViewById(Android.Resource.Id.Message);
            text.SetTextColor(Color.Red);
            toast.SetGravity(GravityFlags.Top, 0, 0);
            toast.Show();
        }
    }
}

Note:

3.In ios, create class Toast_IOS to inplement interface IToast and set the postion of the view:

[assembly: Xamarin.Forms.Dependency(typeof(Toast_IOS))]
namespace ToastApp.iOS
{
    public class Toast_IOS : IToast
    {
        const double LONG_DELAY = 3.5;
        NSTimer alertDelay;
        UIViewController alert;

        const float DialogWith = 160;

        public void Show(string message)
        {
            ShowAlert(message, LONG_DELAY);
        }

        void ShowAlert(string message, double seconds)
        {
            alertDelay = NSTimer.CreateScheduledTimer(seconds, (obj) =>
            {
                dismissMessage();
            });
            alert = new UIViewController();

            UILabel view = new UILabel();
            int  DeviceWidth = (int)UIScreen.MainScreen.Bounds.Width;

            float position = (DeviceWidth - DialogWith) / 2;

            view.Frame = new CoreGraphics.CGRect(position, 0, DialogWith, 100);
            view.Text = message;

           // you can customize  the style as you want
            view.TextColor = UIColor.Red;
            view.BackgroundColor = UIColor.Yellow;

            alert.View.Add(view);
                UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(alert, true, null);
        }
        void dismissMessage()
        {
            if (alert != null)
            {
                alert.DismissViewController(true,null);
            }
            if (alertDelay != null)
            {
                alertDelay.Dispose();
            }
        }
    }
}

Zhang How to set background color and text color by using these custom classes — Priyanka, Aug 16 '21 at 07:03
In ios , you can change the background color and text color as you want, for example: `view.TextColor = UIColor.Red; view.BackgroundColor = UIColor.Yellow;` — Jessie Zhang -MSFT, Aug 16 '21 at 07:31
Zhang I need to change in Android toast message txt color and need to provide corner radius also. — Priyanka, Aug 16 '21 at 07:34
Zhang How to provide padding inside the toast and corner radius to the toast — Priyanka, Aug 16 '21 at 08:39

How to display a snackbar or toast at top of the screen in xamarin forms

2 Answers2