Floating Action Menu with Xamarin Android

#xamarin #android #material #csharp

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