Creating a Floating Action Button in Tabris.js

Moritz Post
April 7, 2016 | 2 min Read

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.

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!

Moritz Post