Bubble Bottom Navigation Bar like in flutter

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

Screenshot_2020-09-19 Kodular Creator

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 : 0

Remember : 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.

13 Likes

Great work @zainulhassan!
Looks really nice. :+1:

2 Likes

@zainulhassan Very Nice !! Looks Great !! :+1:t2: :+1:t2:

1 Like

@zainulhassan

Nice Tutorial.

Can you post Video ?

2 Likes