Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the distance between 2 or more Floating Action Button?

I have added 2 FAB on my app (like Google Maps app, see screenshot below) and i was wondering if there is a specific distance to be respected between the 2 FAB (from a Google Design Pattern, docs, bible or whatever) or whether it is the developer who decides this distance between those buttons.

enter image description here

like image 638
JJ86 Avatar asked Feb 11 '15 11:02

JJ86


1 Answers

Looking at the Google developer documents on the FAB there is no definitive answer for spacing between FAB's but it states that

The floating action button should be placed 16dp min from the edge on mobile and 24dp min on tablet/desktop.

Knowing this you can space the buttons accordingly, using the the 16dp/24dp rule.


On a side note.

When I was working with the Google Play Editorial Board while preparing my app for feature, they specified that FAB's should be limited to one per screen. If you do need more than one maybe create a expanding menu. Something like this

enter image description here

like image 105
the-ginger-geek Avatar answered Nov 15 '22 10:11

the-ginger-geek