Xamarin Forms 101: How to create a floating action button

Are you wondering how to make those buttons in email apps that have fixed positions?

Are you looking for floating action buttons in Xamarin Forms?

In this post, we will create a floating action button in a Xamarin Forms project.

 

If you are developing an Android app in Android Studio, creating a floating action button is easy. This is not the case in Xamarin Forms. However, there’s a library named SuaveControls.FloatingActionButton by Alex Dunn that will help you create your floating action button.

Here are the steps on how to use it.

Step1:

The first step is to right-click on your Solution. Then go to Manage NuGet Packages for Solution.

 

 

Step 2:

On the browse tab, type FloatingActionButton. Look for SuaveControls.FloatingActionButton. Then install on each project in your solution.

 

 

Step 3:

Install the NuGet package on each project in your solution.

 

 

Step 4:

This is only for your iOS project. Make sure to call FloatingActionButtonRenderer.InitRenderer(); in your AppDelegate.cs in order to avoid linking it out.

 

 

Step 5:

Go to icons8. You can get free icons here for your Xamarin apps.

 

 

Step 6:

Android: Include your icons in their respective folders. Make sure you are following the right sizes for each folder in your Android project.

 

 

Step 7:

iOS: Drag your icon that has 3 different sizes into your iOS’s project Resources folder. Follow the iOS naming guidelines.

 

 

Step 8:

Add the xmlns namespace of SuaveControls.FloatingActionButton library.

 

 

Step 9:

Start adding the Floating Action Button View on your XAML file by using FloatingActionButton keyword. The Image, WidthRequest, and HeightRequest properties are important. Don’t forget to fill them out.

 

 

Step 10:

Build and run your Android and iOS project to see that your floating action button is working.

Android

Android

 

iOS

iOS

 

 

Easy right? You can now put a click event or command in your floating action button to complete your its function in your application.

See you on my next blog post. Happy coding!



2 Comments

  • Rizaan Jappie

    I get an error when using the FloatingActionButton in my Xaml

    System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation.

    • Devlin

      Hello Rizaan, try out the lower version of the plugin.