Floating action button at the bottom of the xaml page

KavyaS · April 2017

How to add a Floating Action Button At the Bottom of the page...Please anyone suggest me how to do it?

ClintStLaurent · April 2017

https://blog.xamarin.com/embedding-native-controls-into-xamarin-forms/

AlessandroCaliaro · April 2017

https://github.com/keannan5390/Xamarin.Plugin.FAB

NMackay · April 2017

I cheated and used absolutelayout and an image with a tap gesture, works on Droid, UWP and iOS.

Seems to work quite well.

        <AbsoluteLayout x:Name="AbsoluteLayoutWidgets" Grid.Row="4" Padding="0">
            <dataControls:RadListView x:Name="ListviewShell"
                                      IsItemSwipeEnabled="False"
                                      AbsoluteLayout.LayoutFlags="All"
                                      AbsoluteLayout.LayoutBounds="0,1,1,1"
                                      VerticalOptions="FillAndExpand"
                                      ItemsSource="{Binding Widgets}"
                                      BackgroundColor="{StaticResource listBackgroundLightGray}"
                                      SelectionMode="Single">
            </dataControls:RadListView>
            <customControls:ImageButton x:Name="ImageFabButton" Source="{markupExtensions:PlatformImage SourceImage={x:Static images:ImageResources.FabButtonAdd}}"
                            Command="{Binding AddCommand}"
                            AbsoluteLayout.LayoutFlags="PositionProportional"
                            AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
                            Margin="10">
            </customControls:ImageButton>
            <ActivityIndicator IsRunning="{Binding Busy}"
                               IsVisible="{Binding Busy}"
                               AbsoluteLayout.LayoutFlags="PositionProportional"
                               AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
                               VerticalOptions="CenterAndExpand"
                               HorizontalOptions="CenterAndExpand">
                <ActivityIndicator.WidthRequest>
                    <OnPlatform x:TypeArguments="x:Double" iOS="100" Android="100" WinPhone="400" />
                </ActivityIndicator.WidthRequest>
                <ActivityIndicator.Color>
                    <OnPlatform x:TypeArguments="Color"
                                iOS="#2499CE" WinPhone="#2499CE" />
                </ActivityIndicator.Color>
            </ActivityIndicator>
        </AbsoluteLayout>

I can knock up a sample app if anyone's interested.

ClintStLaurent · April 2017

That's elegantly simple. Just a button laying on top of the view that keeps positioning to the lower corner. How well does this handle being on top of a ScrollView? if you scroll the view does your faux FAB stay in place without gittering?

I had been considering an rg.plugins.popup that just had the FAB on it with Dismiss if clicked off set to false. Then it would be a reusable self contained thing I could define outside of the view and place on each page as needed. yeah, I'll get around to that in my spare time.

NMackay · April 2017

@ClintStLaurent

Seems to work fine.....even in UWP. Certainly it plays fine with RadList. I'll knock together a quick sample app with the vanilla listview just to double check.

NMackay · April 2017

@ClintStLaurent @KavyaS

Hi,

here's the FAB button sample as promised. Probably needs more work but it's certainly less painful than surfacing the Android FAB button and it's cross platform.

ClintStLaurent · April 2017

You're a scholar and a gentleman @NMackay

ArunH · April 2017

Thanks a lot, @NMackay. Your solution has helped me a lot.

ArunH · April 2017

Hi @NMackay , Can you suggest how to call the method using the custom control you have given for FAT. My requirement is after clicking on the FAT button, I should display a View with multiple data to capture.

NMackay · April 2017

@ArunH

The image button has a command property you can just bind against a command in your viewmodel to do the navigation. If you prefer a code-behind approach there's an ItemTapped event you can hook in to.

RohanSatpute · June 2017

@NMackay

How does it fare with the master detail page or any subpage that might need to be rendered on top of the FAB?

NMackay · June 2017

If you check out the markup, it's basically on a page by page basis. The FAB in Android will not overlay every page you push on to the stack either as far as I'm aware. Just add it on a page by page basis.

RohanSatpute · June 2017

@NMackay
This one worked beautifully with the setup I had. No issues! Thanks for the sample.

NMackay · June 2017

@RohanSatpute

Awesome, glad you found it useful

rodwinlising · July 2017

@NMackay Man youuu areee awesomeeee! Thanks for the sample

GSalunkhe · July 2017

@NMackay said:
If you check out the markup, it's basically on a page by page basis. The FAB in Android will not overlay every page you push on to the stack either as far as I'm aware. Just add it on a page by page basis.

@NMackay is there a way we can hide FAB on home page and show it on rest of the pages(All pages), once we navigate. I am using Xamarin Forms.

NMackay · July 2017

@GSalunkhe

No, you'd have to add the FAB button to each page you want to have it, most apps I've seen like WhatsApp only have the fab button the top level page, as it doesn't exist in iOS/UWP there is no hard and fast UX rules on it, it's part of the material design in Android, this approach just saves you a lot of grief in a cross platform app.

Esaavedra89 · July 2018

@NMackay said:
I cheated and used absolutelayout and an image with a tap gesture, works on Droid, UWP and iOS.

Seems to work quite well.

        <AbsoluteLayout x:Name="AbsoluteLayoutWidgets" Grid.Row="4" Padding="0">
            <dataControls:RadListView x:Name="ListviewShell"
                                      IsItemSwipeEnabled="False"
                                      AbsoluteLayout.LayoutFlags="All"
                                      AbsoluteLayout.LayoutBounds="0,1,1,1"
                                      VerticalOptions="FillAndExpand"
                                      ItemsSource="{Binding Widgets}"
                                      BackgroundColor="{StaticResource listBackgroundLightGray}"
                                      SelectionMode="Single">
            </dataControls:RadListView>
            <customControls:ImageButton x:Name="ImageFabButton" Source="{markupExtensions:PlatformImage SourceImage={x:Static images:ImageResources.FabButtonAdd}}"
                            Command="{Binding AddCommand}"
                            AbsoluteLayout.LayoutFlags="PositionProportional"
                            AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
                            Margin="10">
            </customControls:ImageButton>
            <ActivityIndicator IsRunning="{Binding Busy}"
                               IsVisible="{Binding Busy}"
                               AbsoluteLayout.LayoutFlags="PositionProportional"
                               AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
                               VerticalOptions="CenterAndExpand"
                               HorizontalOptions="CenterAndExpand">
                <ActivityIndicator.WidthRequest>
                    <OnPlatform x:TypeArguments="x:Double" iOS="100" Android="100" WinPhone="400" />
                </ActivityIndicator.WidthRequest>
                <ActivityIndicator.Color>
                    <OnPlatform x:TypeArguments="Color"
                                iOS="#2499CE" WinPhone="#2499CE" />
                </ActivityIndicator.Color>
            </ActivityIndicator>
        </AbsoluteLayout>

I can knock up a sample app if anyone's interested.

@NMackay great solution.

JamesC_1227 · August 2018

@NMackay,

Your solution is wonderful. I have so many questions about your code though. Lets start with one question: I don't see a ScrollView anywhere in your code. How do you get the screen to scroll without one?

(I'm starting with one question because this post is so old you might not notice it)

NMackay · August 2018

@JamesC_1227 said:
@NMackay,

Your solution is wonderful. I have so many questions about your code though. Lets start with one question: I don't see a ScrollView anywhere in your code. How do you get the screen to scroll without one?

(I'm starting with one question because this post is so old you might not notice it)

Hi,

Sorry for the delay in replying, I'm on annual leave, I just happened to see this post on my handset.

From memory, the sample uses a listview which has a built in scrollview/scrolling.

eddycn · October 2018

@NMackay
Based on your solution i was able to make a custom expandable float FAB menu.
Thanks!

Charwaka · December 2018

@NMackay said:
I cheated and used absolutelayout and an image with a tap gesture, works on Droid, UWP and iOS.

Seems to work quite well.

        <AbsoluteLayout x:Name="AbsoluteLayoutWidgets" Grid.Row="4" Padding="0">
            <dataControls:RadListView x:Name="ListviewShell"
                                      IsItemSwipeEnabled="False"
                                      AbsoluteLayout.LayoutFlags="All"
                                      AbsoluteLayout.LayoutBounds="0,1,1,1"
                                      VerticalOptions="FillAndExpand"
                                      ItemsSource="{Binding Widgets}"
                                      BackgroundColor="{StaticResource listBackgroundLightGray}"
                                      SelectionMode="Single">
            </dataControls:RadListView>
            <customControls:ImageButton x:Name="ImageFabButton" Source="{markupExtensions:PlatformImage SourceImage={x:Static images:ImageResources.FabButtonAdd}}"
                            Command="{Binding AddCommand}"
                            AbsoluteLayout.LayoutFlags="PositionProportional"
                            AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
                            Margin="10">
            </customControls:ImageButton>
            <ActivityIndicator IsRunning="{Binding Busy}"
                               IsVisible="{Binding Busy}"
                               AbsoluteLayout.LayoutFlags="PositionProportional"
                               AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
                               VerticalOptions="CenterAndExpand"
                               HorizontalOptions="CenterAndExpand">
                <ActivityIndicator.WidthRequest>
                    <OnPlatform x:TypeArguments="x:Double" iOS="100" Android="100" WinPhone="400" />
                </ActivityIndicator.WidthRequest>
                <ActivityIndicator.Color>
                    <OnPlatform x:TypeArguments="Color"
                                iOS="#2499CE" WinPhone="#2499CE" />
                </ActivityIndicator.Color>
            </ActivityIndicator>
        </AbsoluteLayout>

I can knock up a sample app if anyone's interested.

Just Awesome !!!

zwilkin · February 2019

@NMackay said:
I cheated and used absolutelayout and an image with a tap gesture, works on Droid, UWP and iOS.

Seems to work quite well.

        <AbsoluteLayout x:Name="AbsoluteLayoutWidgets" Grid.Row="4" Padding="0">
            <dataControls:RadListView x:Name="ListviewShell"
                                      IsItemSwipeEnabled="False"
                                      AbsoluteLayout.LayoutFlags="All"
                                      AbsoluteLayout.LayoutBounds="0,1,1,1"
                                      VerticalOptions="FillAndExpand"
                                      ItemsSource="{Binding Widgets}"
                                      BackgroundColor="{StaticResource listBackgroundLightGray}"
                                      SelectionMode="Single">
            </dataControls:RadListView>
            <customControls:ImageButton x:Name="ImageFabButton" Source="{markupExtensions:PlatformImage SourceImage={x:Static images:ImageResources.FabButtonAdd}}"
                            Command="{Binding AddCommand}"
                            AbsoluteLayout.LayoutFlags="PositionProportional"
                            AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
                            Margin="10">
            </customControls:ImageButton>
            <ActivityIndicator IsRunning="{Binding Busy}"
                               IsVisible="{Binding Busy}"
                               AbsoluteLayout.LayoutFlags="PositionProportional"
                               AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
                               VerticalOptions="CenterAndExpand"
                               HorizontalOptions="CenterAndExpand">
                <ActivityIndicator.WidthRequest>
                    <OnPlatform x:TypeArguments="x:Double" iOS="100" Android="100" WinPhone="400" />
                </ActivityIndicator.WidthRequest>
                <ActivityIndicator.Color>
                    <OnPlatform x:TypeArguments="Color"
                                iOS="#2499CE" WinPhone="#2499CE" />
                </ActivityIndicator.Color>
            </ActivityIndicator>
        </AbsoluteLayout>

(Link Removed From Quote)

I can knock up a sample app if anyone's interested.

Nearly 2 years later and this is still the most efficient solution. Thanks @NMackay !

NMackay · February 2019

@eddycn said:
@NMackay
Based on your solution i was able to make a custom expandable float FAB menu.
Thanks!

The coolness of Forms,

@zwilkin said:

@NMackay said:
I cheated and used absolutelayout and an image with a tap gesture, works on Droid, UWP and iOS.

Seems to work quite well.

        <AbsoluteLayout x:Name="AbsoluteLayoutWidgets" Grid.Row="4" Padding="0">
            <dataControls:RadListView x:Name="ListviewShell"
                                      IsItemSwipeEnabled="False"
                                      AbsoluteLayout.LayoutFlags="All"
                                      AbsoluteLayout.LayoutBounds="0,1,1,1"
                                      VerticalOptions="FillAndExpand"
                                      ItemsSource="{Binding Widgets}"
                                      BackgroundColor="{StaticResource listBackgroundLightGray}"
                                      SelectionMode="Single">
            </dataControls:RadListView>
            <customControls:ImageButton x:Name="ImageFabButton" Source="{markupExtensions:PlatformImage SourceImage={x:Static images:ImageResources.FabButtonAdd}}"
                            Command="{Binding AddCommand}"
                            AbsoluteLayout.LayoutFlags="PositionProportional"
                            AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
                            Margin="10">
            </customControls:ImageButton>
            <ActivityIndicator IsRunning="{Binding Busy}"
                               IsVisible="{Binding Busy}"
                               AbsoluteLayout.LayoutFlags="PositionProportional"
                               AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
                               VerticalOptions="CenterAndExpand"
                               HorizontalOptions="CenterAndExpand">
                <ActivityIndicator.WidthRequest>
                    <OnPlatform x:TypeArguments="x:Double" iOS="100" Android="100" WinPhone="400" />
                </ActivityIndicator.WidthRequest>
                <ActivityIndicator.Color>
                    <OnPlatform x:TypeArguments="Color"
                                iOS="#2499CE" WinPhone="#2499CE" />
                </ActivityIndicator.Color>
            </ActivityIndicator>
        </AbsoluteLayout>

(Link Removed From Quote)

I can knock up a sample app if anyone's interested.

Nearly 2 years later and this is still the most efficient solution. Thanks @NMackay !

Thanks

bifedefrango · February 2019

jamesmontemagno has done it too, for Android and Xamarin Forms too

https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android

Ganesh.4229 · March 2019

@NMackay
Your solution looks good, Also could you share the Image button code for below control.

  <customControls:ImageButton x:Name="ImageFabButton" Source="{markupExtensions:PlatformImage SourceImage={x:Static images:ImageResources.FabButtonAdd}}"
                        Command="{Binding AddCommand}"
                        AbsoluteLayout.LayoutFlags="PositionProportional"
                        AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
                        Margin="10">
        </customControls:ImageButton>

NMackay · March 2019

@Ganesh.4229 said:
@NMackay
Your solution looks good, Also could you share the Image button code for below control.

The image button is in the zip file in my original post, I also posted it here recently.

https://forums.xamarin.com/discussion/comment/365506#Comment_365506

cemozgura · June 2020

U can use this
https://github.com/cemozguraA/Xamarin.RisePlugin.Floatingactionbutton

Cojex · August 2020

I love this!!

ErnestJ · 6:14AM

Very nice solution @NMackay!

Would be nice to extend this and make it invisible when scrolled up and visible again when scrolled down.

Xamarin

Quick Links

Floating action button at the bottom of the xaml page

Answers