Posted on Jul 12, 2019 • Edited on Aug 25, 2024

Floating Action Menu with .NET for Android or Xamarin Android

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!

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 from André Servidoni, 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:

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

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

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