Thursday, January 11, 2018

Transform Floating Action Button into Toolbar in Xamarin.Forms

There are numerous popular port of floating action button from native to Xamarin.Forms i will not enumerate it here, Ever wonder how to create one without dependencies to this libraries?  Just by using existing api in Xamarin.Forms you will certainly can.  We will make it more fancier by transforming your FAB into a toolbar with a smooth animation (yes smooth animation without using Lottie library).

Screenshots









Conceptualizing the transform


Now let start by taking an inspiration from the Android material animation technique, There are actually lot of resources to choose from, but i got one from here which pretty awesome. I think there were concepts which i think we can achieve just by using the XF's current api's without the need for third party libraries like Lottie or other popular libraries but of course Lottie is just way too awesome if you have Adobe after effects artists in your team.







Implement the awesomeness


Along the way i have encounter a lot of challenges, The first thing is how to make the animation as smooth, I tend to have done a lot of animation extension only to find out i would only need the existing animation extension from Xamarin.Forms. You will also have to figure out how animation runs in-order and in-parallel and you would also have to consider the in-between trigger of animation which is quiet challenging.


Structure of the Xaml UI





We will take the button on the center of the screen, so regardless on the screen size it will always be on the center.





Then on our backend code we will call InitializeButton inside the OnAppearing method, this will calculate the location of the button in the bottom right part of the screen. I know you wonder why should i need to calculate this when we can do it by having the StackLayout in HorizontalOptions and VerticalOptions set to "End".





The fact of the matter is, I have already tried it and i have figure out it would have less calculation and much simplier to manipulate. Now our bread and butter of the concept lies in the default animation extension provided by Xamarin.Forms.





See it in Action


The sample project is built with .Net Standard and im using Prism + DryIOC but it was not utilized in this presentation. This is also tested in the UWP project and should work fine.







Wrapping Up


The awesomeness are overloading on this sample code, so go ahead and dig deeper. Feel free to tweak this project to suit your need. If you have some questions go shoot me a message here and will gladly answer your questions. If you want more and advance topic you can catch us at this facebook groups  MondPH And Xamdavao.  If you want the full sample source you can check it right here LINK. enjoy coding.










2 comments:

  1. Nice blog. Thanks for sharing such great information.Inwizards Inc is a xamarin Development company offers quality xamarin development services best in web industries. Intrested click here - Xamarin Development Company , Xamarin Development For Android

    ReplyDelete
  2. Nice blog. Thanks for sharing such great information.Develop xamarin application Xamarin development services , Xamarin development company

    ReplyDelete