Fancy way to create this BottomNavigationView

How to create Center button in BottomNavigationView?

We were working on a project where our designer created this bottom navigation view. As you can see it looks like a default navigation view, works like a default navigation view but it isn’t actually. So what’s the difference between this yellowish-changing-beautiful navigation view than default one?

• It doesn’t have selected tint color instead it has selected icon states.
• The heart : center add big button.

So we needed to think about it for a while. Should we use third parties library or create one for us?

Normally it’s very common whenever we found or got something different view from default design we start to look for who is offering the library to create one like this. It’s okay to not re-building the wheel and you shouldn’t ever do that. But sometimes it’s also fun creating a wheel.

So we were thinking how to do this BottomNavigationView with a big center icon without using any third parties library and figured out we can do it so we created it in our project and here is how you can do it too,

Before diving deep into the code, Let’s experience this navigation view in gif