Creating animated Floating Action Button for Xamarin.Forms

Animated Floating Action Button for Xamarin.Forms? It’s easy! In this post, I will show how we can use pure Xamarin.Forms for creating Floating Action Button that will animate when page appears. Let’s start!

Animated Floating Action Button for Xamarin.Forms? It’s easy! In this post, I will show how we can use pure Xamarin.Forms for creating Floating Action Button that will animate when page appears. Let’s start!

TL;DR

I’ve created GitHub repository, which can be found here here. Below, you can find how implementation looks like:

Let’s code

Before we start coding is worth reading official Google docs about Floating Action Button, which can be found here. We are going to follow these guidelines.

Making it round

Let’s start by using Button and making it round:

We are using Visual="Material" in order to have same look on both platforms. Above code will render as follows:

That doesn’t look good, does it? We can fix that by using ImageSource and setting it to use instance of FontImageSource. However we need to use font, which has “+” glyph. That can be done by using Font Awesome or Material Design Icons.

I’m going to use this glyph from Font Awesome. Embedding custom fonts in Xamarin.Forms is very easy. Just follow this blog post or refer to docs.

Code will look now as follows:

Instead of typing meaningless glyph code for FontImageSource I’m using FontAwesomeIcons class generated by “FontAwesome to C#” project by Matthew Robbins. It’s way more readable and our button looks better now:

Adding shadow

Now we need to work on shadow under button. On Android shadow is generated by setting Elevation so let’s do that by using VisualElement.Elevation:

However, I’ve noticed it doesn’t have any effect on Button for Android platform. Button still looks the same as on previous screenshots.

On iOS default shadow under Button looks little better but it’s still not very visible. We can improve it by using VisualElement Drop Shadow as follows:

It will render like this:

Alternative way to create shadow for iOS is to use custom renderer, which adjust shadow properties for CALayer.

We still need to have nice shadow for Android, so what can we do? There is a great library Sharpnado.Shadows by Jean-Marie Alfonsi that provides cross-platform abstraction for creating shadows for Android, iOS, UWP and Tizen.

Let’s edit our code and use Sharpnado.Shadows:

Shadow looks much better now:

Animating the thing

Now it’s time to animate Floating Action Button when page is appearing. Let’s start with moving code to ContentView and detecting when Page has appeared. However there is no built-in mechanism for that so we are going to override OnParentSet method and get reference to Page:

I’ve created GetParentAsync method extension that goes up in the tree and return Parent of specified type:

We know when page is appearing and disappearing so we can implement animation. First let’s update XAML, so our Floating Action Button will be not visible by default:

We have set Scale to 0 for sh:Shadows. Now let’s animate it:

We need to wait for Page animation to complete before we can show Floating Action Button. Animation is done by using simple ScaleTo animation.

Now let’s use Floating Action Button on ContentPage:

and see how it works:

Looks good!

Final touch

As a final touch we need to add few things:

  • add BindableProperty of type ImageSource, so glyph can we set from outside component
  • add BindableProperty of type ICommand
  • add event Clicked
  • BackgroundColor for Button should be set from outside component

Here is the final source code for FloatingActionButton XAML and csharp:

Summary

Full source code is available at my GitHub. I hope it will be helpful for you! Happy coding ­čśë

Leave a Reply

Your email address will not be published. Required fields are marked *