CODEWITHSUNDEEP
xamlxamarinxamarin.forms
Hashir Malik
Hashir Malik

Reputation: 808

How to make a Floating Action Button in Xamarin Forms

I'm building a Xamarin CrossPlatform App!

I wanted to add a floating action button at the bottom right corner of the app page just like this

https://i.sstatic.net/4PJcv.jpg

Here is my XAML code:

 <?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="Last_MSPL.Views.HomePage">


    <ListView x:Name="Demolist" ItemSelected="OnItemSelected" BackgroundColor="AliceBlue">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.ContextActions>
                        <MenuItem x:Name="OnMore" Clicked="OnMore_Clicked" CommandParameter="{Binding .}"
                                 Text="More" />
                        <MenuItem x:Name="OnDelete" Clicked="OnDelete_Clicked" CommandParameter="{Binding .}"
                                 Text="Delete" IsDestructive="True" />
                    </ViewCell.ContextActions>
                    <StackLayout>

                        <StackLayout Padding="15,0">
                            <Label Text="{Binding employee_name}" FontAttributes="bold" x:Name="en"/>
                            <Label Text="{Binding employee_age}"/>
                        </StackLayout>

                    </StackLayout>

                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>



</ContentPage>

How can I do this using XAML? Help me through this, Thanks!

Upvotes: 27

Views: 35922

Answers (7)

benk
benk

Reputation: 446

When implementing my Floating Action Button, I noticed that none of the answers here cover the shadow below the button. Here's my (hacky) solution to get a shadow below the FAB:

<Grid>
    <Frame
        Margin="3,8,-3,-8"
        CornerRadius="35"
        HasShadow="False"
        HeightRequest="70"
        VerticalOptions="Start"
        WidthRequest="70">
        <Frame.Background>
            <RadialGradientBrush Center="0.5,0.5" Radius="0.5">
                <GradientStop Offset="0" Color="Gray" />
                <GradientStop Offset="0.5" Color="Gray" />
                <GradientStop Offset="1.0" Color="#01000000" />
            </RadialGradientBrush>
        </Frame.Background>
    </Frame>
    <ImageButton
        Padding="20"
        Command="{Binding <YourCommand>}"
        CornerRadius="35"
        HeightRequest="70"
        Source="<YourImage.png>"
        VerticalOptions="Start" />
</Grid>

Notes:

  • The margin on the frame is the offset wrt to the ImageButton, so it appears below and to the right of the ImageButton.
  • The last color of the gradient is black, with a 1 value for alpha. Transparent did not have the desired effect on iOS, 01000000 worked nicely.
  • ImageButton has to be below Frame, because the xaml order determines the draw order.
  • Put this Grid in another Grid, to make it overlap other content.
  • This worked for Android and iOS, not for UWP.
  • I expect this is not a performant solution, because of an additional element to the view, and Xamarin's layout / drawing performance issues. A solution with custom renderers would likely perform better.
  • To make it nicer still, you can use a Visual State Manager. They left a few bugs in its Xamarin implementation though.

Upvotes: 0

Saket Sinha
Saket Sinha

Reputation: 91

It's pretty easy to add a floating button in xamarin forms. Just add a Grid with one row having Height="*" and inside that, add a ScrollView and a Button, both in Grid.Row="0". Inside your ScrollView, put your design form. For button to be round in shape, put some BorderRadius and HeightRequest as well as WidthRequest should be double of that BorderRadius. Also, to show it at bottom right corner, put Margin="0,0,20,22". To show an Icon inside that button, put FontAwesome Icon as ImageSource of the button. FontAwesome Icons can be defined in a separate class (Please let me know if you need details on how to use FontAwesome Icons as well).

That's it, you are done.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <ScrollView Grid.Row="0">
        
        </ScrollView>
        <Button Grid.Row="0" BorderColor="#2b3c3c" BorderWidth="1" FontAttributes="Bold" BackgroundColor="#1968B3" BorderRadius="35" TextColor="White" 
                    HorizontalOptions="End" VerticalOptions="End" WidthRequest="70" HeightRequest="70" Margin="0,0,20,22" Command="{Binding OpenSearchModalPopupCommand}">
            <Button.ImageSource>
                <FontImageSource FontFamily="{StaticResource FontAwesomeSolidFontFamily}"
                                 Glyph="{x:Static fonts:Icons.FAFilter}" 
                                 Size="20"
                                 Color="White"/>
            </Button.ImageSource>
        </Button>
    </Grid>

Upvotes: 7

Daan
Daan

Reputation: 373

**

If you want a solution thats simple and without downloading libraries or anything try this:

**

In your xaml you can use a normal button with rounded corners. Just make sure both width and height are the same. To have it float use a absolute layout and put the button on the bottom. I pasted mine and its style entry from my app.xml resource dictionary.

(Ive used both the james montenago packages and the suave controls. The first doesn't work on iOS and the latter doesn't show images on Android. This solution works on both iOS and Android.)

XAML:

<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<!-- other content goes here -->      
  <Button x:Name="yourname" Image="baseline_menu_white_24"
                Clicked="OnFabMenuClick" IsVisible="True"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                AbsoluteLayout.LayoutBounds="1, 1, AutoSize, AutoSize"
                Style="{StaticResource FABPrimary}"  />
            </AbsoluteLayout>

Resource dictionary entry:

<Color x:Key="DarkButtonBackground">#921813</Color> 
            <Style x:Key="FABPrimary" TargetType="Button">
                <Setter Property="CornerRadius" Value="100"/>
                <Setter Property="BackgroundColor" Value="{StaticResource DarkButtonBackground}"/>
                <Setter Property="HeightRequest" Value="55"/>
                <Setter Property="WidthRequest" Value="55"/>
                <Setter Property="HorizontalOptions" Value="CenterAndExpand"/>
                <Setter Property="VerticalOptions" Value="CenterAndExpand"/>
                <Setter Property="Padding" Value="15"/>
                <Setter Property="Margin" Value="0,0,0,15"/>
            </Style>
  • You can ignore the resource dictionary entry if you want and instead put the properties directly in the button declaration in your xaml file.
  • I have found that on some iOS devices, the buttons do not display correctly if the radius is set to 100. This can be fixed to setting the CornerRadius to half of the width and height, or you can use OnPlatform like this: 
     <Setter Property="CornerRadius">
          <OnPlatform iOS="25" Android="100"/>
     </Setter>

(When height and width are both 50.)

Upvotes: 12

toumir
toumir

Reputation: 641

the quickest way:

  1. Install this Nuget: https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android
  2. Position the Floating Action Button (FAB) Like this: 
      <?xml version="1.0" encoding="utf-8" ?>
        <ContentPage
            x:Class="Tawsil.Views.DemoPage"
            xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:fab="clr-namespace:Refractored.FabControl;assembly=Refractored.FabControl">

            <AbsoluteLayout>
                <Grid AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">

                    <!-- your content here -->

                </Grid>

                <!-- the FAB -->
                <fab:FloatingActionButtonView AbsoluteLayout.LayoutBounds="1, 1, AutoSize, AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional" ImageName="add.png" />
            </AbsoluteLayout>
        </ContentPage>

Don't forget to add the "add.png" icon to your resources

Upvotes: 4

Uraitz
Uraitz

Reputation: 496

You can use for Android, Floating Action Button (https://developer.android.com/guide/topics/ui/floating-action-button) if you want to use native control, and a custom board for iOS. Otherwise you can add to your Xamarin.Forms page a RelativeLayout container and specity constraints where you want. Something like this:

 <ContentPage.Content>
    <RelativeLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <StackLayout >
            <Label Text="YOUR CODE" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
        </StackLayout>
        <Button CornerRadius="25" Text="B"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
        Property=Width, Factor=1, Constant=-60}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
        Property=Height, Factor=1, Constant=-60}" />
    </RelativeLayout>
</ContentPage.Content>

You can change Button with any other control and you can correct position just changing the value of "Constant=-60"

Upvotes: 2

SushiHangover
SushiHangover

Reputation: 74094

You can use an ImageButton (Xamarin.Forms v3.4+)

Create your image with a transparent background in your favorite editor and then assign it a location on the Page.

enter image description here

Example using an AbsoluteLayout, just place your "FAB" as the last element so that its Z-order is highest and it will "float" above the rest of the content.

    <AbsoluteLayout>

         ~~~~

        <ImageButton Source="editFAB.png" 
            BackgroundColor="Transparent"
            AbsoluteLayout.LayoutFlags="PositionProportional"  
            AbsoluteLayout.LayoutBounds=".95,.95,80,80" 
            Clicked="Handle_Clicked" />
    </AbsoluteLayout>

Output:

enter image description here

Upvotes: 46

FreakyAli
FreakyAli

Reputation: 16409

Using Floating action button in Xamarin Forms is easier than you might think, All you need is a little bit of AbsoluteLayout and an ImageButton that can respond to your clicks and voila! your FAB is ready

Add a custom ImageButton Control something like below:

public class ImageButton : Image
{
    public static readonly BindableProperty CommandProperty =
        BindableProperty.Create("Command", typeof(ICommand), typeof(ImageButton), null);

    public static readonly BindableProperty CommandParameterProperty =
        BindableProperty.Create("CommandParameter", typeof(object), typeof(ImageButton), null);

    public event EventHandler ItemTapped = (e, a) => { };

    public ImageButton()
    {
        Initialize();
    }

    public ICommand Command
    {
        get { return (ICommand)GetValue(CommandProperty); }
        set { SetValue(CommandProperty, value); }
    }

    public object CommandParameter
    {
        get { return GetValue(CommandParameterProperty); }
        set { SetValue(CommandParameterProperty, value); }
    }

    private ICommand TransitionCommand
    {
        get
        {
            return new Command(async () =>
            {
                AnchorX = 0.48;
                AnchorY = 0.48;
                await this.ScaleTo(0.8, 50, Easing.Linear);
                await Task.Delay(100);
                await this.ScaleTo(1, 50, Easing.Linear);
                Command?.Execute(CommandParameter);

                ItemTapped(this, EventArgs.Empty);
            });
        }
    }

    public void Initialize()
    {
        GestureRecognizers.Add(new TapGestureRecognizer
        {
            Command = TransitionCommand
        });
    }
}

Once you have that up and running in a layout whose parent-most is an AbsoluteLayout add the ImageButton like below:

  <customControls:ImageButton Source="{Binding ImageSource}"
                                    Command="{Binding AddCommand}"                                        AbsoluteLayout.LayoutFlags="PositionProportional"                                        AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
                                    Margin="10" />

Where customControls is the namespace where you added your ImageButton custom control.

For better understanding check where I referenced it from which can be found here

Good luck

Revert in case you have any sort of query.

Upvotes: 1

Related Questions