Increase Size of Selected Bottom Navigation Item

Question

I have implemented a BottomNavigationBar with Jetpack Compose (5 icons, label is only shown when item is selected). As per 1 requirement, I need to increase the width of the selected bottom navigation item (NOT the icon of the item, but the entire item).

So instead of all bottom navigation items having the same width:

I need the selected item to have twice the size of the other not selected items and the width of the not selected items needs to be decreased:

Any tips on how I could achieve this in Jetpack Compose? I've already tried increasing/decreasing the size of the bottom navigation item using a modifier on the BottomNavigationItem Composable but this did not change the size at all.

Answer 1

The BottomNavigationItem is a Box with .weight(1f) (source code with 1.0.0).

To double the size of the selected item, you can apply something like:

        BottomNavigationItem(
            //..
            modifier =
                Modifier.then(Modifier.weight(
                    if (selectedItem == index) 2f else 1f
                ))
        )

It is important the use of the then modifier to apply the double weight in the right sequence.