How would you go about placing boxes correctly

Question

I am trying to make a datepicker with dates placed beneath the name of the days of the week. But I can't really get the spacing and the placement correct. don't really know what would make it possible to make the placement modifyable during run either because I mean if a month starts on a Wednesday the first date must align with Wednesday instead of Monday or well Sunday.

Here is my code:

val datesList = listOf<String>("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
var dayCounter: Int = 1
var week: Int = 1

Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
    datesList.forEach {
        Text(text = it.toString().substring(0,3))
    }
}
while (dayCounter <= 31){
    Row(modifier = Modifier.fillMaxWidth().padding(5.dp)) {
        for (i in week..7){
            if(dayCounter <= 31){
                Box(contentAlignment = Alignment.Center, modifier = Modifier.background(Color.Red , CircleShape).padding(10.dp)) {
                    Text(text = dayCounter++.toString())
                }

            }

        }
    }
}

I have already tried with padding but that just stretches the boxes. and aspectratio wont work either because of the different amount of dates on each row. So I'm kinda stuck will someone please help?

Answer 1

I think this is what you want...

@Composable
fun DatePicker() {
    val datesList = listOf<String>("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat")
    var dayCounter: Int = 1
    var week: Int = 1
    Column(Modifier.fillMaxWidth()) {
        Row(
            Modifier
                .fillMaxWidth()
                .padding(5.dp),
            horizontalArrangement = Arrangement.Center
        ) {
            datesList.forEach {
                Box(
                    Modifier
                        .weight(1f)
                        .padding(5.dp),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = it.substring(0, 3))
                }
            }
        }
        var initWeekday = 3 // wednesday
        while (dayCounter <= 31) {
            Row(
                Modifier
                    .fillMaxWidth()
                    .padding(5.dp),
            ) {
                if (initWeekday > 0) {
                    repeat(initWeekday) {
                        Spacer(modifier = Modifier.weight(1f))
                    }
                }
                for (i in week..(7 - initWeekday)) {
                    if (dayCounter <= 31) {
                        Box(
                            contentAlignment = Alignment.Center,
                            modifier = Modifier
                                .weight(1f)
                                .background(Color.Red, CircleShape)
                                .padding(10.dp)
                        ) {
                            Text(text = dayCounter++.toString())
                        }
                    } else {
                        Spacer(modifier = Modifier.weight(1f))
                    }
                }
                initWeekday = 0
            }
        }
    }
}

Here's the result: