Search code examples
appceleratortitanium-mobile

Custom Floating Buttons in Titanium


My app design has two round buttons sitting on top of a map view. I want to achieve this with Titanium / Alloy (pure Titanium is fine too) but nothing has come up in the docs. How can I create floating buttons? E.g. how can I create buttons that sit on top of another view?

On that same note I wanted to add custom behavior when I tap the button. I wanted four more buttons to fan out from the top button across the view making a slight arc and dim the screen.


Solution

  • You can use:

    • zIndex
    • add the view at the end of your XML

    An example of a Floating Action button with a custom menu is available at https://github.com/k0sukey/be.k0suke.tifab

    Place the menu items at the same position as the collapsed button. When you click the button you show them and move them to the desired position (Ti.UI.createAnimation()). To fade out the background you create a fullscreen view with backgroundColor: "rgba(0,0,0,0.5" which is invisible at first and when you click the menu button you fade it in or just set it to visible.