Floating Action Buttons!

The next piece of Material Design is being added to Compass right now! It’s not done, but it made me learn how easy it is to animate layouts in Android! I’ll let you know when it’s done!


For some reason this isn’t in any of the Google support libraries despite being in the Material Design spec, so I built it myself! Next up: icons!


Update 2: icons weren’t next, but I limited the popup to 5 items, and ranked them based on which ones are most used.

Update 3-5πŸŽ‰ :

IT’S DONE! I could maybe fine tune it a bit, but it’s 99% there, and in software development, that means it’s finished! I added animations, fixed bugs in the ranking, added contextual actions and icons, and there’s now a popup in case the menu goes over 5 items (to allow for landscape mode). This would have taken a quarter of the time had it all been implemented in the Google libraries from the get go. It’s in the Material Design specs, but it’s not in the android support libraries πŸ€”.

3 thoughts on “Floating Action Buttons!

  1. PantsStatusZero says:

    From a user experience standpoint, you probably don’t want the add goal buttons to be different colors (besides the actually plus button that one is fine to be a different color.) Reason 1) The human brain perceives similar things to be of one group. In this case addible things. Reason 2) You’re using the combo red, yellow-orange, and green other places in the app to tell a different story. Having your goal button using that same combo may confuse that story.

  2. JCLaHoot says:

    They actually have the same exact colours and functionality as the circles in the main layout itself, but the floating action button needs a slightly more specific icon, and I need that icon to change contextually. I wasn’t sure what colours to use otherwise, because I feel like it might confuse with the colours I’m already using, but It’s definitely something to look out for and ask people about. I based myself on the Google Fit and Inbox design for this, and eventually I might even accept photos as the icons for some things… The point of the floating action button here though is that it’s easier for muscle memory to find the add data buttons if they’re always in the same place, or if eventually I let people nest their data points

  3. PantsStatusZero says:

    I’d just use the darker green for them. That way they similar but different enough for the user to wonder why the floating action button they just added isn’t green. The hope being that they then naturally click the new added floating things. lol It would also semi-reinforce that it’s green when the goal is reached. Sidenote: I do like the floating buttons they are SUPER COOL!

Leave a Reply