Use this Control into Xamarin.Forms using Native Embedding feature

[matteopiccioni]

Hello,
there is way to embed this control inside the shared project for the Android platform ?

Into shared class I am able to use a UISegmentedControl for the iPhone side

#if __IOS__

var segmentControl = new UISegmentedControl();
segmentControl.Frame = new CGRect(20, 20, 280, 40);
segmentControl.InsertSegment("One", 0, false);
segmentControl.InsertSegment("Two", 1, false);
segmentControl.SelectedSegment = 1;
segmentControl.ValueChanged += async (sender, e) =>
{
  var selectedSegmentId = (sender as UISegmentedControl).SelectedSegment;
  await MainPage.DisplayAlert($"Native Segmented Control Clicked {selectedSegmentId}",
                                            "Whoa!!!!!!", "OK");
};
stack.Children.Add(segmentControl);
 pageLayout.Children.Insert(0, stack);

#endif

In wich way I could add your component inside the Android side ?

#if __ANDROID__
using Xamarin.Forms.Platform.Android;
using MyProject.Droid;
using Android.Views;
using Android.Support.Design.Widget;
using Android.Util;
using Clans.Fab;
#endif
..
..
#if __ANDROID__
// ...
            Clans.Fab.FloatingActionButton fabSend;
            Clans.Fab.FloatingActionButton fabDelete;
            FloatingActionMenu fam = new FloatingActionMenu(Forms.Context, 

#endif

Thanks a lot!

[fabionuno]

Unfortunately the FloatingActionMenu only works when Inflated by a XML layout because some initialisations are done by the onFinishInflate method.

I will try to send a PR to the original Java version to fix this issue.

You will need to create a Android Layout with the FloatingActionMenu, Inflate it and add the view in your Forms layout.
I don't think this is the best solution but, at this moment, it works.

FabFormsPage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="FabForms.FabFormsPage"
    Title="Xaml Example"
    BackgroundColor="White">
    <RelativeLayout x:Name="body">
        <ListView
            x:Name="list"
            BackgroundColor="White"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
            >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell
                        Text="{Binding .}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </RelativeLayout>
</ContentPage>

FabFormsPage.cs

using System.Collections.Generic;
using Xamarin.Forms;
using System;

#if __ANDROID__
using Xamarin.Forms.Platform.Android;
using Clans.Fab;
using Android.Views;
using Android.Widget;
#endif

namespace FabForms
{
    public partial class FabFormsPage : ContentPage
    {
        public FabFormsPage()
        {
            InitializeComponent();

            var items = new List<string>();
            for (int i = 0; i < 50; i++)
            {
                items.Add(string.Format("Item {0}", i));
            }

            this.list.ItemsSource = items;

            #if __ANDROID__
            LayoutInflater inflater = LayoutInflater.From(Forms.Context);
            var view = inflater.Inflate(Droid.Resource.Layout.fam_layout, null, false);

            var fam = view.FindViewById<FloatingActionMenu>(Droid.Resource.Id.menu_red);
            fam.SetClosedOnTouchOutside(true);
            this.body.Children.Add(view);
            #endif
        }
    }
}

fam_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu_red"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:paddingRight="10dp"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        fab:menu_labels_ellipsize="end"
        fab:menu_labels_singleLine="true"
        fab:menu_backgroundColor="#ccffffff"
        fab:menu_fab_label="Menu label">
        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_size="mini"
            fab:fab_label="Disabled" />
        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_size="mini"
            fab:fab_label="Remove button" />
        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_size="mini"
            fab:fab_label="Restore Button" />
    </com.github.clans.fab.FloatingActionMenu>
</FrameLayout>

[matteopiccioni]

Thank you very much! 👍