Floating action button at the bottom of the xaml page

KavyaSKavyaS USMember ✭✭

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

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
    edited 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.

  • NMackayNMackay GBInsider, University mod

    @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.

  • ArunHArunH USMember ✭✭

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

  • ArunHArunH USMember ✭✭

    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.

  • NMackayNMackay GBInsider, University mod

    @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.

  • RohanSatputeRohanSatpute USMember ✭✭

    @NMackay

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

  • NMackayNMackay GBInsider, University mod

    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.

  • RohanSatputeRohanSatpute USMember ✭✭

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

  • NMackayNMackay GBInsider, University mod

    @RohanSatpute

    Awesome, glad you found it useful :smile:

  • rodwinlisingrodwinlising USMember
    edited July 2017

    @NMackay Man youuu areee awesomeeee! Thanks for the sample

  • GSalunkheGSalunkhe INMember ✭✭

    @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.

  • NMackayNMackay GBInsider, University mod

    @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.

  • Esaavedra89Esaavedra89 USMember ✭✭

    @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_1227JamesC_1227 Member ✭✭

    @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)

  • NMackayNMackay GBInsider, University mod

    @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.

  • eddycneddycn Member ✭✭

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

  • CharwakaCharwaka INMember ✭✭✭✭

    @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 !!!

Sign In or Register to comment.