I’m seeing a weird layout issue with the TopBar of one of my views and I’m stumped as to how to fix ...

# compose

[Joseph Hawkes-Cates]

I’m seeing a weird layout issue with the TopBar of one of my views and I’m stumped as to how to fix it at this point. Code and screenshots in 🧵

[Joseph Hawkes-Cates]

This is what it looks like on the phone

[Joseph Hawkes-Cates]

Weird colors for debugging purposes

[Joseph Hawkes-Cates]

I have this code for it:

Scaffold(
        modifier = Modifier.statusBarPadding(),
        topBar = {
            Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.background(Color.Gray)) {
                Text(
                    text = stringResource(R.string.recoverAccount_title),
                    textAlign = TextAlign.Center,
                    style = MaterialTheme.typography.h6,
                    color = MaterialTheme.colors.onHeader,
                    modifier = modifier.weight(1f).background(Color.Red)
                )
                IconButton(
                    onClick = { viewModel.onNavigateBack() },
                    modifier = Modifier.background(Color.Blue)
                ) {
                    Icon(
                        imageVector = Icons.Filled.Close,
                        contentDescription = stringResource(R.string.recoverAccount_closeEmailSent),
                        tint = MaterialTheme.colors.onSurface
                    )
                }
            }
        }
    ) {
// The screen content
}

[Joseph Hawkes-Cates]

This lays out the way I expect it to in the preview, but on my phone which is a Pixel 6 running Android 12, it is looking like the picture above

[Joseph Hawkes-Cates]

Here is what the preview looks like and what I’m wanting it to look like

[Joseph Hawkes-Cates]

I can’t figure out why the Row height is so much more on the phone and why the Text is not Centered

[Joseph Hawkes-Cates]

I actually need to use a Box instead of a row so the text is in the Center of the screen instead of the center of it’s space, but I still have the same height issue when using a Box

[Joseph Hawkes-Cates]

I tried a Row just to see if it would behave differently, though

[Zoltan Demant]

You use modifier on your Text, could you link what it is?

[Joseph Hawkes-Cates]

Oh no… 🤦

[Joseph Hawkes-Cates]

That’s the problem

[Zoltan Demant]

🦜

[Joseph Hawkes-Cates]

modifier = Modifier.statusBarPadding()

[Joseph Hawkes-Cates]

modifier vs Modifier strikes again!

[Joseph Hawkes-Cates]

Thanks! I’m the only Android dev on my team right now, so don’t have anyone else to find stuff like that.

[Zoltan Demant]

Happy to help! 😊

[Joseph Hawkes-Cates]

I know the pattern is to have a “modifier” argument, but might start calling that something more specific to avoid this issue.

[Stylianos Gakis]

IMO, no don’t name it something else, every other dev that might get into the codebase will then find it really weird.

[Joseph Hawkes-Cates]

Yeah, that’s fair. Just have to remember to double check all my modifiers going forward