M3 Card component no more allows to center content easily [347649765]

Fixed

Bug

Status Update

No update yet.

Description

to...@gmail.com

created issue #1

Jun 17, 2024 01:39PM

Component used: Wear M3 Card Version used: latest master snapshot.

Due to https://android-review.googlesource.com/c/platform/frameworks/support/+/3103263 that introduce a minheight but also force an intrinsic min we now have no way to center small text inside the Card.

The normal hack would have been to wrap the internal card content with a box and height Intrinsic.Max but this does not work (Probably due to the forced .height(IntrinsicSize.Min))

So we need to wrap in a box with a minheight of the proper height but the token is private so we need to hardcode the 64.dp and if there's some new changes to the design it won't be applied properly on the clients.

The need is simple inside the card show a small text that should be centered and not forced at the top with tons of empty space below.

Comments

gr...@google.com <gr...@google.com> Jun 24, 2024 12:14PM

Assigned to ti...@google.com.

gr...@google.com <gr...@google.com> Jul 1, 2024 12:15PM

Reassigned to st...@google.com.

st...@google.com <st...@google.com> #2Jul 1, 2024 12:36PM

Project: platform/frameworks/support
Branch: androidx-main
Author: Louis Pullen-Freilich <lpf@google.com>
Link: https://android-review.googlesource.com/3328184

Adds OverscrollEffect#withoutDrawing and OverscrollEffect#withoutEventHandling

Expand for full commit details

Adds OverscrollEffect#withoutDrawing and OverscrollEffect#withoutEventHandling 
 
These APIs allow overscroll to have events dispatched to it by one component, and rendered in a separate component. 
 
Fixes: b/266550551 
Fixes: b/204650733 
Fixes: b/255554340 
Fixes: b/229537244 
Test: OverscrollTest 
Relnote: "Adds OverscrollEffect#withoutDrawing and OverscrollEffect#withoutEventHandling APIs - these APIs create a wrapped instance of the provided overscroll effect that doesn't draw / handle events respectively, which allows for rendering  overscroll in a separate component from the component that is dispatching events. For example, disabling drawing the overscroll inside a lazy list, and then drawing the overscroll separately on top / elsewhere." 
Change-Id: Idbb3d91546b49c1987a041f959bce4b2b09a9f61

Files:

M compose/foundation/foundation/api/current.txt
M compose/foundation/foundation/api/restricted_current.txt
M compose/foundation/foundation/integration-tests/foundation-demos/src/main/java/androidx/compose/foundation/demos/OverscrollDemo.kt
M compose/foundation/foundation/samples/src/main/java/androidx/compose/foundation/samples/OverscrollSample.kt
M compose/foundation/foundation/src/androidInstrumentedTest/kotlin/androidx/compose/foundation/OverscrollTest.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/Overscroll.kt

Hash: f64e25b7a473c757d080521e7dd97b3f6670f60d
Date: Fri Nov 01 18:43:56 2024

to...@gmail.com <to...@gmail.com> #3Jul 1, 2024 01:30PM

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

androidx.compose.foundation:foundation:1.8.0-alpha06
androidx.compose.foundation:foundation-android:1.8.0-alpha06
androidx.compose.foundation:foundation-jvmstubs:1.8.0-alpha06
androidx.compose.foundation:foundation-linuxx64stubs:1.8.0-alpha06

Message last modified on Jul 1, 2024 01:31PM

wear.png

23 KB

View

Download

st...@google.com <st...@google.com> #4Sep 17, 2024 02:57PM

Looking again at this, I don't think the height is actually needed in order to vertically center the content of Card:

            Card(
                onClick = {},
            ) {
                Column(
                    modifier = Modifier.fillMaxHeight(), verticalArrangement = Arrangement.Center
                ) {
                    Text(
                        "ABCD",
                        textAlign = TextAlign.Center,
                        style = MaterialTheme.typography.titleLarge,
                        modifier = Modifier.fillMaxWidth()
                    )
                }
            }

see attachment.

However - we have included Button height as ButtonDefaults.height and it makes sense to be consistent for Card, so we will add it to CardDefaults as well.

CardWithVerticallyCenteredContent.png

20 KB

View

Download

to...@gmail.com <to...@gmail.com> #5Sep 17, 2024 03:11PM

Unless it was fixed or updated in M3 cards you can't use fillmaxheight in a container with intrinsic min size and the reason of the first post. So I guess that if it now works the card was changed and this is fixed.

ap...@google.com <ap...@google.com> #6Sep 20, 2024 01:34PM

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

commit 7f4323b11a070222301ce583411897cffb877848
Author: stevebower <stevebower@google.com>
Date: Tue Sep 17 15:14:21 2024

Added Shape and Height to CardDefaults

Also added a demo of a base Card with vertically centered content.

Bug: 347649765
Test: Manual testing
Relnote: "We have added CardDefaults.Shape and CardDefaults.Height, which (being tokens) were otherwise private to developers using the library."
Change-Id: I1594a5907bee183eb2183dec2e85e791c6dda3be

M wear/compose/compose-material3/api/current.txt
M wear/compose/compose-material3/api/restricted_current.txt
M wear/compose/compose-material3/integration-tests/src/main/java/androidx/wear/compose/material3/demos/CardDemo.kt
M wear/compose/compose-material3/src/main/java/androidx/wear/compose/material3/Card.kt

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

st...@google.com <st...@google.com> Sep 20, 2024 02:10PM

Marked as fixed.

pr...@google.com <pr...@google.com> #7Oct 2, 2024 05:37PM