Floating Action Menu with Xamarin Android
Tags: xamarin, android, material, csharp
Published: 2019-07-12 19:02:51

Many times, when you're building apps a new control became pretty famous, the Floating button, but in some famous apps, you can find floating Menus!

![](https://raw.githubusercontent.com/DeKoServidoni/OMFM/master/images/example_v1.0.3.gif)

From time to time, it's a little bit difficult to find a good control for this work in NuGet, most of them are outdated or not really working in the latest version of Android. After many failed attempts I found this one [OneMoreFabMenu](https://github.com/DeKoServidoni/OMFM) from [André Servidoni](https://github.com/DeKoServidoni), it was not so obvious binding because it was written in Kotlin, but now, I have my own version and I hope it can help you simplify your mobile development.

Now, let's go to some coding:

### **Step 1. Download the package from NuGet:**

[![NuGet Badge Xamarin-OneMoreFabMenu](https://buildstats.info/nuget/Xamarin-OneMoreFabMenu)](https://www.nuget.org/packages/Xamarin-OneMoreFabMenu/)


### **Step 2. Add the control to your Layout.

```xml
<com.dekoservidoni.omfm.OneMoreFabMenu
	android:id="@+id/fabMenu"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_gravity="bottom|end"
	app:content_options="@menu/omfm_content_options"
	app:color_main_button="@color/colorPrimaryDark"
	app:close_on_click="true"
	app:color_secondary_buttons="@color/colorPrimary"
	app:expanded_background_color="@color/colorGrayTrans"/>
```

### **Step 3. Configure your menu options**

You need to create a menu in the menu folder, it can have this name:

**omfm_content_options.xml**

```xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- The First button is the initial Fab of the menu -->
	<!-- Don't need the title in this case, so let it empty -->
	<item
		android:id="@+id/main_option"
		android:icon="@drawable/icon1"
		android:title=""/>

	<!-- Options buttons of the Fab menu -->

	<item
		android:id="@+id/option1"
		android:icon="@drawable/icon2"
		android:title="@string/options_1" />

	<item
		android:id="@+id/option2"
		android:icon="@drawable/icon3"
		android:title="@string/options_2" />

	<item
		android:id="@+id/option3"
		android:icon="@drawable/icon4"
		android:title="@string/options_3" />
</menu>
```

### **Step 4. Configure your Activity to read the options**

```csharp
private OneMoreFabMenu FabButtonMenu { get; set; }

public partial class MainActivity : AppCompatActivity, OneMoreFabMenu.IOptionsClick
{
	protected override async void OnCreate(Bundle savedInstanceState)
	{
		base.OnCreate(savedInstanceState);
		FabButtonMenu = FindViewById<OneMoreFabMenu>(Resource.Id.fabMenu);
		FabButtonMenu.SetOptionsClick(this);
	}
}

public void OnOptionClick(Integer p0)
{
	switch (Convert.ToInt32(p0))
	{
		case Resource.Id.option1:
			break;
		case Resource.Id.option2:
			break;
		case Resource.Id.option3:
			break;
	}
}
```

And that's all, now, you have a nice and easy menu to use!

### Follow me on:

|  Personal  |  LinkedIn  |YouTube|Instagram|Cyber Prophets|Sharing Your Stories|
|:----------|:----------|:------------:|:------------:|:------------:|:------------:|
|[![Personal](https://raw.githubusercontent.com/FANMixco/federiconavarrete/master/img/favicons/favicon.png)](https://federiconavarrete.com)|[![LinkedIn](https://i.stack.imgur.com/idQWu.png)](https://www.linkedin.com/in/federiconavarrete)|[![YouTube](https://i.stack.imgur.com/CFPMR.png)](https://youtube.com/c/FedericoNavarrete)|[![Instagram](https://i.stack.imgur.com/PIfqY.png)](https://www.instagram.com/federico_the_consultant)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/cyber-prophets)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/sharing-your-stories)|

[![sponsor me](https://raw.githubusercontent.com/FANMixco/Xamarin-SearchBar/master/bmc-rezr5vpd.gif)](https://www.buymeacoffee.com/fanmixco)