Status Update
Comments
mn...@google.com <mn...@google.com>
sg...@google.com <sg...@google.com>
st...@gmail.com <st...@gmail.com> #2
Project: platform/frameworks/support
Branch: androidx-main
Author: Louis Pullen-Freilich <
Link:
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
ig...@gmail.com <ig...@gmail.com> #3
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
km...@ramp.com <km...@ramp.com> #4
Any update on this? Seems like the fix detailed above is fairly straightforward.
gk...@ramp.com <gk...@ramp.com> #5
We're still running into this bug, it's pretty problematic as it becomes impossible to differentiate between selectable and unselectable days in the date picker since their colors for each are always the same.
Would really appreciate if someone could look into this!
sg...@google.com <sg...@google.com> #6
To ensure your TextStyles
work correctly with different Material themes, you should avoid setting explicit colors within your TextStyle
definitions. This allows text items to automatically adapt to different themes (light/dark/etc.), provides a more consistent and accessible user experience, and prevents issues caused by hardcoded color values like the sample above has.
Having said that, the DatePicker
and DateRangePicker
are relying on the picker colors
param to set the color for their various parts, and as mentioned above, its doing so with a ProvideTextStyle
and such. @gkauffman - Is it safe to assume that the last comment regarding the selectable and unselectable days is referring to a case where colors were provided through the typography
?
gk...@ramp.com <gk...@ramp.com> #7
@sg...@google.com, thank you so much for the help on this. Here's a minimally reproducible example:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
CustomTheme {
Column(modifier = Modifier.padding(8.dp)) {
DatePickerTest()
}
}
}
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DatePickerTest() {
DatePicker(
state = DatePickerState(
selectableDates = object : SelectableDates {
override fun isSelectableDate(utcTimeMillis: Long): Boolean {
// Dates before today are not selectable, and should appear disabled
return utcTimeMillis >= System.currentTimeMillis()
}
},
locale = java.util.Locale.getDefault(),
initialDisplayMode = DisplayMode.Picker,
),
colors = DatePickerDefaults.colors(
containerColor = Color.Red,
selectedDayContentColor = Color.Blue,
disabledDayContentColor = Color.Gray,
)
)
}
@Composable
fun CustomTheme(
content: @Composable () -> Unit,
) {
MaterialTheme(
// DatePicker colors only work if the typography line below is commented out
typography = customTypography(),
content = { content() },
)
}
@Composable
fun customTypography() = Typography(
displayLarge = TextStyles.h1(),
displayMedium = TextStyles.h2(),
displaySmall = TextStyles.h3(),
headlineLarge = TextStyles.h1(),
headlineMedium = TextStyles.h2(),
headlineSmall = TextStyles.h3(),
titleLarge = TextStyles.body1Bold(),
titleMedium = TextStyles.body2Bold(),
titleSmall = TextStyles.body3Bold(),
bodyLarge = TextStyles.body1(),
bodyMedium = TextStyles.body2(),
bodySmall = TextStyles.body3(),
labelLarge = TextStyles.body3Bold(),
labelMedium = TextStyles.detail2(),
labelSmall = TextStyles.detail2(),
)
@Composable
fun text() = ColorTokens.Text.color()
@Composable
fun textHushed() = ColorTokens.TextHushed.color()
data class ColorToken(val light: Color, val dark: Color) {
@Composable
fun color() = if (isSystemInDarkTheme()) dark else light
}
object ColorTokens {
val Text =
ColorToken(light = Color(0XFF2E2E27), dark = Color(0XFFDBDAC9))
val TextHushed =
ColorToken(light = Color(0XFF707062), dark = Color(0XFFA4A493))
}
object TextStyles {
@Composable
fun h1(color: Color = text()) = TextStyle(
fontWeight = FontWeight.Bold,
lineHeight = TextUnit(28f, TextUnitType.Sp),
color = color,
)
@Composable
fun h2(color: Color = text()) = TextStyle(
fontWeight = FontWeight.Bold,
lineHeight = TextUnit(22f, TextUnitType.Sp),
color = color,
)
@Composable
fun h3(color: Color = text()) = TextStyle(
fontWeight = FontWeight.Light,
lineHeight = TextUnit(18f, TextUnitType.Sp),
color = color,
)
@Composable
fun body1(color: Color = text()) = TextStyle(
fontWeight = FontWeight.Light,
lineHeight = TextUnit(22f, TextUnitType.Sp),
color = color,
)
@Composable
fun body1Bold(color: Color = text()) = TextStyle(
fontWeight = FontWeight.Bold,
lineHeight = TextUnit(22f, TextUnitType.Sp),
color = color,
)
@Composable
fun body2(color: Color = text()) = TextStyle(
fontWeight = FontWeight.Light,
lineHeight = TextUnit(20f, TextUnitType.Sp),
color = color,
)
@Composable
fun body2Bold(color: Color = text()) = TextStyle(
fontWeight = FontWeight.Bold,
lineHeight = TextUnit(20f, TextUnitType.Sp),
color = color,
)
@Composable
fun body3(color: Color = textHushed()) = TextStyle(
fontWeight = FontWeight.Light,
lineHeight = TextUnit(18f, TextUnitType.Sp),
color = color,
)
@Composable
fun body3Bold(color: Color = text()) = TextStyle(
fontWeight = FontWeight.Bold,
lineHeight = TextUnit(18f, TextUnitType.Sp),
color = color,
)
@Composable
fun detail2(color: Color = textHushed()) = TextStyle(
fontWeight = FontWeight.Light,
lineHeight = TextUnit(14f, TextUnitType.Sp),
color = color,
)
}
If you have the typography = customTypography()
line commented out, the date picker colors work as expected. If you have the typography = customTypography()
line uncommented, the date picker colors do not work properly and all days have the same color regardless of whether they are selectable or not.
As you suspected, we are indeed setting colors within our TextStyle
definitions. We did this because we wanted certain TextStyles to be a certain color by default (e.g. h1 is black but detail2 is dark gray). This has worked well for us up until this DatePicker problem. Open to other ways of setting up our theming though, thanks again for taking a look at this!
sg...@google.com <sg...@google.com>
sg...@google.com <sg...@google.com> #8
Unlike many of our components that just take a slot for a Composable
lambda, the date-pickers have a more complex UI that includes Text
composables that are internal to the component. This is probably the reason you mainly hit this issue with the pickers.
To ensure we give precedence for the colors that are defined at the DatePickerColors
over the colors that are set in the TextStyles
, we will need to adjust the internal Texts
and pass the relevant color via their color
parameter.
Once this is fixed, it should be available at the following 1.4.x alpha release.
ap...@google.com <ap...@google.com> #9
Project: platform/frameworks/support
Branch: androidx-main
Author: Shalom Gibly <
Link:
DatePicker colors with typography-defined colors
Expand for full commit details
DatePicker colors with typography-defined colors
Fix the way we apply colors at the DatePicker and the
DateRangePicker when a `Typography` is configured to have TextStyles
with colors.
The change ensures that whatever is set at the DatePickerColors takes
presedence over any color that was set at the Typography's TextStyles.
Fixes: 347031394
Test: Added tests
Relnote: "DatePickerColors now correctly take precedence over any
conflicting colors defined at the theme's Typography text styles.
Also note that this update adjusts the `color` parameter's position in
the date picker functions and introduces a `contentColor` parameter
for customizing the header and title text colors."
Change-Id: I30d0307b11ba2e1a02535928ab4e4131100692a8
Files:
- M
compose/material3/material3/api/current.txt
- M
compose/material3/material3/api/restricted_current.txt
- M
compose/material3/material3/src/androidInstrumentedTest/kotlin/androidx/compose/material3/DatePickerTest.kt
- M
compose/material3/material3/src/androidInstrumentedTest/kotlin/androidx/compose/material3/DateRangePickerTest.kt
- M
compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/DatePicker.kt
- M
compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/DateRangePicker.kt
Hash: c903f18c4d35096154798f269c249896c057e492
Date: Wed Oct 02 11:27:22 2024
gk...@ramp.com <gk...@ramp.com> #10
Thank you so much for fixing!! Looking forward to using the fix
na...@google.com <na...@google.com> #11
The following release(s) address this bug.It is possible this bug has only been partially addressed:
androidx.compose.material3:material3:1.4.0-alpha02
androidx.compose.material3:material3-android:1.4.0-alpha02
androidx.compose.material3:material3-jvmstubs:1.4.0-alpha02
androidx.compose.material3:material3-linuxx64stubs:1.4.0-alpha02
ta...@gmail.com <ta...@gmail.com> #12
onDismissRequest = onDismiss,
// ...
) {
CompositionLocalProvider(LocalContentColor provides Color.Black) {
DatePicker(
state = datePickerState,
colors = DatePickerDefaults.colors(
containerColor = Color.White,
// subheadContentColor = Color.Whatever,
// ...
)
)
}
}
Use CompositionLocalProvider. This forces your content to be tinted as specified by LocalContentColor.
Description
Jetpack Compose version: androidx.compose:compose-bom:2024.05.00
Jetpack Compose component(s) used: Material3 DatePicker
Android Studio Build: Android Studio Jellyfish
Kotlin version: 2.0.0
Steps to Reproduce or Code Sample to Reproduce: