UI

Simple way to create a Floating Button in Xamarin Forms

When we are creating some UI, there are some parts that may seem complicated, this may be true or not, it all depends on how we do the implementation, one example of this can be adding a Floating button in our screen, that’s why in this post we will be learning how to do this in a very simple way!.


Previous knowledge required for the example

? We will be working this UI sample with a GridLayout. If you want to know more information about it you can learn here.


Let’s start!

It will be too simple! We will be using a GridLayout as a principal screen layout. Just follow these steps:

1⃣ Create a GridLayout with one Row and set Height property with a proportional value. (*)

2⃣ Add both ScrollView as Button in the row number zero. Them, inside the ScrollView add a parent layout of your preference, in this case I added a StackLayout.

3⃣ To put the Button down add the following properties:

And Done! ?


Finally, let’s create an example!


About my #XamarinUIJuly article

What #XamarinUIJuly is?

Is an initiative of Steven Thewissen in which Xamarin collaborators write about interesting UI topics.

A few days ago, I had to develop an UI in which I had to add a floating button and then I came up with this simple way to do it, and that’s why I wrote this post! When I finished I reached out to Steven so I could share it at #XamarinUIJuly, even though I could not get a day ?, thank you very much Steven for accepting my collaboration. ?

Spanish post: https://medium.com/@reyes.leomaris/agregando-un-botón-flotante-de-manera-sencilla-en-xamarin-forms-45d86271727a

Good luck with your implementation! ?


Thanks for reading ?!!!

 

Tagged , ,

11 thoughts on “Simple way to create a Floating Button in Xamarin Forms

Leave a Reply to Alex Cancel reply

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