A floating action button (FAB) is a circular button that triggers the primary
action in your app's UI. This page shows you how to add the FAB to your layout,
customize some of its appearance, and respond to button taps.
Floating action buttons provide quick access to important or common actions
within an app. They have a variety of uses, including:
- Performing a common action, such as starting a new email in a mail app.
- Displaying additional related actions.
- Update or transforming into other UI elements on the screen.
Floating action buttons adjust their position and visibility in response to
other UI elements on the screen.
You can also set backgroud will be dim light which is available in code,You have to write below code inside ContentPage
<ContentPage.Content>
<AbsoluteLayout x:Name="mainLayout">
<StackLayout Padding="40" Spacing="10" AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1">
<StackLayout Padding="40" Spacing="10" AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1">
------------------------------------------------
------------Your XAML CODE------------------------
</StackLayout>
<AbsoluteLayout x:Name="MenuLayout" IsVisible="False" AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1" BackgroundColor="#A0000000">
<Frame
x:Name="menuframe"
Margin="0,0,50,110"
IsVisible="False"
AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
AbsoluteLayout.LayoutFlags="PositionProportional"
BorderColor="White"
BackgroundColor="White"
CornerRadius="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<local:MenuView
x:Name="FloatMenuItem1"
Grid.Row="0"
BackgroundColor="Transparent"
IsVisible="False"
MenuClicked="MenuClicked"
MenuText="Add Line Item To All Options"
MenuTextColor="Black"
MenuTextFontAttributes="None" />
<local:MenuView
x:Name="FloatMenuItem2"
Grid.Row="1"
BackgroundColor="Transparent"
IsVisible="False"
MenuClicked="MenuClicked"
MenuText="Add New Option"
MenuTextColor="Black"
MenuTextFontAttributes="None" />
</Grid>
</Frame>
</AbsoluteLayout>
<Image
x:Name="imgRadialMenu"
Margin="10,10,50,50"
AbsoluteLayout.LayoutBounds="1,1,-1,-1"
AbsoluteLayout.LayoutFlags="PositionProportional"
HeightRequest="50"
Source="plus.png"
WidthRequest="50">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="FloatButton_Click" />
</Image.GestureRecognizers>
</Image>
</AbsoluteLayout>
</ContentPage.Content>
Code Behind File :
In Constructor :
----------------------------------------------------------------------------------------------------------------
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) =>
{
DisAppearFabMenu();
};
mainLayout.GestureRecognizers.Add(tapGestureRecognizer);
----------------------------------------------------------------------------------------------------------------
Please Note : No need to set IsVisible Properties for every FloatMenuItem1 if we hidden FRAME.
private async void FloatButton_Click(object sender, EventArgs e)
{
var source = imgRadialMenu.Source as FileImageSource;
if (source.File == "plus.png")
{
await Task.Delay(10);
imgRadialMenu.Source = "close.png"; //Icons will be required
imgRadialMenu.IsEnabled = false;
FloatMenuItem1.IsVisible = false;
FloatMenuItem2.IsVisible = false;
FloatMenuItem2.IsVisible = true;
menuframe.IsVisible = true;
MenuLayout.IsVisible = true;
FloatMenuItem1.IsVisible = true;
imgRadialMenu.IsEnabled = true;
}
else
{
DisAppearFabMenu();
}
}
private async void DisAppearFabMenu()
{
await imgRadialMenu.RotateTo(0, 100, Easing.Linear);
imgRadialMenu.Source = "plus.png"; // ICONS will be required
FloatMenuItem1.IsVisible = false;
FloatMenuItem2.IsVisible = false;
menuframe.IsVisible = false;
MenuLayout.IsVisible = false;
}
// Menu Clicked Event
private void MenuClicked(object sender, EventArgs e)
{
var selectedMenu=sender as Grid ;
if (selectedMenu.classId == FloatMenuItem1)
{
}
}
Creating Custome View (MenuView)--ContentView.XAML
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="ProjectName.CustomViews.MenuView">
<ContentView.Content>
<Grid x:Name="gridmenuclick"
RowSpacing="0"
ColumnSpacing="0"
HorizontalOptions="Start"
VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<AbsoluteLayout Grid.Column="0">
<Label x:Name="lblTooltipText"
Margin="5,0"
HorizontalOptions="Start"
BackgroundColor="Transparent"
VerticalTextAlignment="Center"
AbsoluteLayout.LayoutBounds="1,1,1,1"
AbsoluteLayout.LayoutFlags="All"/>
</AbsoluteLayout>
</Grid>
</ContentView.Content>
</ContentView>
CODE BEHIND File :(I have created lots of bindable properties here you can use or you can create more.(i am not using all)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace ProjectName.CustomViews
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MenuView : ContentView
{
public event EventHandler MenuClicked;
public MenuView()
{
InitializeComponent();
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) =>
{
MenuClicked?.Invoke(s, e);
};
gridmenuclick.GestureRecognizers.Add(tapGestureRecognizer);
}
protected override void OnPropertyChanged(string propertyName = null)
{
base.OnPropertyChanged(propertyName);
if (propertyName == MenuTextColorProperty.PropertyName)
{
lblTooltipText.TextColor = MenuTextColor;
}
else if (propertyName == MenuTextProperty.PropertyName)
{
lblTooltipText.Text = MenuText;
gridmenuclick.Text=MenuText;
}
else if (propertyName == MenuTextFontAttributesProperty.PropertyName)
{
lblTooltipText.FontAttributes = MenuTextFontAttributes;
}
}
public static readonly BindableProperty MenuTextColorProperty = BindableProperty.Create(nameof(MenuTextColor), typeof(Color), typeof(MenuView), default(Color), Xamarin.Forms.BindingMode.TwoWay);
public static readonly BindableProperty IconBackgroundColorProperty = BindableProperty.Create(nameof(IconBackgroundColor), typeof(Color), typeof(MenuView), default(Color), Xamarin.Forms.BindingMode.TwoWay);
public static readonly BindableProperty MenuTextProperty = BindableProperty.Create(nameof(MenuText), typeof(string), typeof(MenuView), default(string), Xamarin.Forms.BindingMode.TwoWay);
public static readonly BindableProperty MenuTooltipbackgroundImageProperty = BindableProperty.Create(nameof(MenuTooltipbackgroundImage), typeof(string), typeof(MenuView), default(string), Xamarin.Forms.BindingMode.TwoWay);
public static readonly BindableProperty MenuIconProperty = BindableProperty.Create(nameof(MenuIcon), typeof(string), typeof(MenuView), default(string), Xamarin.Forms.BindingMode.TwoWay);
public static readonly BindableProperty IconImageWidthRequestProperty = BindableProperty.Create(nameof(IconImageWidthRequest), typeof(double), typeof(MenuView), default(double), Xamarin.Forms.BindingMode.TwoWay);
public static readonly BindableProperty IconImageHeightRequestProperty = BindableProperty.Create(nameof(IconImageHeightRequest), typeof(double), typeof(MenuView), default(double), Xamarin.Forms.BindingMode.TwoWay);
public static readonly BindableProperty MenuTextFontAttributesProperty = BindableProperty.Create(nameof(MenuTextFontAttributes), typeof(FontAttributes), typeof(MenuView), default(FontAttributes), Xamarin.Forms.BindingMode.TwoWay);
public Color MenuTextColor
{
get { return (Color)GetValue(MenuTextColorProperty); }
set { SetValue(MenuTextColorProperty, value); }
}
public Color IconBackgroundColor
{
get { return (Color)GetValue(IconBackgroundColorProperty); }
set { SetValue(IconBackgroundColorProperty, value); }
}
public string MenuText
{
get { return (string)GetValue(MenuTextProperty); }
set { SetValue(MenuTextProperty, value); }
}
public string MenuTooltipbackgroundImage
{
get { return (string)GetValue(MenuTooltipbackgroundImageProperty); }
set { SetValue(MenuTooltipbackgroundImageProperty, value); }
}
public string MenuIcon
{
get { return (string)GetValue(MenuIconProperty); }
set { SetValue(MenuIconProperty, value); }
}
public double IconImageWidthRequest
{
get { return (double)GetValue(IconImageWidthRequestProperty); }
set { SetValue(IconImageWidthRequestProperty, value); }
}
public double IconImageHeightRequest
{
get { return (double)GetValue(IconImageHeightRequestProperty); }
set { SetValue(IconImageHeightRequestProperty, value); }
}
public FontAttributes MenuTextFontAttributes
{
get { return (FontAttributes)GetValue(MenuTextFontAttributesProperty); }
set { SetValue(MenuTextFontAttributesProperty, value); }
}
}
}
