Bottom App Bar (Design Ideas)

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.

blocks
here is the link https://x.thunkable.com/projects/5d88503e01130e5836421d23/851e853a-4eb3-4299-8814-0a379e129063/designer

Happy Thunking!

2 Likes

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!

2 Likes

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

%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5

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

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.

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

%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5

1 Like