Snackbar and BottomSheet in xamarin form

Snackbar and bottomsheet in xamarin form

Please, support my blog by clicking on our sponsors ad!

 Today we are going to learn about snackbar and bottomsheet.

Code is explain in this video

First install Snackbar and bottomsheet nugget in all the project of the solution.

Snackbar nugget : Xamarin.CommunityToolkit

bottomsheet nugget: Plugin.BottomSheet

Below code is for snackbar:

For snackbar write below code any event for eg: (on button click, listview itemselected, etc)

                var actions = new SnackBarActionOptions
                {
                    Action = () => DisplayAlert("Snackbar Ex!", "Yes button clicked", "OK"),
                    Text = "Yes"
                };

                var options = new SnackBarOptions
                {
                    MessageOptions = new MessageOptions
                    {
                        Foreground = Color.White,
                        Message = "Click yes button."
                    },
                    BackgroundColor = Color.FromHex("#2196F3"),
                    Duration = TimeSpan.FromSeconds(5),
                    Actions = new[] { actions }
                };

                await this.DisplaySnackBarAsync(options);

BottomSheet

Below code is for bottomsheet

Ass namespace: 

xmlns:bs="clr-namespace:Plugin.BottomSheet;assembly=Plugin.BottomSheet"

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:views="clr-namespace:ListviewUIDesigns.Views.Template"
             x:Class="ListviewUIDesigns.Views.ListViewDesign4"
             BackgroundColor="LightGray"
             Title="ListView Design 4"
             xmlns:bs="clr-namespace:Plugin.BottomSheet;assembly=Plugin.BottomSheet">
    <ContentPage.Content>
        <bs:BottomSheetLayout>
            <StackLayout Padding="10">
               <-- CODE OF YOUR MAIN PAGE --!>
            </StackLayout>
            <bs:BottomSheetLayout.BottomSheetContent>
                <StackLayout BackgroundColor="WhiteSmoke">
                    <Label Text="Bottom sheets are used commonly nowadays to give user a sub view with-in a main view 
                           with animation and sliding options. These are famous styles used by Google, 
                           Facebook, Whatsapp and many other applications.Let's get started to create bottom 
                           sheets in Xamarin forms. Nothing fancy sit tight and get to know the technique 
                           behind this concept." TextColor="Black"/>
                </StackLayout>
            </bs:BottomSheetLayout.BottomSheetContent>
        </bs:BottomSheetLayout>

    </ContentPage.Content>
</ContentPage>

Code is explain in this video

Please share you feedback in comment section.