https://kotlinlang.org logo
#compose-android
Title
# compose-android
a

Alvin Dizon

02/23/2024, 8:19 AM
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:
Copy code
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"
                            )
                        }
                    }
                )
s

Stylianos Gakis

02/23/2024, 8:23 AM
Is it that it renders too far to the right, since the X button is there but there is nothing on the right side?
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
So give something like this a shot perhaps
Copy code
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",
      )
    }
  }
)
Yup looks like that works from testing on some preview
a

Alvin Dizon

02/23/2024, 9:15 AM
Oh wow that's something I haven't thought of @Stylianos Gakis, will give it a shot, thanks a lot!
It worked @Stylianos Gakis, thank you very much!
🌟 1
s

Stylianos Gakis

02/23/2024, 9:37 AM
No need to tag me again in a thread like this, I am already receiving notifications for all messages 😊 Glad to hear it worked!
c

Colton Idle

02/24/2024, 10:05 PM
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?
s

Stylianos Gakis

02/25/2024, 8:56 AM
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.
👍 1
6 Views