Following up to my previous post, this post focuses on implementing buttons based on Google's Material Design. One specific button type - floating action buttons (FAB) interested me the most among all the different types as they help save some real estate, especially for mobile apps.
Reading through the design specifications for FABs, they can be summarized as:
- A FAB represents the primary action of a screen
- When pressed, a FAB can display/emit 3 to 6 related actions in the form of a speed dial
- The speed dial actions close when a user taps the FAB again or anywhere else on the screen
Based on these specifications, here is the approach that I followed which explains how I started off with a very simple design. If you want to know how the smooth transition was achieved, you can skip to point #5.
- My first goal was to have a very simple button (lets call it the primary button) that makes other buttons (secondary buttons) visible. I placed all the buttons where I would like them.
- I then set a variable (let's call it menuVar) to true in the OnSelect property of the primary button and set the Visible property of the secondary buttons to that variable.
- I also added another button right where the primary button was to be used as a button to hide the secondary buttons. The OnSelect of this button was used to set the variable to false and the Visible property was set to the same variable (menuVar). The Visible property of the primary button was set to !menuVar
- This achieved the basic design but it did not look pretty. The secondary buttons would just show up when the primary button was clicked and then suddenly disappear when the button mentioned in step 3 was clicked.
- The specifications talk about the secondary buttons slowly transitioning in and out. To achieve this, I decided to use timers.
- The basic idea was pretty simple - picking one secondary button as an example, I set the starting position of the secondary button same as the primary button (Y=800 as an example). Also, I wanted it to move above by 100.
- To achieve the smooth transition of this button from Y=800 to Y=700, I set the Y property of this button to: 800-100*(Timer.Value/Timer.Duration). When a user clicks on the primary button, it starts the timer, for which the duration was set to 500). As the timer starts, Timer.Value changes from 0 to 500 which in turn changes the Y position of the secondary button from 800-100*0=800 to 800-100*1=700.
- I then added another time to achieve the smooth transition the other way round as well i.e. to hide the secondary buttons.
- This logic was repeated for every secondary control and the desired outcome was achieved!
Sharing the code here would have made this post way more complicated. I will be sharing the app in the Power Apps community and will update this post with a link to the app. Until then, here is a working demo of the solution (it includes the other controls as well that I have modified per Google's Material Design - text fields and tooltips):
Hopefully, my series of posts on Google's Material design will inspire you to achieve beautiful, more customizable controls using standard Power Apps controls!
Have fun! Get addicted!