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 a330c0d3bcdd41326f37968a60e6084ad4a2e32c
Author: Chet Haase <chet@google.com>
Date: Wed Jul 05 07:26:46 2023

Convert APIs using PointF to use Float instead

PointF is a convenient mechanism for passing around x.y values
representing 2D points. But there are downsides, including:
- Converting to PointF: You may not have the data in PointF form
to begin with, so using an API which takes PointF requires converting
the data to that form (including allocating a PointF object every time)
- Mutability: Point structures can be mutated internally, causing
unpredictability in what that mutation means. Should the library
react to those changes? Ignore them? Do defensive copies (requiring
even more allocations)? Using primitive types like Float make the
behavior more obvious (by making the data inherently immutable).
- Allocations: Whenever we use object types, there are necessarily
allocations on the Java heap for them. This puts pressure on the GC
at both allocation and collection time. Given the amount of points
being passed around (especially at morph creation time, when curves
are being split and created), this causes a lot of PointF objects to
be allocated (even temporarily). Using Float avoids that problem.

Also fixed bug with unclosed paths causing discontinuity at the
start/end point.

Bug: 276466399
Bug: 290254314
Test: integration and unit tests pass
Relnote: PointF parameters changed to Float pairs
Change-Id: Id4705d27c7be31b26ade8186b99fffe2e2f8450e

M graphics/graphics-shapes/api/current.txt
M graphics/graphics-shapes/api/restricted_current.txt
M graphics/graphics-shapes/src/androidTest/java/androidx/graphics/shapes/CubicShapeTest.kt
M graphics/graphics-shapes/src/androidTest/java/androidx/graphics/shapes/CubicTest.kt
M graphics/graphics-shapes/src/androidTest/java/androidx/graphics/shapes/PolygonMeasureTest.kt
M graphics/graphics-shapes/src/androidTest/java/androidx/graphics/shapes/PolygonTest.kt
M graphics/graphics-shapes/src/androidTest/java/androidx/graphics/shapes/RoundedPolygonTest.kt
M graphics/graphics-shapes/src/androidTest/java/androidx/graphics/shapes/ShapesTest.kt
M graphics/graphics-shapes/src/androidTest/java/androidx/graphics/shapes/TestUtils.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/Cubic.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/CubicShape.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/FeatureMapping.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/FloatMapping.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/Morph.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/PolygonMeasure.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/RoundedPolygon.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/Shapes.kt
M graphics/graphics-shapes/src/main/java/androidx/graphics/shapes/Utils.kt
M graphics/integration-tests/testapp-compose/src/main/java/androidx/graphics/shapes/testcompose/DebugDraw.kt
M graphics/integration-tests/testapp-compose/src/main/java/androidx/graphics/shapes/testcompose/ShapeEditor.kt
M graphics/integration-tests/testapp/src/main/java/androidx/graphics/shapes/test/MaterialShapes.kt

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

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

PointF was the main (possibly only) mutability issue, marking this as fixed

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.graphics:graphics-shapes:1.0.0-alpha04

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