Search code examples
c#xamarinxamarin.formsuser-experiencetabbedpage

How do I make an expanding button in xamarin.forms?


As a preface, I'd like to note that I do not have much experience in Xamarin. I am working on my first application (first one that will have a legitimate use). Instead of adding a drawer to the left side of the screen, I'd like to add a button which, when tapped reveals more buttons.

The official Reddit app on Android (maybe on iOS too) has exactly what I'm looking to implement.

I would embed images but I need 10 reputation

Imgur Album of screenshots from the official Reddit app

I would like to highlight that the button is overlayed on what seems to be a TabbedPage remains in place when scrolling through tabs. There is also an animation when the button is initially tapped which I would like to implement as well.

After some further research, I have found that it is an example of what is called a "Micro interaction". The 5th example in that article is what I'm looking for.

The purpose of this post

I want to add a button on top of a TabbedPage (so that it is persistent between tabs) which, when tapped, reveals more buttons via an animation. If possible, I would like to use as little platform specific code as possible.

As I mentioned before, I am new to Xamarin (and mobile/front-end development) so I don't even know where to start with this. If someone would be gracious enough to explain how to replicate this or even point me in the right direction that would be wonderful.


Solution

  • As Demitrian already mentioned, something like this is not in scope of Xamarin.Forms. However, there's a Xamarin.Forms library that has an implementation of a floating action button for both Android and iOS. Take a look at it here.

    If by default there's no control for what you're trying to achieve, you can create a custom renderer for each platform you want to support. Read more about custom renderers in the official documentation.

    In the case of the library I linked to, the developer created a custom iOS control by deriving from UIControl class and overriding certain methods like LayoutSubviews, TouchesBegan, TouchesEnded and so on. In the renderer he creates a new instance of that control and sets it as the native control that XF shows on iOS.

    On Android, the developer derives from the ImageButton class and goes from there. Here are the links you should check out: iOS renderer, Android renderer and the Sample project

    Please notice that the library isn't actively maintained anymore so it might require some work to get working.