IssueTracker

Jetpack Compose version: 1.2.0-rc01 Jetpack Compose component used: CenterAlignedTopAppBar Kotlin version: 1.6.21

Description

A long title in a CenterAlignedTopAppBar overlaps the icons if their with is not identical on the left (navigation icon) and right (action icons) see screenshot.

Steps to Reproduce or Code Sample to Reproduce

Create a CenterAlignedTopAppBar with only a navigation icon and no action icons and a long title.

CenterAlignedTopAppBar(
        title = {
            Text(
                text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sodales",
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        },
        navigationIcon = {
            if (navigationIcon != null) {
                IconButton(onClick = { onNavIconClick() }) {
                    Icon(
                        painter = ...,
                        contentDescription = null
                    )
                }
            }
        }
    )

Since the TopAppBarLayout calculates the max width of the title by taking the full width of the bar, substracting the width of the nav icon and the action icons, but then centers it in the bar, it will overlap either the nav icon or the action icons - whichever of the both is wider.

Solution would be to take the max width of the navigation icon and the action icons and multiply it by 2 to have the same spacing on the left and right.