Implement floating action button bottom_right of listview - Xamarin.forms

Viewed 1694

I have a listview that binds an image & text. I have been trying to add a floating button bottom-right of this page but to no avail. Done some research but there seems to still be no clear solution for this. Anyone who knows how i can implement this? In my xaml code , I have shown what I have tried.

My xaml

 <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="LoyaltyWorx.Page1"
                 Title="Stores">
        <ContentPage.ToolbarItems>

            <ToolbarItem Text="About" 
                         Icon="ic_action_more_vert.png"
                         Priority="0"
                         Order="Secondary"
                         Clicked="ToolbarItem_Clicked"/>

            <ToolbarItem Text="Settings"
                         Icon="ic_action_more_vert.png"
                         Priority="0"
                         Order="Secondary"/>

        </ContentPage.ToolbarItems>


        <ListView x:Name="MainListView" HasUnevenRows="True" ItemTapped="MainListView_ItemTapped" SeparatorColor="DarkGray">
            <ListView.ItemTemplate>
                <DataTemplate>

                    <ImageCell ImageSource="{Binding Image}" Text="{Binding Name}" TextColor="Black" />


                </DataTemplate>

            </ListView.ItemTemplate>
        </ListView>

***//here is what I attempted but the image just covers the whole page***
        <Image Source="add.png"
                  VerticalOptions="FillAndExpand"
                  HorizontalOptions="FillAndExpand"
               HeightRequest="0"
               WidthRequest="0"
                  AbsoluteLayout.LayoutBounds="1,.99, 65, 65"
                  AbsoluteLayout.LayoutFlags="PositionProportional" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                  Command="{Binding clickNewCard}"
                  CommandParameter="3" />
            </Image.GestureRecognizers>
        </Image>

    </ContentPage>
1 Answers
Related