https://kotlinlang.org logo
#compose
Title
# compose
d

Daniele B

03/29/2024, 8:39 AM
I have 2 more questions about the Compose Material3 DatePicker. 1. Is there a callback or a way to detect when the user changes the selected day? I can see the DatePickerState changes, but I can't find a callback that is fired on change. 2. is there a way to change the font size, and the spacing between the numbers?
t

Teo Vladusic

03/29/2024, 9:33 AM
As far as I remember, you can use
LaunchedEffect
with
pickerState.selectedDate
as the key. (don't know if the syntax is 100% right, but I hope you get the point)
s

Stylianos Gakis

03/29/2024, 10:01 AM
Also since that is internally backed by mutableState iirc, you can also just do
Copy code
LaunchedEffect(pickerState) {
  snapshotFlow { pickerState.selectedDateMillis }.collectLatest {
    println(it) // Here you got the latest selection every time it changes
  }
}
❤️ 1
d

Daniele B

03/29/2024, 10:03 AM
Thanks @Teo Vladusic and @Stylianos Gakis! I used this code:
Copy code
LaunchedEffect(key1 = pickerState.selectedDateMillis) {
  onChangeDateTime(pickerState.selectedDateMillis!!)
}
Any specific reason to use
snapshotFlow
instead?
s

Stylianos Gakis

03/29/2024, 10:05 AM
They both will be doing the correct thing, it’s just that with this every time there’s a new selection you are cancelling the old coroutine, launching a new one and so on. With snapshotFlow you are just keeping that one coroutine running but every time there is a new selection you get a new value in the flow, which should be cheaper and happen immediately
👍 1
👍🏻 1
d

Daniele B

03/29/2024, 10:06 AM
@Stylianos Gakis thanks for the explanation!
Anyone got any idea how to change the font and spacing of the DatePicker? I guess it's not possible?
t

Teo Vladusic

03/29/2024, 10:10 AM
You can do it by modifying your MaterialTheme Typography in your App Theme composable or just by wrapping the date picker in something like this:
Copy code
MaterialTheme(
            typography = MaterialTheme.typography.copy(
                bodyLarge = TextStyle()
            )
        ) {
            // Date picker code
        }
s

Stylianos Gakis

03/29/2024, 10:21 AM
If you really wanna edit things you might as well copy paste the implementation. I've done the same because I needed to do too many changes that were not possible with the existing API.
d

Daniele B

03/29/2024, 10:25 AM
@Stylianos Gakis I was able to change the font size:
Copy code
MaterialTheme(
    typography = MaterialTheme.typography.copy(
        bodyLarge = TextStyle(fontSize = 10.sp)
    )
) {
    // Date picker code
}
But it does not affect the spacing:
Any idea on how to change the spacing too?
s

Stylianos Gakis

03/29/2024, 10:27 AM
No need to tag people who are already part of the conversation btw. We already get notifications
👍 1
t

Teo Vladusic

03/29/2024, 10:28 AM
I think you can't change the padding as M3 calendar cell has fixed size of 48px and there is no padding
I have sent you a link for an m3 figma file, just go there and explore their components and values
d

Daniele B

03/29/2024, 10:36 AM
Thanks Teo, I am not really sure how to use the data I find in Figma. For example it says that height and width of the number cell is 40 px. Does it mean I can't change that?
👍 1
t

Teo Vladusic

03/29/2024, 10:37 AM
Yes, you can only modify things that are in your Material Theme like colors, typography and shapes
s

Stylianos Gakis

03/29/2024, 10:37 AM
You can always just go inside the composable and look at the implementation yourself. It should be evident from the code there how the items are laid out in the component
d

Daniele B

03/29/2024, 10:39 AM
Stylianos, even if I go into the code, I guess I can't change that. Is copying/pasting the implementation the only way to make changes?
s

Stylianos Gakis

03/29/2024, 10:39 AM
Yep
👍 1
d

Daniele B

03/29/2024, 10:40 AM
thanks
s

Stylianos Gakis

03/29/2024, 10:44 AM
You might be interested in the discussion here https://kotlinlang.slack.com/archives/CJLTWPH7S/p1710511919353029 and the article linked with it. In general m3 is a design system with set guidelines and expectations of how things should work. There is some level of customization that m3 allows you. but it is limited to the m3 design system specs. If you need to adjust things outside of those guidelines then you might need to build it yourself. And copy-pasting the existing m3 implementation is a great way to jump-start this “build it yourself” process
🙏 1
d

Daniele B

03/29/2024, 11:45 AM
I tried to copy DatePicker locally, but I get several warnings about components being private and internal. Any suggestion?
Screenshot 2024-03-29 at 18.51.31.png
s

Stylianos Gakis

03/29/2024, 11:57 AM
Yep, copy those too 😂 I never said it’d be easy. But it’s the only way to be able to edit those values.
👍 1
s

Stefan Oltmann

03/29/2024, 3:31 PM
I really dislike the Material DatePicker and had the same issues with it being far too big for an iPhone Mini
It still would be great if Material one day gets a proper DatePicker that’s not so huge and also allows configuration.
👍 1
In my case I design my apps mostly to adhere to Material Design, but it’s not obligatory. I find the iOS style DatePicker fits well and doesn’t look out of place. Your mileage may vary.
s

Sean Proctor

04/01/2024, 1:58 AM
I had forked a material 3 style calendar before it was added to compose. My version and the original are abandoned now, but if you want a base to start, you could fork one of those. https://github.com/sproctor/composecalendar
4 Views