Corrado's Blog 2.0

Online thoughts of a technology funatic

Add a SnackBar to you Xamarin.Android app

Material design introduced a new lightweight way to provide feedback to a user, something that sits between the AlertDialog and Toast alternatiives with a funny name: SnackBar.
A Snackbar appears at the bottom of the view and can optionally display an additional custom button.

Here are the basic steps to show a SnackBar:

-Open Visual Studio and create a new blank Android app

-Using Nuget add the Xamarin.Android.Support.Design library, this will let you target Android releases older than v21

image

  • -Using the code generated by the template, lets make the SnackBar appear when the default button is pressed.

-Add this code inside MainActivity’s OnCreate method

protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); // Set our view from the "main" layout resource SetContentView(Resource.Layout.Main); // Get our button from the layout resource, // and attach an event to it Button button = FindViewById<Button>(Resource.Id.MyButton); button.Click += (s, e) => { //Creates the Snackbar Snackbar snackBar = Snackbar.Make(button, "Text", Snackbar.LengthIndefinite); //Show the snackbar snackBar.Show(); }; } }

  • -Compile the project and wait until build succeeds, be patient if operation takes more than than usual since this delay is due to the fact that the missing packages are downloading and their size is quite huge. If you stop compilation download will fail and you’ll start having a lot of “…invalid zip” error. in this case delete the zip folder mentioned on error message and try again.
  • -You’ll now see this error message:
  • image
  • -Let’s fix it adding the required theme (you can create your own deriving from Theme.AppCompat of course)
    [Activity(Label = "TestSnackBar2", MainLauncher = true, Icon = "@drawable/icon", Theme = "@style/Theme.AppCompat")]

  • -Run the project again and you’ll see this bar appear at the bottom of the view
  • image
  • -Quite sad indeed, luckily the SnackBar can be customized, so let’s add more code:
button.Click += (s, e) => { //Creates the Snackbar and subscribes the button press event Snackbar snackBar = Snackbar.Make(button, "Text", Snackbar.LengthIndefinite).SetAction("Ok", (v) => { Console.WriteLine("Done"); }); //set action button text color snackBar.SetActionTextColor(Android.Graphics.Color.Green); //Set action button text size TextView txtAction = snackBar.View.FindViewById<TextView>(Resource.Id.snackbar_action); txtAction.SetTextSize(Android.Util.ComplexUnitType.Dip, 18); //Set message text size and color TextView txtMessage = snackBar.View.FindViewById<TextView>(Resource.Id.snackbar_text); txtMessage.SetTextColor(Android.Graphics.Color.Red); txtMessage.SetTextSize(Android.Util.ComplexUnitType.Dip, 12); //Show the snackbar snackBar.Show(); };

  • -And there you go, a custom SnackBar Smile
  • image

If you’re wondering why you need to pass a reference to a view (Button in our case) as SnackBar first parameter is because internally it walks up the visual tree so that can properly position itself at bottom position.

 

No Responses to “Add a SnackBar to you Xamarin.Android app”

RSS feed for comments on this post. TrackBack URL

Leave a Response