What's the workaround for the magical behaviour of Box inside a Row as mentioned in the source of BottomNavigationItem I'm almost done with the integration of Backdrop with Navigation rail and I want to arrange all the navigation items at the top. Currently the Navigation rail is comprised of Custom Layout in a Box in a Column where each box is one Navigation item.

Could you clarify what you mean by 'workaround' ? You can just manually use

Modifier.weight()

, that's all

BottomNavigationItem

does.

I'm already using this snippet from

BottonNavigationItem

Box(
    with(ColumnScope) {
        modifier
            .selectable(
                selected = selected,
                onClick = onClick,
                interactionState = interactionState,
                indication = ripple
            )
            .weight(1f)
    },
    alignment = Alignment.Center
) {...}

Have tried it with both

ColumnScope

and

RowScope

, nothing changes.

Is this

Box

directly inside a

Column

though? In any case this pattern is not recommended, and if you want your navigation items to only be used inside a column, you should define them as:

@Composable
fun ColumnScope.BottomNavigationItem(...) {}

So that way they can only be used inside a

Column

,and you know that the

Modifier.weight

will work correctly

Yes, they're already defined as you mentioned. I've put the code on Github, It'd be helpful if you review the code Thanks!

You should remove

with(ColumnScope)

and make :

@Composable
fun NavigationRailItem

become

@Composable
fun ColumnScope.NavigationRailItem

This didn't solve the alignment problem though. I want those items to be aligned at the top and not to distribute the entire height

Oh I see, don't use

Modifier.weight

then 🙂

And what should I use for alignment?

Modifier.wrapContentHeight(<http://Alignment.Top|Alignment.Top>)

didn't work. Also, when I remove the

weight

, the entire

navRail

is occupied by only one navigation item

I think this is because the custom layout you are using uses the maxHeight for the layout height, it might be easier to start from scratch rather than trying to modify the existing BottomNavigationItem code here

Okay. I'll try to play around and see if I could get this working. I was reusing the BottomNavigationItem code since most of the logic remains the same. Btw, using WindowAssets from accompanist-insets shows the exact opposite behaviour - the entire column collapses into a single cell

You can set the

verticalArrangement

on

Column

to define the vertical positioning of the elements

Tried that. Didn't work. The moment I remove

weight

whole column is occupied by just one element

The reason why removing

weight

will cause the first element to get all the height is simply because you size your custom

MockItem

layout to fill the available height

I've an icon and text inside custom layout. I want them to be vertically center. I'll try use sum of heights of both them

I'll try use sum of heights of both them

Right (consider you might also want padding between them)

I guess the need to write custom layout was some animation stuff (translation, color). Will try to see if that's possible with standard components instead of using a custom layout. Thanks! May I tag you if I've to ask any related question?

Yes of course, let me know how it goes

Thanks @Mihai Popa that really worked. Instead of blindly using

constraints.maxHeight

I set the

height=iconPlaceable.height+labelPlaceable.height+(2*baselineOffset)

and started placing

Placeable

s from

y=0