Hey guys,
I love the mobile interface for Google’s Keep notes, as you can see in the attached image. I’d like to copy the + button and cut in design of the lower floating nav bar. I have no idea how this would be done - design I mean. Any help would be appreciated.
Hi @Rob_07,
this is actually doable with the help of your favorite design software. I tried it out for you;
create the shape of the tabbar in Figma, Sketch, XD or any UI software you like by subtracting the button shape from the tab rectangle.
Then, export this shape as an image and use it as a BG for the floating group that you used to make the tabbar in Bubble:
create your button by adding a group inside the tabbar floating group; style it as you like but make sure it is part of the floating group and *make image as wide as parent element" is checked.
finally, in the responsive tab, uncheck “fixed width” for the button so that the button will resize according to device width, and you’re done!
Here is how the tabbar looks and behaves (excuse the ugly design, done only for a tutorial 
)
Thank you so much for your help with this. I will try it out and let you know how I go.
I really like your search bar. Is that customized or a plug in?
Awesome, let me know if you need help implementing 
And thanks! The search bar is actually just an input field I customized to look that way.
Thanks again. Here is my attempt
Btw, how did you design that search bar with icons inside. Sorry to be a pain, I have a lot to learn
@Rob_07 Oh I am so sorry I missed the notification for your question (the tabbar is looking good btw 
)
The searchbar is just an input field with two icons stuck to either side. Both fixed width.
this is how the searchbar and the icons are configured.
