Creating a Floating Action Button in Tabris.js

Ever since its introduction at Google IO 2014, material design guidelines have gained more and more traction in the web and mobile landscape. Android has adopted the design style and more and more Google properties are moving in that direction.

With the release of Tabris.js 1.7 we made it much simpler to create one of the most iconic material design components: the “Floating Action Button” (FAB). The FAB is used in places where a screen has one clear primary action that the user usually invokes.

Where Tabris.js required you to work with a custom image in the past, you can now use the newly introduced cornerRadius. Combined with elevation and highlightOnTouch, it allows you to create a native FAB with ease.

Floating Action Button

The following snippet shows you how to create a native FAB with Tabris.js API:

new tabris.ImageView({
  right: 16, bottom: 16, width: 56, height: 56,
  elevation: 6,
  cornerRadius: 28,
  highlightOnTouch: true,
  background: "#009688",
  image: {src: "icon.png", width: 24, height: 24}
}).on("touchstart", (imageView) =>
    imageView.animate({transform: {translationZ: 6}}, {duration: 100, easing: "ease-out"}))
  .on("touchend", (imageView) => 
    imageView.animate({transform: {translationZ: 0}}, {duration: 100, easing: "ease-out"}))
  .on("tap", () => console.log("fabulous"))
  .appendTo(page);

The visuals are easy to cover with a couple of properties. You can also add the typical interactive behavior with the translationZ animation.

We hope you enjoy this little material design snippet. If you want more of the same kind, check out how to style a material design TabFolder in Tabris.js. Dozens of other snippets for both Android and iOS can be found on Tabris.js website.

Happy developing!

5 Comments
  • sand123
    Posted at 13:35, 2016-04-07

    Great! May be it would be better to wrap this snippet in some kind of standard widget?
    new FloatingButton({
    image: ‘string’, handler: function(){}
    })

    • Gosia Mitros
      Posted at 14:44, 2016-04-08

      @sand123 Thanks for your feedback. We’ll consider revising it and making it into a separate widget 🙂

  • Rick
    Posted at 06:44, 2016-04-08

    Is there any way to get it to work on <5.0? Depending on which stats you look at only 40-50% of Android users are running 5.0+ so about half the users would see this:

    https://i.imgur.com/CxgVnki.png

    • Gosia Mitros
      Posted at 14:46, 2016-04-08

      @rick Unfortunately not for now, because we use an Android 5+ property to control cornerRadius. We’ll see about making it degrade nicer on earlier versions.

  • Moritz Post
    Posted at 17:26, 2016-04-08

    @Rick If you can live with some lost visual fidelity you could use a circular image as the buttons background.