Skip to content
Pablo Mayobre edited this page Mar 25, 2015 · 3 revisions

Floating Action Buttons

Floating Action Buttons are the most important buttons in Material-Design, they are used to highlight the most important action in the whole activity.

FABs Buttons

They are just a circle with an icon, but they also have shadows.

Since shadows are rather expensive on the hardware, the libraries provide preset assets for circles with shadows.

What does the FAB lib do?

Well the FAB lib is intended to create those circles with shadows. It has 5 levels of Z-Depth (just like the Shadow library):

Z-Depth images

How do I use the FAB lib?

Using this lib is pretty straight forward, first require the fab.lua into your project:

local fab = require "material-love.libs.fab"

The API is the same as with circles, except that it doesn't require the first parameter (Draw Mode):

fab(x,y,radius,depth)

Here depth is the Z-Depth, that, as said before, should be a value from 1 to 5 (Floating point values are not valid).

If the radius value is nil it will default to 28 which is the default for a FAB button, if it is "mini" then it will be 20.

The color used to draw the FAB button is the one set with love.graphics.setColor()

Note: You should take into account that this lib first draws a white background for the circle, so it will delete the content behind it. if you want to draw something on top try using a stencil and canvas to do so.

Icons

FAB doesnt take care of the icon by itself, read the documentation for Icons and DrawIcons in order to know how to get an icon on top of your FAB Button.

Files

This files are required in order to use the FAB lib in your project, be sure to have them all

  • libs/fab.lua
  • assets/fab-1.png
  • assets/fab-2.png
  • assets/fab-3.png
  • assets/fab-4.png
  • assets/fab-5.png
Clone this wiki locally