Bottom App Bar (Design Ideas)

[junjoseph]

Hi All Thunkers!

Just got the Ideas for your app that maybe this will help. You can copy this be creative!

Design UI

• Shadow - a small detail but it has a big impact to create beautiful designs like modern design today.
• Border - every button has a border with a width = 8
• Hamburger (menu) - if you have other functions for the future. Any options like log-out or move to other account settings it good in here.
• Button - a perfect circle. Change to border radius = 100
• THE SECRET - to achieve this design. There is 3 hidden rows below the violet bottom app bar
  not literal hidden just change the height = absolute size put 0
  Vertical alignment = bottom
  Horizontal alignment = right
  Margin = 20 px

This two design is to show the before click icon button to after click icon button

For the animation of the button menu
I add 0.03 seconds for a smooth transition or a little animation for the two button.

Tips!
you can replace each icon for your desired like for example the person icon change it to plus (+) icon when click replace it to back (x) to understand by the user when navigating the option button.

here is the link Thunkable

Happy Thunking!

[domhnallohanlon]

Great idea @junjoseph - thanks for sharing. I really like the animation effect you’ve created.

If you want to post this in the #thunkable-cross-tutorials section however, would you mind adding some screenshots and an explanation of the blocks so that others in the community can learn from this?

Thanks!

[actech]

An interesting solution, but there is a small nuance in the lower left corner when hide buttons.

[junjoseph]

yes I found that bug in my design and I don’t know where that from.

[BlueWhaleYT]

What if set the purple bar left margin to be -XX px (e.g. -30px) and set the hamburger’s left margin to 20px,see whether will it exist.

[actech]

Visibility is necessary to change the row, in which there are buttons.