1

I am making an Android application with Kotlin and Jetpack Compose. I'm currently stuck with making a DatePicker. The goal is to have the date picker calendar appear on the app screen itself, rather than as a dialog box. But, once I try to run the app on a smaller phone, the calendar overlaps the dates on it and they are not visible.

At the moment this is the code for date picker:

Column( modifier = Modifier .fillMaxWidth() .padding(8.dp), horizontalAlignment = Alignment.CenterHorizontally ) { DatePicker( state = datePickerState, showModeToggle = false, modifier = modifier, title = null, ) }

And when I call the composable function for the date picker I call it like this:

DatePickerView( selectedDate, onDateSelected = { selectedDate = it formattedDate = convertMillisToDate(it) }, modifier = Modifier .fillMaxWidth() .padding(horizontal = 16.dp) .align(Alignment.CenterHorizontally) )

On bigger screens everything is fine, but on smaller screens this problem comes. How can I dynamically resize the date picker, based on screen size?

Improve this question

2 Answers 2

Reset to default
4

It's not the prettiest answer you're going to get, but it's the only one I found and currently using in my app:

 BoxWithConstraints { // 360 is minimum because DatePicker uses 12.dp horizontal padding and 48.dp for each week day val scale = remember(this.maxWidth) { if(this.maxWidth > 360.dp) 1f else (this.maxWidth / 360.dp) } // Make sure there is always enough room, so use requiredWidthIn Box(modifier = Modifier.requiredWidthIn(min = 360.dp)) { // Scale in case the width is too large for the screen androidx.compose.material3.DatePicker( modifier = Modifier.scale(scale), state = datePickerState, title = null, headline = null, showModeToggle = false, ) } }

I looked into the code of the DatePicker and while it can get smaller, it won't do so nicely like you said. I found out it uses 12.dp horizontal padding and 48.dp for each week day. So added together makes 360.dp at which the DatePicker will overlap. So I'm using BoxWithConstraints to see if the DatePicker exceeds the 360.dp and scale it down. If it is a little smaller it will look fine, but if it is a lot smaller there will be lots of padding at the bottom (scaling doesn't adjust the height).

Hope this helps.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

The problem with the padding can be solved by also forcing the height of the Box to the height of DatePickerModalTokens.ContainerHeight: Modifier.requiredSizeIn(minWidth = 360.dp, minHeight = 568.dp)
@mtotschnig Yes that could be done, but the scale should also be applied to the height then, otherwise the padding remains.
Not sure what you mean? Modifier.scale scales horizontally and vertically.
@mtotschnig Yes, but the scale is for the DatePicker. The required height you are suggesting is in the Box. So that would mean the height is always the same and I am just scaling the DatePicker. Which is what I am already doing, but I'm not sure what's causing the extra padding. My comment was about combining the scale with the height. Try the code, you'll see what I mean.
0

To dynamically resize the DatePicker based on the screen size in a Jetpack Compose application, you can use the LocalConfiguration and LocalDensity providers to get information about the screen size and density. Then, you can adjust the size of your DatePicker accordingly.

 @Composable fun DatePickerScreen() { val configuration = LocalConfiguration.current val screenWidthDp = configuration.screenWidthDp val datePickerWidth = (screenWidthDp * 0.8).dp Column( modifier = Modifier .fillMaxWidth() .padding(8.dp), horizontalAlignment = Alignment.CenterHorizontally ) { DatePickerView( selectedDate = System.currentTimeMillis(), onDateSelected = { /* Handle date selection */ }, modifier = Modifier .fillMaxWidth() .padding(horizontal = 16.dp) .align(Alignment.CenterHorizontally) .width(datePickerWidth) ) } } @Composable fun DatePickerView( selectedDate: Long, onDateSelected: (Long) -> Unit, modifier: Modifier = Modifier ) { val datePickerState = rememberDatePickerState(selectedDate) DatePicker( state = datePickerState, showModeToggle = false, modifier = modifier, title = null, ) }
Improve this answer

2 Comments

I think the problem is that font sizes on the date picker are too large. Just changing the width didn't help in my case. What did is setting LocalDensity to 0.85 and fontScale to 0.9. Not perfect but worked.
@WindRider can you provide an example of how you adjusted the LocalDensity and fontScale to get this to work?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.