Android Material design Floating Action Button in Xamarin Android

In Brief: Implementation steps for material design component Floating action button in xamarin android.

In my previous post explained How to create Navigation drawer using android material design library, How to customize material design Snackbar in xamarin android, How to use REST web service in xamarin mobile application.

In Detail: Another useful and beautiful UI Component intriduced with Material design is Floating Action Button(FAB). This is the circular buttonfloats on the UI in a circular 

shape with action attached on it. Usually this action represents the primary action involved in that scrren. For examplewe can see this in Gmail app with action compose mail.

In Steps:

Step 1:

Setup xamarin android project and Add nuget packege 

Step 2:

Edit style with app style inheriting from Theme.AppCompat

 <?xml version="1.0" encoding="UTF-8" ? >
 <resources  >
 <style name="DesignTheme" parent="Theme.AppCompat.Light.DarkActionBar" >
   <item name="windowNoTitle" >true </item >
      <item name="windowActionBar" >false </item >
         <item name="colorPrimary" >@color/primary </item >
         <item name="colorPrimaryDark" >@color/primary_dark </item >
         <item name="colorAccent" >@color/accent </item > </style >
 </resources >

Add style tag to manifest application tag theme property (android:theme="@style/DesignTheme")

Step 3: Create Layout file for Floating action button.
Here list of cities are taken as example with Floating action button to edit the city list.

FABLayout.axml

 <?xml version="1.0" encoding="utf-8"? >
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#DCDCDC" >
     <include
        layout="@layout/app_bar" / >
     <ListView
        android:id="@+id/lstViewCityList"
        android:layout_below="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:dividerHeight="1px"
        android:divider="@color/primary"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:paddingLeft="5dp" / >
     <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:src="@drawable/ic_edit"
        android:layout_marginRight="15dp"
        android:layout_marginBottom="15dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true" / >
 </RelativeLayout >

app_bar.axml

 <?xml version="1.0" encoding="utf-8"? >
 <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="#ff1976d2"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" / >

Step 4: Initialize FAB with click event. Bind listview with list of cities, here we can floating action button floating over list of cities.

FABActivity.cs

using Android.App;
using Android.OS;
using Android.Widget;
using Android.Support.Design.Widget;
using Android.Support.V7.App;
using toolbar=Android.Support.V7.Widget.Toolbar;

namespace DesignComponent
{ 
 [Activity (Label = "FAB",MainLauncher=true)]   
 public class FABActivity : AppCompatActivity
 {

  FloatingActionButton fab;
  toolbar toolbar;
  protected override void OnCreate (Bundle savedInstanceState)
  {
   base.OnCreate (savedInstanceState);
   SetContentView (Resource.Layout.FABLayout);
   fab =  FindViewById <FloatingActionButton >(Resource.Id.fab); 
   //Floating action button
   fab.Click += (sender, args) = >
   Toast.MakeText (this, GetString (Resource.String.fab_clicked), ToastLength.Short).Show (); 

   toolbar = FindViewById <toolbar > (Resource.Id.app_bar);

   //bind listview
   var lstViewCityList = FindViewById <ListView > (Resource.Id.lstViewCityList);
   var cityList = new string[]{"Bangalore","Mumbai","Delhi","Hyderbad","Chennai","Gurgaon","Pune","Kalkotta","Mysore","Mangalore","Puttur","Vijaynagar","Bhandra" };
   var arraAdapter = new ArrayAdapter (this, Android.Resource.Layout.SimpleDropDownItem1Line, cityList);
   lstViewCityList.Adapter = arraAdapter;
   lstViewCityList.ChoiceMode=ChoiceMode.Multiple;
   lstViewCityList.CacheColorHint = Android.Graphics.Color.ParseColor("#ff0e135c"); 

  }

  protected override void OnResume ()
  {   
   //set tool bar title
   SetSupportActionBar (toolbar);
   SupportActionBar.SetTitle (Resource.String.FAB); 
   base.OnResume ();
  }

 }
}

This is the steps involved in the android material design component Floating action button implementation in xamarin android.
Comment for any issues or suggestion.