Cross-Platform Floating Action Button/Menu

PolartsPolarts USMember ✭✭

Hello everyone!

I've been working on a Cross-Platform XAML Floating Action Button, as well as a Floating Action Menu consisting of nested buttons. It's meant to resemble the built-in control in Android it was named after.

The button alone works perfectly on both platforms and looks neat, but the menu's child-buttons do not respond to clicks for some reason.
Can anyone please help me figure out what the problem is and think of a solution?

You are welcome to peek at my code here. It's free for anyone to use and edit as you wish :)

Thank you!

Posts

  • PolartsPolarts USMember ✭✭

    I've discovered the problem and come up with a solution. The problem was mainly because I used a negative Y value for the child-buttons, so they appeared as "out of bounds" and weren't interactable.
    My solution: Rotate the parent container and all its children by 180 degrees and stretch the parent container over the entire screen's height. This is so far the only way to achieve it. I've updated the GitHub Repo so that you can use the version that works properly.

    Still, if there's anyone who has a better idea of how to solve it, I'd appreciate you sharing it.

  • We only need to fix this bug caused by clicking on the menu icon and the menu does not close automatically, congratulations, you did a good job so far.

    I am analyzing here how we can solve this problem.

  • PolartsPolarts USMember ✭✭
    > @Anderson_Vieira said:
    > We only need to fix this bug caused by clicking on the menu icon and the menu does not close automatically, congratulations, you did a good job so far.
    >
    > I am analyzing here how we can solve this problem.

    Thank you for nothing another bug and looking into it!

    So far I've thought of this: we can make a boxview that spans all over the page and dims the background once the menu opens. It can be triggered with the ExtraCommand, and you can add a TapGestureRecognizer to it that would collapse the menu once clicked.

    However, this is a little clanky since the navigation bar will not be dimmed and it may seem confusing for the user. If you have a better solution please share it.
  • @Polarts I still can not understand very well how you did without using a native renderer, looking at other examples with the floating button, native renderers were used by apple / android platform.

    In fact, my goal is to come up with something like this:
    https://github.com/pedrovgs/DraggablePanel/raw/develop/art/screenshot4.gif

    Original source: https://github.com/NAXAM/draggablepanel-android-binding

    For your controller I'm trying to drag and get close to it, I did not find anything similar made with xamarin forms, but I do not know what it is possible to do, except that there are no tutorials yet.

  • It has a very interesting project that I am analyzing to see how we can reach a result:

    https://github.com/arqueror/Xamarin.Forms-RadialMenu

  • danyliesdanylies Member
    edited October 2018

    how to put floating button text or button title?

  • PolartsPolarts USMember ✭✭
    edited October 2018
    @Anderson_Vieira those are very interesting projects actually, thanks for sharing them! I will definitely try to create a floating panel, seems like an interesting challenge. As of the animated button, it's actually easy to do but the code is somewhat cumbersome for animations and position calculation.
    My policy is always Xamarin first, avoiding any renderers while it's possible. So far it seems like nothing is impossible with Xamarin.
    For my implementation I use a Grid main layout and an AbsoluteLayout spanning on the whole right column. To avoid using negative y values, I rotated the AbsLayout 180 and then each button 180 to align them. Had to do that because negative position values prevent buttons from being clicked. You can see my latest app at http://BookSmarksApp.com with the final implementation. I'll update the GitHub project as soon as I find the time.

    @danylies I'll add that feature soon. You can try to fork the project and play with it yourself, everything is open source.
  • XamITXamIT USMember ✭✭

    Hi @Polarts , what a wonderful code.
    I have opened an issue in your git repo https://github.com/PolarBearOC/CorssFAB/issues/1

    Your help will be appreciated.
    Thanks

  • NMackayNMackay GBInsider, University mod
  • PolartsPolarts USMember ✭✭

    @XamIT I've replied to your issue on GitHub, we'll discuss it there.

    @NMackay Actually it's a very similar approach. We both use a view to contain the button and push it to where we want it to be. However, I managed to create an animated menu which is what makes my solution different.

Sign In or Register to comment.