Xamarin -- Floating Action MENU

Floating action button (FAB) is a staple of apps using material design. Since Material design was introduced, the Floating Action Button (FAB) has become one of the simplest components to implement, becoming a fast and essential favorite among designers and developers.

 Floating action menus are mostly same as the floating action button but there are one major difference between them that is floating action button is only one button and dose not contain any sub menus but the floating action menus make with multiple floating action buttons and when application user click on that then multiple floating menus smoothly comes directly from main floating action button and set just above of them one by one.

In this tutorial I will show you how to make your apps FAB interactive and how to make your own animations. But let’s start simple, adding the Floating Action Button to an Android project.

There are two ways in which we can add a floating action menu. Using a 3rd party library is one option, but that is not always ideal because libraries can get outdated. Much more viable option is to code it ourselves and use the latest and greatest things from the design support library made by Google which guarantees we will always be able to use bleeding edge features.

video can be found at --- click here

MAinActivity.cs

using Android.App;
using Android.Widget;
using Android.OS;
using Android.Support.V7.App;
using Android.Support.Design.Widget;
using Android.Views;
using System;
using Android.Animation;

namespace FabMenuTut
{
    [Activity(Label = "FabMenuTut", MainLauncher = true)]
    public class MainActivity : AppCompatActivity
    {
        private static bool isFabOpen;
        private FloatingActionButton fabAirballoon;
        private FloatingActionButton fabCake;
        private FloatingActionButton fabMain;
        private View bgFabMenu;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);

            fabAirballoon = FindViewById<FloatingActionButton>(Resource.Id.fab_airballoon);
            fabCake = FindViewById<FloatingActionButton>(Resource.Id.fab_cake);
            fabMain = FindViewById<FloatingActionButton>(Resource.Id.fab_main);
            bgFabMenu = FindViewById<View>(Resource.Id.bg_fab_menu);

            fabMain.Click += (o, e) =>
            {
                if (!isFabOpen)
                    ShowFabMenu();
                else
                    CloseFabMenu();
            };

            fabCake.Click += (o, e) =>
            {
                CloseFabMenu();
                Toast.MakeText(this, "Cake!", ToastLength.Short).Show();
            };

            fabAirballoon.Click += (o, e) =>
            {
                CloseFabMenu();
                Toast.MakeText(this, "Airballoon!", ToastLength.Short).Show();
            };

            bgFabMenu.Click += (o, e) => CloseFabMenu();
        }

        private void ShowFabMenu()
        {
            isFabOpen = true;
            fabAirballoon.Visibility = ViewStates.Visible;
            fabCake.Visibility = ViewStates.Visible;
            bgFabMenu.Visibility = ViewStates.Visible;

            fabMain.Animate().Rotation(135f);
            bgFabMenu.Animate().Alpha(1f);
            fabAirballoon.Animate()
                .TranslationY(-Resources.GetDimension(Resource.Dimension.standard_100))
                .Rotation(0f);
            fabCake.Animate()
                .TranslationY(-Resources.GetDimension(Resource.Dimension.standard_55))
                .Rotation(0f);
        }

        private void CloseFabMenu()
        {
            isFabOpen = false;

            fabMain.Animate().Rotation(0f);
            bgFabMenu.Animate().Alpha(0f);
            fabAirballoon.Animate()
                .TranslationY(0f)
                .Rotation(90f);
            fabCake.Animate()
                .TranslationY(0f)
                .Rotation(90f).SetListener(new FabAnimatorListener(bgFabMenu, fabCake, fabAirballoon));
        }

        private class FabAnimatorListener : Java.Lang.Object, Animator.IAnimatorListener
        {
            View[] viewsToHide;

            public FabAnimatorListener(params View[] viewsToHide)
            {
                this.viewsToHide = viewsToHide;
            }

            public void OnAnimationCancel(Animator animation)
            {
            }

            public void OnAnimationEnd(Animator animation)
            {
                if (!isFabOpen)
                    foreach (var view in viewsToHide)
                        view.Visibility = ViewStates.Gone;
            }

            public void OnAnimationRepeat(Animator animation)
            {
            }

            public void OnAnimationStart(Animator animation)
            {
            }
        }
    }
}

Main.axml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="Hello FAB menu!"
    android:textSize="24sp"/>

  <View
    android:id="@+id/bg_fab_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#48000000"
    android:alpha="0"
    android:visibility="gone"/>

  <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_airballoon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/standard_23"
    android:visibility="gone"
    android:rotation="90"
    app:fabSize="mini"
    app:srcCompat="@drawable/ic_airballoon"/>

  <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_cake"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/standard_23"
    android:visibility="gone"
    android:rotation="90"
    app:fabSize="mini"
    app:srcCompat="@drawable/ic_cake"/>

  <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_main"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    app:fabSize="normal"
    app:srcCompat="@drawable/ic_plus"/>
 
</android.support.design.widget.CoordinatorLayout>

 AndroidMainfest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="FabMenuTut.FabMenuTut"
          android:versionCode="1"
          android:versionName="1.0">
  <uses-sdk android:minSdkVersion="21" />
  <application android:allowBackup="true"
               android:label="@string/app_name"
               android:theme="@style/Theme.AppCompat.Light.DarkActionBar">
  </application>
</manifest>

dimens.xml

<resources>
  <dimen name="fab_margin">16dp</dimen>
  <dimen name="standard_12">12dp</dimen>
  <dimen name="standard_23">23dp</dimen>
  <dimen name="standard_55">55dp</dimen>
  <dimen name="standard_100">100dp</dimen>
  <dimen name="standard_145">145dp</dimen>
</resources>