How do I implement a custom bottomnavigation like this

Issue

I need to implement a custom bottomnavigation like in the image. My peculiar issue is that when a menu item from the bottomNav is clicked the bottomnav has to reposition the text above and add an image of a dot below it like as shown in the image.

This means that small solutions to selected state like using a custom selector cannot solve this.

Is there a way to inflate a selected layout to show how the bottomNav should look when selected? What methods or other ways do you suggest I tackle this issue?

Solution

Ah! Totally forgot to answer this after I solved it.

I was initially showing an Icon and label combination in the bottomnavigation. I was looking for a way to hide the icon on click and show a dot on the bottom which was the wrong way to go and would be complex.

I ended up adding the icon and label as a group drawable vector instead of individually. So for each bottomnavigation option, I had a drawable selector xml with state for selected and unselected.

Answered By - Robin