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-master-dev

commit c60f33e229e31ab328ef6b59dab63b264954831c
Author: Alexandre Elias <aelias@google.com>
Date: Fri Jul 10 16:23:09 2020

Semantics no-op cleanups

Partly in response to lmr's broad code review, I did a pass of
superficial API/implementation cleanup. The main changes are:

- I changed each Boolean SemanticsProperty where false is equivalent to
not being present to take "Unit" instead. This is conceptually
clearer: it avoids questions like "can I cancel out a semantics from a
merged child by setting it to false?" Because "property = Unit" looks
weird, I also changed the style of these to "property()".

- I moved the Semantics id generator closer to where it's used, in
SemanticsModifierCore. I made it internal and an AtomicInt.
(Note that integer ids are heavily used in the Android
AccessibilityNodeInfo APIs so I can't simply remove them entirely.)

- I deleted dead code. Some examples include SemanticsHintOverrides,
a public API not connected to anything, and SemanticsPropertyKey
merge() open method which is never called. (In both cases I have
a different plan in mind for accessibility.)

Fixes: 145951226
Fixes: 145955412
Test: existing tests
Relnote: "Single-value semantics properties now use a calling style.
For example, 'semantics { hidden = true }' is now written as:
'semantics { hidden() }'."

Change-Id: Ic1afd12ea22c926babc9662f1804d80b33aa0cfc

M ui/integration-tests/benchmark/src/androidTest/java/androidx/ui/benchmark/test/LayoutNodeModifierBenchmark.kt
M ui/ui-core/api/0.1.0-dev15.txt
M ui/ui-core/api/current.txt
M ui/ui-core/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-core/api/public_plus_experimental_current.txt
M ui/ui-core/api/restricted_0.1.0-dev15.txt
M ui/ui-core/api/restricted_current.txt
M ui/ui-core/src/androidAndroidTest/kotlin/androidx/ui/graphics/vector/VectorTest.kt
M ui/ui-core/src/androidAndroidTest/kotlin/androidx/ui/semantics/SemanticsTests.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidActuals.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidComposeView.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidComposeViewAccessibilityDelegateCompat.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidPopup.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/Expect.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsConfiguration.kt
D ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsHintOverrides.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsModifier.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsNode.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsOwner.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsWrapper.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/semantics/SemanticsProperties.kt
M ui/ui-foundation/api/0.1.0-dev15.txt
M ui/ui-foundation/api/current.txt
M ui/ui-foundation/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-foundation/api/public_plus_experimental_current.txt
M ui/ui-foundation/api/restricted_0.1.0-dev15.txt
M ui/ui-foundation/api/restricted_current.txt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Clickable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Dialog.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Scroller.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/selection/Selectable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/selection/Toggleable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/semantics/FoundationSemanticsProperties.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ButtonTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/CardTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/CheckboxScreenshotTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/RadioButtonScreenshotTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ScaffoldTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/SnackbarTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/SurfaceTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ripple/RippleIndicationTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/textfield/TextFieldScreenshotTest.kt
M ui/ui-material/src/main/java/androidx/ui/material/AppBar.kt
M ui/ui-material/src/main/java/androidx/ui/material/TextFieldImpl.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/AssertsTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/CallSemanticsActionTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/ErrorMessagesTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/FindersTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/PrintToStringTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/ScrollToTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/TextActionsTest.kt
M ui/ui-test/src/main/java/androidx/ui/test/Actions.kt
M ui/ui-test/src/main/java/androidx/ui/test/Filters.kt
M ui/ui-text/api/0.1.0-dev15.txt
M ui/ui-text/api/current.txt
M ui/ui-text/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-text/api/public_plus_experimental_current.txt
M ui/ui-text/api/restricted_0.1.0-dev15.txt
M ui/ui-text/api/restricted_current.txt
M ui/ui-text/src/commonMain/kotlin/androidx/ui/text/CoreTextField.kt
M ui/ui-text/src/commonMain/kotlin/androidx/ui/text/TextSemanticsProperties.kt

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

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

I can confirm. The problem is caused by the following piece of code, which calculates the maximum title width, but that does not behave correctly when:

the title is centered, and
the navigation icon and the actions have different widths (in the original description of the issue, navigationIcon and actions would have, respectively, (size of icon) and 0px widths)

val maxTitleWidth = if (constraints.maxWidth == Constraints.Infinity) {
    constraints.maxWidth
} else {
    (constraints.maxWidth - navigationIconPlaceable.width - actionIconsPlaceable.width)
        .coerceAtLeast(0)
}

The space used up on the left (navigationIcon) might be different than that used up on the right (actions). The title's maximum title width, therefore, should be such that a slightly wider title would intersect one of navigationIcon or actions. This can be achieved by applying this simple patch to the androidx/compose/material3/AppBar.kt file:

@@ -1300,6 +1300,9 @@ private fun TopAppBarLayout(
 
         val maxTitleWidth = if (constraints.maxWidth == Constraints.Infinity) {
             constraints.maxWidth
+        } else if (titleHorizontalArrangement == Arrangement.Center) {
+            (constraints.maxWidth - 2 * max(navigationIconPlaceable.width, actionIconsPlaceable.width))
+                .coerceAtLeast(0)
         } else {
             (constraints.maxWidth - navigationIconPlaceable.width - actionIconsPlaceable.width)
                 .coerceAtLeast(0)

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

Thanks for reporting this one, and thanks for the fix suggestion! Looks like the suggested fix works well. Since it will always try to center the title, it will also trim from the opposite site as well, which makes the visible title area smaller the more actions you have. We will apply a fix where we give some precedence to the title text over the center location. If the text is too long to be centered as a whole, we will shift it to fit as much as possible.

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

Marked as fixed.

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

commit 9f16ee04a9053a6028ffc90f152c1608cfeea8ae
Author: Shalom Gibly <sgibly@google.com>
Date: Mon Jun 05 18:52:14 2023

Fix the center top app bar alignment

Fix the alignement of the center top app bar to ensure its title does
not render over the icons when it's very long and the width of the
action icons is different than the width of the navigation icon.

This fix gives priority to the title's text display and shifts the title
from its center position as needed to show as much text as possible.

Fixes: 236994621
Test: AppBarTest & manual on LTR and RTL layouts
Relnote: "Fix the alignement of the center top app bar to ensure that a
long title doesn't render over the action icons or the navigation icon."

Change-Id: I4369f6c51c711129bb30b1de58684131b02499ae

M compose/material3/material3/src/androidAndroidTest/kotlin/androidx/compose/material3/AppBarTest.kt
M compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/AppBar.kt

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

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

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

androidx.compose.material3:material3:1.2.0-alpha03
androidx.compose.material3:material3-android:1.2.0-alpha03