CenterAlignedTopAppBar title overlaps icons (Material3) [236994621]

Fixed

Bug

Status Update

No update yet.

Description

ja...@appsfactory.de

created issue #1

Jun 24, 2022 07:45AM

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.

Fri Jun 24 2022 09:34:03 GMT+0200 (Mitteleuropäische Sommerzeit).png

59 KB

View

Download

Comments

ja...@appsfactory.de <ja...@appsfactory.de> #2Jun 24, 2022 08:00AM

Project: platform/frameworks/support
Branch: androidx-main

commit e40004b9e772b5e4e66a8dcdc3d2e2a1628108ad
Author: José Figueroa Santos <serniebanders@google.com>
Date: Tue Mar 21 14:39:09 2023

[M3][BottomSheetScaffold] Adds Hidden state boolean flag to sheet state.

This enables standardBottomSheet to implement a fully Hidden state should the user choose to.

Additionally adds documentation to SheetState.requireOffset(), and updates BottomSheetDefaults.MinimizedShape -> BottomSheetDefaults.HiddenShape

Bug: 274463511
Bug: 273870234
Test: Tests updated Hidden functionality for BottomSheetScaffold
Test: Preserves existing unit tests where Hidden state does not exist
RelNote: SheetState now has optional skipHiddenState parameter
RelNote: rememberStandardBottomSheetState now has optional skipHiddenState parameter
RelNote: BottomSheetScaffold now has a defined Hidden anchor, though it is disabled by default
RelNote: SheetState.requireOffset documentation has been updated
RelNote: BottomSheetDefaults.MinimizedShape has been renamed as BottomSheetDefaults.HiddenShape
Change-Id: I839f464c556eafb1b6fd823134da46943475919d

M compose/material3/material3/api/public_plus_experimental_1.1.0-beta01.txt
M compose/material3/material3/api/public_plus_experimental_current.txt
M compose/material3/material3/src/androidAndroidTest/kotlin/androidx/compose/material3/BottomSheetScaffoldTest.kt
M compose/material3/material3/src/androidAndroidTest/kotlin/androidx/compose/material3/ModalBottomSheetTest.kt
M compose/material3/material3/src/androidMain/kotlin/androidx/compose/material3/Strings.android.kt
M compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/BottomSheetScaffold.kt
M compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/ModalBottomSheet.kt
M compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/SheetDefaults.kt
M compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Strings.kt
M compose/material3/material3/src/desktopMain/kotlin/androidx/compose/material3/Strings.desktop.kt

https://android-review.googlesource.com/2500395

tr...@gmail.com <tr...@gmail.com> #3Sep 9, 2022 03:40PM

Resolved as of next release. Please note the default behavior for BottomSheetScaffold will still be to not allow Hidden value, but this can be overriden with a new flag for the State object. This is because StandardBottomSheet by design should generally coexist with the UI, in a Partially or fully expanded state.

co...@google.com <co...@google.com> Sep 9, 2022 06:42PM

Reassigned to sg...@google.com.

sg...@google.com <sg...@google.com> Jun 5, 2023 10:05PM

Accepted by sg...@google.com.

sg...@google.com <sg...@google.com> #4Jun 6, 2023 03:34PM

The following release(s) address this bug.It is possible this bug has only been partially addressed:

androidx.compose.material3:material3:1.1.0-beta02

ap...@google.com <ap...@google.com> #5Jun 6, 2023 03:35PM

Marked as fixed.

I'm facing this issue again in the new version of material3 1.2.0.alpha-05, It was working fine until alpha-04 but the moment I change it to 05 the app crashes and I get this error. I am also facing this issue if I change the foundation version from 1.6.0-alpha02 to 1.6.0-alpha03

pr...@google.com <pr...@google.com> #6Jun 21, 2023 08:57PM

Same here as described in #5 the issue seems back in 1.2.0-alpha05 and was working fine on 1.2.0-alpha04 and before. However, this time it doesn't seem to be working even with the defaults (which uses PartiallyExpanded as initialState internally). I've created a new bug ticket for this: b/296707223.