Hey everyone Hope you are doing well and enjoying good health
In this guide I will show you how to make a bubble bottom navigation in kodular which is better than the builtin component. I got the idea while i was working with flutter so I thought why not make the same in kodular. So let’s start!
First we will design the Bottom Navigation. You can add more buttons in the navigation but I will use 4 buttons here.
Components
1 - First drag a Card view and set properties like this:
width : fill parent
height : auto
padding top : 4 and for rest sides set padding to zero
elevation : 0
stoke width : 1
stroke color : default
touch color : none
2- Drag a horizontal arrangement and set properties
width : fill parent
height : 10%
alignment : center (for both horizontal & vertical)
3 - drag two space and set properties
width : 5%
height : auto
4 : drag a card view between these spaces (it will be the selected button)
alignment : center for both axis
width : fill parent
height : 9%
background color : #99F3BDFF (choose a light color)
padding top & bottom : 0
padding left & right : 20
corner radius : 25
full clickable : true
elevation : 0Remember : This will be the selected button when screen is initialized
5 - Add a label for icon
font size : 32
font typeface : material icons
text alignment : center
text : dashboard (visit Icons - Material Design for more icons)
color : #212121 (selected icon color)Remember : This icon is contained in the selected button
6 - Drag card view
width : auto
height : 9%
color : white
alignment : center for both axis
padding top & bottom : 0
padding left & right : 20
corner radius : 25
full clickable : true
elevation : 0
7- Add a label for icon
font size : 24
font typeface : material icons
text alignment : center
text : search (visit Icons - Material Design for more icons)
color : #616161FF (deselected icon color)
8 - repeat step 6 & 7 to create more button
9 - Add spaces between button
width : 3%
height : auto
Now head over to block section for the functionality
Blocks
I wont explain blocks as they are really really simple
Download AIA file : BubbleBottomBar.aia (126.7 KB)
I hope you like it.
