Please can you help me find a solution to add an image on the Snacbar !!!

Question

Please can you help me find a solution to add an image on the Snacbar !!!

Hakob Hovhannisyan 21

Sander van de Velde | MVP 36,336 Reputation points MVP Moderator

2023-03-09T17:13:11.0633333+00:00

Hello @Hakob Hovhannisyan,

can you add more details to your question?

What do you want to achieve, what is the expected behavior, what have you done already, what is failing?
Hakob Hovhannisyan 21 Reputation points

2023-03-11T09:29:28.1733333+00:00

Hello @Sander van de Velde | MVP

Thank you for your response․

I would like to use snackbar control with the possibility of adding an image with text, which is shown in the attached image.

My solution is to use Mopups to add an Image, Label.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2023-03-13T07:45:36.6166667+00:00

Whether SnackBar can display images depends on the platform. Could you provide detailed information about the platform on which your program runs?

Your prompt reply will be highly appreciated.
Hakob Hovhannisyan 21 Reputation points

2023-03-13T11:30:38.9366667+00:00

Hello @Sander van de Velde | MVP

I run my app on Android. Please can you send me a document where I can read about image for SnackBar
Sander van de Velde | MVP 36,336 Reputation points MVP Moderator

2023-03-13T15:12:16.6+00:00

Hello @Hakob Hovhannisyan,

in the role of moderator for this community forum, I asked for some background information so other community members can answer this question better.

Hakob Hovhannisyan 21

I am using this code and want to add an image. I hope this is clear information from my sides.

var snackbarOptions = new SnackbarOptions
{
    BackgroundColor = Colors.Red,
    TextColor = Colors.Green,
    ActionButtonTextColor = Colors.Yellow,
    CornerRadius = new CornerRadius(10),
    Font = Font.SystemFontOfSize(14),
    ActionButtonFont = Font.SystemFontOfSize(14),
    CharacterSpacing = 0.5
};

string text = "This is a Snackbar";
string actionButtonText = "Click Here to Dismiss";
Action action = async () => await DisplayAlert("Snackbar ActionButton Tapped", "The user has tapped the Snackbar ActionButton", "OK");
TimeSpan duration = TimeSpan.FromSeconds(3);

var snackbar = Snackbar.Make(text, action, actionButtonText, duration, snackbarOptions);

await snackbar.Show(cancellationTokenSource.Token);

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2023-03-15T07:22:08.22+00:00

By referring to Google's official Material design guidelines, it can be found that adding icons to the SnackBar is not supported: snackbar guidelines.

Don’t use icons in snackbars. If your message needs an icon, consider using a different component.

As a result, there is no API in the community toolkit to add images to the SnackBar.

Your answer

Sander van de Velde | MVP 36,336 Reputation points MVP Moderator

2023-03-09T17:13:11.0633333+00:00

Hello @Hakob Hovhannisyan,

can you add more details to your question?

What do you want to achieve, what is the expected behavior, what have you done already, what is failing?
Hakob Hovhannisyan 21 Reputation points

2023-03-11T09:29:28.1733333+00:00

Hello @Sander van de Velde | MVP

Thank you for your response․

I would like to use snackbar control with the possibility of adding an image with text, which is shown in the attached image.

My solution is to use Mopups to add an Image, Label.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2023-03-13T07:45:36.6166667+00:00

Whether SnackBar can display images depends on the platform. Could you provide detailed information about the platform on which your program runs?

Your prompt reply will be highly appreciated.
Hakob Hovhannisyan 21 Reputation points

2023-03-13T11:30:38.9366667+00:00

Hello @Sander van de Velde | MVP

I run my app on Android. Please can you send me a document where I can read about image for SnackBar
Sander van de Velde | MVP 36,336 Reputation points MVP Moderator

2023-03-13T15:12:16.6+00:00

Hello @Hakob Hovhannisyan,

in the role of moderator for this community forum, I asked for some background information so other community members can answer this question better.
Hakob Hovhannisyan 21 Reputation points

2023-03-13T15:59:50.95+00:00

I am using this code and want to add an image. I hope this is clear information from my sides.

var snackbarOptions = new SnackbarOptions { BackgroundColor = Colors.Red, TextColor = Colors.Green, ActionButtonTextColor = Colors.Yellow, CornerRadius = new CornerRadius(10), Font = Font.SystemFontOfSize(14), ActionButtonFont = Font.SystemFontOfSize(14), CharacterSpacing = 0.5 }; string text = "This is a Snackbar"; string actionButtonText = "Click Here to Dismiss"; Action action = async () => await DisplayAlert("Snackbar ActionButton Tapped", "The user has tapped the Snackbar ActionButton", "OK"); TimeSpan duration = TimeSpan.FromSeconds(3); var snackbar = Snackbar.Make(text, action, actionButtonText, duration, snackbarOptions); await snackbar.Show(cancellationTokenSource.Token);
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2023-03-15T07:22:08.22+00:00

By referring to Google's official Material design guidelines, it can be found that adding icons to the SnackBar is not supported: snackbar guidelines.

Don’t use icons in snackbars. If your message needs an icon, consider using a different component.

As a result, there is no API in the community toolkit to add images to the SnackBar.

Share via

Please can you help me find a solution to add an image on the Snacbar !!!

Your answer