Increase Size of Selected Bottom Navigation Item

user_13258270 0
Viewed 1185

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: enter image description here

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:

enter image description here

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.

android-navigation android-jetpack-compose kotlin android
1 Answers

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
                ))
        )

enter image description here

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

user_20165620
Related