title: How to make a FloatingActionButton work on top of a ListView and position it correctly
body: <p>I am trying to get a <code>SuaveControls.FloatingActionButton</code> to work on top of a ListView following the example on this page - <a href="https://devlinduldulao.pro/how-to-create-a-floating-action-button/" rel="nofollow noreferrer">https://devlinduldulao.pro/how-to-create-a-floating-action-button/</a></p>
  
  <p>My <code>ListView</code> is inside a <code>StackLayout</code> so I decided to wrap them into an <code>AbsoluteLayout</code></p>
  
  <p>Here is the View/XAML</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;
  &lt;ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
               xmlns:local="clr-namespace:DPM.XForms"
               x:Class="DPM.XForms.ProjectListPage" 
               Title="Drive Plus Mobile"
               &gt;
      &lt;AbsoluteLayout&gt;
          &lt;StackLayout Orientation="Vertical" Spacing="1"&gt;
  
              &lt;Label Text="TopBar             ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/&gt;
              &lt;!-- Project Search/Filter toolbar--&gt;
              &lt;StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White"&gt;
                  &lt;Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/&gt;
                  &lt;StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0"&gt;
                      &lt;Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"&gt;&lt;/Button&gt;
                      &lt;Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"&gt;&lt;/Button&gt;
                      &lt;Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"&gt;&lt;/Button&gt;
                      &lt;Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"&gt;&lt;/Button&gt;
                  &lt;/StackLayout&gt;
              &lt;/StackLayout&gt;
              &lt;Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" /&gt;
  
  
  
              &lt;ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray"&gt;
                  &lt;ListView.ItemTemplate&gt;
                      &lt;DataTemplate&gt;
                          &lt;ViewCell&gt;
                              &lt;!-- Project Row --&gt;
                              &lt;StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" &gt;
                                  &lt;Button 
                                  Image="Colombia.png" 
                                  BackgroundColor="White" 
                                  HorizontalOptions="Center"
                                  VerticalOptions="Center"
                                  WidthRequest="54"
                                  HeightRequest="54"
                                  &gt;
                                  &lt;/Button&gt;
                                  &lt;StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand"&gt;
                                      &lt;Label 
                                      Text="{Binding Name}" 
                                      TextColor="Black"
                                      Font="Bold,17"
                                      HorizontalOptions="StartAndExpand"
                                      VerticalOptions="Start" 
                                  /&gt;
                                      &lt;Label 
                                     Text="{Binding Brand}" 
                                     TextColor="Black"
                                     HorizontalOptions="Start"
                                     VerticalOptions="Start" 
                                  /&gt;
                                      &lt;Label 
                                     Text=".." 
                                     TextColor="Black"
                                     HorizontalOptions="Start"
                                     VerticalOptions="End" 
                                  /&gt;
                                  &lt;/StackLayout&gt;
                                  &lt;Button Text="3"  WidthRequest="44"&gt;&lt;/Button&gt;
                                  &lt;Button Text="&gt;"  WidthRequest="44" BackgroundColor="White" &gt;&lt;/Button&gt;
  
                              &lt;/StackLayout&gt;
                          &lt;/ViewCell&gt;
                      &lt;/DataTemplate&gt;
                  &lt;/ListView.ItemTemplate&gt;
              &lt;/ListView&gt;
          &lt;/StackLayout&gt;
          &lt;views:FloatingActionButton 
              Image="CreateProject.png" 
  
              WidthRequest="80" 
              HeightRequest="80" 
              HorizontalOptions="CenterAndExpand" 
              VerticalOptions="CenterAndExpand"
              Clicked="FloatingActionButton_Clicked"
              &gt;
  
          &lt;/views:FloatingActionButton&gt;
      &lt;/AbsoluteLayout&gt;
  
  &lt;/ContentPage&gt;
  </code></pre>
  
  <p>But with this approach two things are happening</p>
  
  <ol>
  <li>When the device is in Landscape mode the <code>ListView</code> is not growing as it did before adding the <code>AbsoluteLayout</code></li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/UEAV2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UEAV2.jpg" alt="Horizontal Layout Fails"></a></p>
  
  <ol start="2">
  <li>Dont know how to position the <code>FloatingActionButton</code> to always stay on the lower right corner of any device</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/b9dwK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b9dwK.jpg" alt="FAB position"></a></p>
  
  <p>I have also tried placing the <code>FloatingActionButton</code> inside the current StackLayout but it does not float is just added below or above the listview as a regular "row" like is shown here</p>
  
  <p><a href="https://i.stack.imgur.com/wvgYa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wvgYa.png" alt="enter image description here"></a></p>
  
  <p>Feel free to use the comments if something is not clear.</p>