Xamarin.Forms Floating Action Button

Xamarin.Forms Floating Action Button

Hello Xamarians,

This is my first post and I do not know how much better it will be for other people. If I see some mistake then please let me know that.
In this, I am talking about FloatingActionButton or “FAB” from how we can use xamarin forms with the help of the plugin.

Here are some links:https://github.com/keannan5390/Xamarin.Plugin.FAB 

NuGet package:https://www.nuget.org/packages/FAB.Forms/2.2.0-pre1

Now Available on NuGet!

Install-Package FAB.Forms -Version 2.2.0-pre1  

Install the NuGet package and then you we include it in your XAML or call it from C#.

	<?xml version="1.0" encoding="utf-8" ?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local="clr-namespace:App1"
	xmlns:fab="clr-namespace:FAB.Forms;assembly=FAB.Forms"
	x:Class="App1.MainPage">
	<ContentPage.Content>
	<RelativeLayout>
	<ContentView RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
	RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
	<ListView x:Name="MainList"
	BackgroundColor="White">
	<ListView.ItemTemplate>
	<DataTemplate>
	<TextCell Text="{Binding .}" />
	</DataTemplate>
	</ListView.ItemTemplate>
	</ListView>
	</ContentView>
	<fab:FloatingActionButton
	x:Name="fabBtn"
	Source="icon.png"
	Size="Normal"
	Clicked="Handle_FabClicked"
	NormalColor="Green"
	RippleColor="Red"
	HasShadow="True"
	RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-75}"
	RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-75}" />
	</RelativeLayout>
	</ContentPage.Content>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

 Here is some code behind c# code:

	using System.Collections.Generic;
	using Xamarin.Forms;
	namespace App1
	{
	public partial class MainPage : ContentPage
	{
	public MainPage()
	{
	InitializeComponent();
	PreList();
	}
	private void PreList()
	{
	var items = new List<string>();
	for (int i = 0; i < 50; i++)
	{
	items.Add(string.Format("Item {0}", i));
	}
	MainList.ItemsSource = items;
	}
	void Handle_FabClicked(object sender, System.EventArgs e)
	{
	this.DisplayAlert("Floating Action Button", "You clicked the FAB!", "Awesome!");
	}
	}
	}

view raw MainPage.cs hosted with ❤ by GitHub

Android Example:

 

Ios Example:

 

Make it more flexible: 

if you want to add different type of Background color in FAB so you can use NormalColor="Green" property.
you can Adjust Height and Width with the using of HeightRequest="90"    
WidthRequest="90"
And showing Shadow to use HasShadow="True" and etc.

Click Here to Complete Source Code