I updated to Compose BoM `2024.02.00` from `2023....

# compose-android

[Alvin Dizon]

I updated to Compose BoM 2024.02.00 from 2023.10.01 and the Text inside my CenterAlignedTopAppBar suddenly isn't center-aligned, has anyone experienced something similar? My code looks like this:

CenterAlignedTopAppBar(
                    colors =
                        TopAppBarDefaults.centerAlignedTopAppBarColors(
                            containerColor = LocalColors.current.container
                        ),
                    title = {
                        Column(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {
                            Text(
                                color = LocalColors.current.textTernary,
                                text = state.chatInfo?.recipientName.orEmpty(),
                                style = LocalTypography.current.title2
                            )
                            Text(
                                color = LocalColors.current.placeholderSecondary,
                                text = state.chatInfo?.displayAddress.orEmpty(),
                                style = LocalTypography.current.smallNormal,
                                overflow = TextOverflow.Ellipsis
                            )
                        }
                    },
                    navigationIcon = {
                        IconButton(onClick = onNavigationIconClick) {
                            Icon(
                                tint = LocalColors.current.textTernary,
                                imageVector = Icons.Filled.Close,
                                contentDescription = "Close"
                            )
                        }
                    }
                )

[Stylianos Gakis]

Is it that it renders too far to the right, since the X button is there but there is nothing on the right side?

[Stylianos Gakis]

Looks like you are hitting https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]82?q=if%20(baseX%20%3C%20navigationIconPlaceable.width)%20%7B this path, where the title is moved to the right to accommodate for the fact that the title would not fit at the center and it would like to go over the X button too.

I would suggest that you add an action on the right too (even if it’s just invisible), to hopefully constrain it to the middle by squishing it on both sides.
It looks like https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]50?q=if%20(baseX%20%3C%20navigationIconPlaceable.width)%20%7B these lines should in fact make this possible.

Give it a shot

[Stylianos Gakis]

So give something like this a shot perhaps

CenterAlignedTopAppBar(
  colors =
  TopAppBarDefaults.centerAlignedTopAppBarColors(
    containerColor = LocalColors.current.container,
  ),
  title = {
    Column(
      modifier = Modifier.fillMaxWidth(),
      horizontalAlignment = Alignment.CenterHorizontally,
    ) {
      Text(
        color = LocalColors.current.textTernary,
        text = state.chatInfo?.recipientName.orEmpty(),
        style = LocalTypography.current.title2,
      )
      Text(
        color = LocalColors.current.placeholderSecondary,
        text = state.chatInfo?.displayAddress.orEmpty(),
        style = LocalTypography.current.smallNormal,
        overflow = TextOverflow.Ellipsis,
      )
    }
  },
  navigationIcon = {
    IconButton(onClick = onNavigationIconClick) {
      Icon(
        tint = LocalColors.current.textTernary,
        imageVector = Icons.Filled.Close,
        contentDescription = "Close",
      )
    }
  },
  actions = {
    IconButton(
      onClick = {},
      modifier = Modifier.layout { measurable, constraints ->
        val placeable = measurable.measure(constraints)
        layout(placeable.width, placeable.height) {}
      }
    ) {
      Icon(
        tint = LocalColors.current.textTernary,
        imageVector = Icons.Filled.Close,
        contentDescription = "Close",
      )
    }
  }
)

[Stylianos Gakis]

Yup looks like that works from testing on some preview

[Alvin Dizon]

Oh wow that's something I haven't thought of @Stylianos Gakis, will give it a shot, thanks a lot!

[Alvin Dizon]

It worked @Stylianos Gakis, thank you very much!

[Stylianos Gakis]

No need to tag me again in a thread like this, I am already receiving notifications for all messages 😊
Glad to hear it worked!

[Colton Idle]

hm. thats funny though. i thought the whole point of the centered top app bar was to do that automatically. maybe file a bug @Alvin Dizon?

[Stylianos Gakis]

It does center it, but if it's too wide it just decides to shift it a bit to the side with the most available space so that it doesn't look super cramped in scenarios where imagine the left items are actually quite long, taking 40% of the available width. Then the bar could look something like this:
|LLLLLLCCEEEEEE|
Where L is items on the left. C the centered title. E is empty space.
In this case the centered text would be like smushed as hell.