A modern programming language that makes developers happier.

kotlinlang

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 :thread:

Screenshot_20211207-085634.png

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
}```

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

Screen Shot 2021-12-07 at 9.02.55 AM.png

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

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

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

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

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

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

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

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

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