https://kotlinlang.org logo
#compose
Title
# compose
j

Joseph Hawkes-Cates

12/07/2021, 2:58 PM
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 🧵
This is what it looks like on the phone
Weird colors for debugging purposes
I have this code for it:
Copy code
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
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
z

Zoltan Demant

12/07/2021, 3:15 PM
You use
modifier
on your Text, could you link what it is?
🙌 1
j

Joseph Hawkes-Cates

12/07/2021, 3:16 PM
Oh no… 🤦
That’s the problem
z

Zoltan Demant

12/07/2021, 3:17 PM
🦜
j

Joseph Hawkes-Cates

12/07/2021, 3:17 PM
modifier = Modifier.statusBarPadding()
modifier vs Modifier strikes again!
Thanks! I’m the only Android dev on my team right now, so don’t have anyone else to find stuff like that.
z

Zoltan Demant

12/07/2021, 3:18 PM
Happy to help! 😊
j

Joseph Hawkes-Cates

12/07/2021, 3:19 PM
I know the pattern is to have a “modifier” argument, but might start calling that something more specific to avoid this issue.
s

Stylianos Gakis

12/07/2021, 3:31 PM
IMO, no don’t name it something else, every other dev that might get into the codebase will then find it really weird.
j

Joseph Hawkes-Cates

12/07/2021, 3:33 PM
Yeah, that’s fair. Just have to remember to double check all my modifiers going forward