Floating Action menu in Xamarin.Forms

how to create Floating Action menu in Xamarin.Forms

Answers

  • CharwakaCharwaka INMember ✭✭✭✭✭

    Hi @vinodkumarpachimadla

    Use this sample code Credits: @NMackay

    https://us.v-cdn.net/5019960/uploads/editor/nc/4efrzqe3smvn.zip

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

    Don't Forget to Mark as Answer

  • thank you for your time @Charwaka,on button click i want to open a Menu of Buttons ,can you please share with me,if you have any idea about it.

  • NitishKumarSharmaNitishKumarSharma USMember ✭✭

    I've created a Floating Action Menu using @NMackay 's floating action button code.

    What I did was, I created a bunch of other icons and set their LayoutBounds on the right edge only, like this:

    <customControls:ImageButton Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
                                            Command="{Binding DisplayMessageCommand}"
                                            AbsoluteLayout.LayoutFlags="PositionProportional"
                                            AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
                                            Margin="10" 
                                            ButtonType="Primary"/>
                <customControls:ImageButton Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
                                            Command="{Binding Button1Command}"
                                            AbsoluteLayout.LayoutFlags="PositionProportional"
                                            AbsoluteLayout.LayoutBounds="1.0,.8,-1,-1"
                                            Margin="10" IsVisible="{Binding Button1Visibility}"
                                            />
                <customControls:ImageButton Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
                                            Command="{Binding Button2Command}"
                                            AbsoluteLayout.LayoutFlags="PositionProportional"
                                            AbsoluteLayout.LayoutBounds="1.0,.6,-1,-1"
                                            Margin="10" IsVisible="{Binding Button2Visibility}"/>
                <customControls:ImageButton Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
                                            Command="{Binding Button3Command}"
                                            AbsoluteLayout.LayoutFlags="PositionProportional"
                                            AbsoluteLayout.LayoutBounds="1.0,.4,-1,-1"
                                            Margin="10" IsVisible="{Binding Button3Visibility}"/>
    

    I also changed the code in ImageButton.cs to mimic the behaviour of floating action menu. I did two things here: i) Attached another BindableProperty, where you can adjust the button as Primary or Secondary based on which the behaviour will change. ii) Changed the TransitionCommand menu.

    public static readonly BindableProperty ButtonTypeProperty = BindableProperty.Create("ButtonType", typeof(string), typeof(ImageButton), null);
    

    public bool Rotated { get; set; } = false;

    private ICommand TransitionCommand
            {
                get
                {
                    return new Command(async () =>
                    {
                        AnchorX = 0.48;
                        AnchorY = 0.48;
                        if (this.ButtonType == "Primary")
                        {
                            if (Rotated)
                            {
                                await this.RotateTo(0, 100, Easing.Linear);
                                Rotated = false;
                            }
                            else
                            {
                                await this.RotateTo(45, 100, Easing.Linear);
                                Rotated = true;
                            }
                        }
                        Command?.Execute(CommandParameter);
    
                        ItemTapped(this, EventArgs.Empty);
                    });
                }
            }
    

    The main button which should call other buttons, set it as Primary and this does the job, :smile:

  • NitishKumarSharmaNitishKumarSharma USMember ✭✭

    So, I created one using @NMackay 's Floating Action Button code. What I did was, I added bunch of ImageButtons like this.

    <customControls:ImageButton Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
                                            Command="{Binding DisplayMessageCommand}"
                                            AbsoluteLayout.LayoutFlags="PositionProportional"
                                            AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
                                            Margin="10" 
                                            ButtonType="{Binding ButtonType1}"/>
                <customControls:ImageButton Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
                                            Command="{Binding Button1Command}"
                                            AbsoluteLayout.LayoutFlags="PositionProportional"
                                            AbsoluteLayout.LayoutBounds="1.0,.8,-1,-1"
                                            Margin="10" IsVisible="{Binding Button1Visibility}"
                                            />
                <customControls:ImageButton Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
                                            Command="{Binding Button2Command}"
                                            AbsoluteLayout.LayoutFlags="PositionProportional"
                                            AbsoluteLayout.LayoutBounds="1.0,.6,-1,-1"
                                            Margin="10" IsVisible="{Binding Button2Visibility}"/>
                <customControls:ImageButton Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
                                            Command="{Binding Button3Command}"
                                            AbsoluteLayout.LayoutFlags="PositionProportional"
                                            AbsoluteLayout.LayoutBounds="1.0,.4,-1,-1"
                                            Margin="10" IsVisible="{Binding Button3Visibility}"/>
    

    I also modified the ImageButton.cs file to mimic the Floating Action Menu behaviour. I did two things: i) I added another Bindable custom Property. I use it to set the button as Primary or secondary. ii) I updated TransitionCommand to make it work like floating action menu's main button. Following is the code:

    public static readonly BindableProperty ButtonTypeProperty = BindableProperty.Create("ButtonType", typeof(string), typeof(ImageButton), null);
    
    public bool Rotated { get; set; } = false;
    private ICommand TransitionCommand
                {
                    get
                    {
                        return new Command(async () =>
                        {
                            AnchorX = 0.48;
                            AnchorY = 0.48;
                            if (this.ButtonType == "Primary")
                            {
                                if (Rotated)
                                {
                                    await this.RotateTo(0, 100, Easing.Linear);
                                    Rotated = false;
                                }
                                else
                                {
                                    await this.RotateTo(45, 100, Easing.Linear);
                                    Rotated = true;
                                }
                            }
                            Command?.Execute(CommandParameter);
    
                            ItemTapped(this, EventArgs.Empty);
                        });
                    }
                }
    

    And it works like this. Sorry Can't post gif coz I have to be around a little while because xamarin trusts me. :neutral:

  • sachithyodasachithyoda Member

    @NitishKumarSharma can you send the code sample in a zip.

  • baruasgrpsbaruasgrps Member ✭✭

    Hi @NitishKumarSharma, i am also searching the Floating Menu. Then i saw your post, could you please send me the full code. That's would be helpful for me.

Sign In or Register to comment.