[F100] Floating Action Buttons

[samhouts]

Rationale

A floating action button menu is a common design paradigm. There is currently no control in Xamarin.Forms that will provide this functionality on all platforms.

Implementation

Add new control FloatingActionButton:

public static readonly BindableProperty ColorProperty = BindableProperty.Create("Color", typeof(Color), typeof(FloatingActionButton), Color.Default);

public static readonly BindableProperty ImageSourceProperty = BindableProperty.Create("ImageSource", typeof(ImageSource), typeof(FloatingActionButton), null);

public static readonly BindableProperty CommandProperty = BindableProperty.Create("Command", typeof(ICommand), typeof(FloatingActionButton), null);

public static readonly BindableProperty CommandParamenterProperty = BindableProperty.Create("CommandParameter", typeof(object), typeof(FloatingActionButton), null);

public static readonly BindableProperty SizeProperty = BindableProperty.Create("Size", typeof(FloatingActionButtonSize), typeof(FloatingActionButton), FloatingActionButtonSize.Normal);

public event EventHandler Clicked;

public enum FloatingActionButtonSize
{
    Normal,
    Mini
}

Renderers will need to be created accordingly.

Expected Result

Android

• Use the platform's built-in FloatingActionButton control.

iOS

• Create custom button.

UWP

• Create custom button.

Implications for CSS

FloatingActionButton will support color.

Backward Compatibility

Since we are adding a new control, there should be no compatibility problems at all.

Difficulty : High

This is a brand new control with commands and events, and there is no corresponding platform control for UWP or iOS. Consistency and stability will be very important.

[hartez]

So on UWP, is this just a Button with a Flyout?

[hartez]

@samhouts Is the intent to support everything that floating action buttons on Android do (e.g, speed dial, morphing into sheets, morphing into toolbars, etc.)?

[programmation]

One of the keys to getting this working is to be able to have a full-screen overlay view (under the FAB but on top of the main window's content) that floats over and masks the main window (also trapping and exposing touches) and allows presentation of the FAB's content. This is currently very difficult to achieve in "pure" Xamarin Forms because it's hard to dig into the hierarchy of windows and place both the FAB and the overlay correctly on screen. The Rg.Plugins.Popup plugin has to hack the renderer mechanism of Xamarin Forms to achieve the necessary effect using UIModalPresentationStyle and a modal UIViewController. The fundamental problem is that the iOS RootViewController and its equivalent in the other platforms aren't exposed in the IVisualElement hierarchy. If the RootViewController were mapped to a (say) ApplicationPage with accompanying ApplicationRenderer then it could have "floating" views that overlay the other views of the app, with visibility / opacity controlled by the FAB. The FAB itself would be a subview of the ApplicationPage and therefore appear relative to the application's window.

[samhouts]

@hartez That may be the long-term goal, or it may be achieved with platform specifics for whatever platforms support those features, but I think we want to keep it as simple as possible for now, since we're basically inventing it on iOS/UWP.

@programmation That's good feedback. I think we'll be able to work around those limitations better, since this will be in the platform code instead of having to work around it as a plugin.

[hartez]

@samhouts Since it's not really part of the iOS or Windows design languages, is there really demand for us to create one on those platforms? Or are people just asking for us to support a FAB on Android?

[StephaneDelcroix]

how do you add that button to a Page ? what if I don't want it on bottom, but bottom-left ? How do I make it disappear while scrolling, and reappearing when I'm done scrolling (or any other event) ?

[davidortinau]

fyi - https://alexdunn.org/2017/04/26/xamarin-controls-xamarin-forms-floatingactionbutton-including-ios/

[programmation]

@samhouts @davidortinau Please consider adding an ApplicationPage and corresponding ApplicationRenderer to expose the RootViewController/equivalent. It would make many things easy that are currently impossible.

[sichy]

Made this for IOS and Droid sometime ago, can port to Forms. Let me know how to pick/reserve this ticket to contribute and do PR then once done.

[SuavePirate]

Whoever decides to take up building this, make sure you read the full spec of the FAB on material.io https://material.io/guidelines/components/buttons-floating-action-button.html#

This control should NOT be positioned at the bottom corner of the page by nature. It's also important to note that although the spec discusses behaviors and animations around the FAB, that it would be overkill to bake those into the control. Even the native android control avoids this: https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

In order to implement animations in the behaviors natively, you use CoordinatorLayouts and custom animations that involve easing the FAB positioning, then either fading or shrink/growing the FAB while simultaneously animating the new view (such as exposing a toolbar). Those types of transitions are not built into the Native Android control, and as such probably shouldn't be implemented in the Xamarin.Forms implementation.

[rcunniffe]

@samhouts How's progress?