[Proposal] Snackbar

Snackbar

• Proposed
• Prototype
• Implementation
  • iOS Support
  • Android Support
  • macOS Support
  • Windows Support
• Unit Tests
• Sample
• Documentation: Not Started

Summary

Adds a snackbar. It has to use Native Android Snackbar (Google.Android.Material.Snackbar) internally. All other platforms implement a default popup container with text and a button.

Detailed Design

Snackbar.shared.cs

namespace CommunityToolkit.Maui.Controls.Snackbar;

public class Snackbar : ISnackbar
{
	Action Action { get; set; }
	string ActionButtonText { get; set; }
	IView? Anchor { get; set; }
	TimeSpan Duration { get; set; }
	bool IsShown { get; }
	string Text { get; set; }
	SnackbarOptions VisualOptions { get; set; }

	event EventHandler? Dismissed;
	event EventHandler<ShownEventArgs>? Shown;

	Task Dismiss();
	Task Show();

    public static ISnackBar Make();
}

public interface Snackbar
{
	Action Action { get; }
	string ActionButtonText { get; }
	IView? Anchor { get;  }
	TimeSpan Duration { get; }
	bool IsShown { get; }
	string Text { get; }
	SnackbarOptions VisualOptions { get; }

	event EventHandler? Dismissed;
	event EventHandler<ShownEventArgs>? Shown;

	Task Dismiss();
	Task Show();
}

public class ShownEventArgs : EventArgs
{
	public ShownEventArgs(bool isShown)
	{
		IsShown = isShown;
	}

	public bool IsShown { get; }
}

public class SnackbarOptions : ITextStyle
{
	public double CharacterSpacing { get; set; } = 0.0d;

	public Font Font { get; set; } = Font.SystemFontOfSize(14);

	public Color TextColor { get; set; } = Colors.Black;

	public Color ActionTextColor { get; set; } = Colors.Black;

	public Color BackgroundColor { get; set; } = Colors.LightGray;

	public CornerRadius CornerRadius { get; set; } = new CornerRadius(4, 4, 4, 4);
}

Visual with default settings

Android:

[brminnick]

I agree with @VladislavAntonyuk.

Google.Android.Material.Snackbar is a well-known UI control for Android developers and CommunityToolkit.Maui.UI.Views.Snackbar invokes the expectations that our implementation uses the native Android control.

I also recommend mimicking Google.Android.Material.Snackbar’s API surface + implementation for the CommunityToolkit.Maui’s Snackbar so that developers who are already familiar with Google.Android.Material.Snackbar can use their existing knowledge.

Leave a 👍 or 👎 on this comment if you agree/disagree.

I’m happy to update the Detailed Design section above to reflect this if we get more 👍 than 👎.

[pictos]

You can implement the set in the concrete type, but the interface should be read-only… For example: the ITextInput has the MaxLenght property read-only.

https://github.com/dotnet/maui/blob/main/src/Core/src/Core/ITextInput.cs#L31

The class that implements that interface also implements the set.

https://github.com/dotnet/maui/blob/main/src/Controls/src/Core/InputView.cs#L31

But the Text property in that interface has the set defined, that happens because you can change the Text value from the native platform (When user types). If I’m not wrong nothing on the native side can change snackbar values.