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 46eea23c96f45f0ee1e57d8aef2f1375507b0dec
Author: José Figueroa Santos <serniebanders@google.com>
Date: Tue Apr 11 14:38:58 2023

[M3][ModalBottomSheet] Enable edge to edge functionality for ModalBottomSheet

Bug: 274872542
Bug: 272973615
Bug: 272334475
Bug: 268432129
Bug: 275849044
Bug: 275486106
Bug: 268433162
RelNote: Add window insets parameter to ModalBottomSheet.
RelNote: Scrim for ModalBottomSheet may now be drawn behind status bar with windowInsets set to zero
RelNote: Updated default ModalBottomSheet functionality to stay outside of system bars including navigation
RelNote: Status bar inset handling is provided by drag handle in edge-to-edge mode.
RelNote: BottomSheetDefaults includes window insets for BottomSheetWindow.
Test: Parameterizes existing tests to work with and without edgeToEdge enabled.
Test: Manual EdgeToEdge testing on various devices and android APIs
Change-Id: I312008e48573ebd21326f77216be0bcd0372aa78

M compose/material3/material3/api/public_plus_experimental_current.txt
M compose/material3/material3/samples/src/main/java/androidx/compose/material3/samples/BottomSheetSamples.kt
M compose/material3/material3/src/androidAndroidTest/kotlin/androidx/compose/material3/ModalBottomSheetTest.kt
M compose/material3/material3/src/androidMain/kotlin/androidx/compose/material3/ModalBottomSheet.android.kt
M compose/material3/material3/src/androidMain/kotlin/androidx/compose/material3/Strings.android.kt
M compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/SheetDefaults.kt

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

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

Tested with 1.2-alpha02. There are some improvements but the cases still all have problems.

Pixel 4a landscape is not clipping the bottom of the sheet anymore, but a white box is appearing on the right side of the screen the size of the system navigation buttons when not using gesture navigation.

Pixel C API33 emulator in landscape the bottomsheet is now sized so all the items would be visible, IF it was appearing over top the system navigation bar, but the bottom is behind it still in that tablet case. On a Pixel C API29 emulator in landscape the bottomsheet appears on top of the system navigation bar, but taps are not being recognized on that are. (don't have samsung s5e tablet with android 9 to test right now)

in the sample and our usage, we are not using edge to edge mode or full scaffold infrastructure (actual app usage is with a ComposeView thats not full screen)

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

>>>> Pixel 4a landscape is not clipping the bottom of the sheet anymore, but a white box is appearing on the right side of the screen the size of the system navigation buttons when not using gesture navigation. <<<<

This is really a big problem. So unfortunately we cannot use the ModalBottomSheet productively yet.
When can we expect a correction?

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

Marked as fixed.

upgraded to compose bom 2023.09.00. The right side no scrim issue is still there. Tested with Samsung m21 Android 13

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

Any updates on this?