How to create a simple Floating Button with Xamarin.Forms/MAUI

For a while, I have been trying to search how to create a simple Floating Button and this is my final code:

<AbsoluteLayout>
<!–Other components–>
<ImageButton Source=”plus.png”
BackgroundColor=”Green”

For a while, I have been trying to search how to create a simple Floating Button and this is my final code:

<AbsoluteLayout>
     <!--Other components-->
     <ImageButton Source="plus.png" 
            BackgroundColor="Green"
        CornerRadius="80"
            AbsoluteLayout.LayoutFlags="PositionProportional"  
            AbsoluteLayout.LayoutBounds=".95,.95,80,80" />
</AbsoluteLayout>
  • The Source is the picture you want to use.
  • The BackgroundColor is the color you want to use in HEX.
  • The CornerRadius is to create the form.
  • The AbsoluteLayout.LayoutBounds is the location.

This will be the result:

example

You can get the icon from:

https://materialdesignicons.com

And I got some inspiration from here:

https://stackoverflow.com/a/54519048/1928691


Print Share Comment Cite Upload Translate
APA
Federico Navarrete | Sciencx (2024-03-29T15:58:40+00:00) » How to create a simple Floating Button with Xamarin.Forms/MAUI. Retrieved from https://www.scien.cx/2021/06/17/how-to-create-a-simple-floating-button-with-xamarin-forms-maui/.
MLA
" » How to create a simple Floating Button with Xamarin.Forms/MAUI." Federico Navarrete | Sciencx - Thursday June 17, 2021, https://www.scien.cx/2021/06/17/how-to-create-a-simple-floating-button-with-xamarin-forms-maui/
HARVARD
Federico Navarrete | Sciencx Thursday June 17, 2021 » How to create a simple Floating Button with Xamarin.Forms/MAUI., viewed 2024-03-29T15:58:40+00:00,<https://www.scien.cx/2021/06/17/how-to-create-a-simple-floating-button-with-xamarin-forms-maui/>
VANCOUVER
Federico Navarrete | Sciencx - » How to create a simple Floating Button with Xamarin.Forms/MAUI. [Internet]. [Accessed 2024-03-29T15:58:40+00:00]. Available from: https://www.scien.cx/2021/06/17/how-to-create-a-simple-floating-button-with-xamarin-forms-maui/
CHICAGO
" » How to create a simple Floating Button with Xamarin.Forms/MAUI." Federico Navarrete | Sciencx - Accessed 2024-03-29T15:58:40+00:00. https://www.scien.cx/2021/06/17/how-to-create-a-simple-floating-button-with-xamarin-forms-maui/
IEEE
" » How to create a simple Floating Button with Xamarin.Forms/MAUI." Federico Navarrete | Sciencx [Online]. Available: https://www.scien.cx/2021/06/17/how-to-create-a-simple-floating-button-with-xamarin-forms-maui/. [Accessed: 2024-03-29T15:58:40+00:00]
rf:citation
» How to create a simple Floating Button with Xamarin.Forms/MAUI | Federico Navarrete | Sciencx | https://www.scien.cx/2021/06/17/how-to-create-a-simple-floating-button-with-xamarin-forms-maui/ | 2024-03-29T15:58:40+00:00
https://github.com/addpipe/simple-recorderjs-demo