how to customize calendar view in jetpack compose?

Viewed 1902

I'm using the calendar view in the bottom sheet to show the calendar view. Now I want to change the navigation left and right arrow icon and decrease space between both icons in Calendar. I also wanted the "Today" text label when today's date is selected like below.

Currently I'm getting view like:

This is the view I want to get:

        Row(modifier = Modifier
            .padding(6.dp),
            verticalAlignment = Alignment.Top) {

            AndroidView(
                { CalendarView(it) },
                modifier = Modifier.wrapContentWidth(),
                update = { views ->
                    views.date = scheduleViewModel.selectedCalender.value.timeInMillis
                    views.setOnDateChangeListener { calendarView, year, month, dayOfMonth ->
                        val cal = Calendar.getInstance()
                        cal.set(year, month, dayOfMonth)
                        scheduleViewModel.onEvent(ScheduleEvent.DateSelected(cal))
                        onDateSelect()

                    }
                }
            )

            Text(
                text = "Today",
                modifier = Modifier
                    .wrapContentWidth(),
                fontFamily = appFontFamily,
                fontWeight = FontWeight.SemiBold,
                fontSize = 10.sp,
                color = Color(0xFF0A70C4),
                textAlign = TextAlign.Center,
            )

        }

1 Answers

When you're working with XML views, you need to look for non Compose solutions, e.g. check out answers under this question how to define a custom XML theme for CalendarView.

To apply the theme to AndroidView you can use ContextThemeWrapper:

AndroidView(
    { CalendarView(ContextThemeWrapper(it, R.style.your_custom_style)) },
    // ...
Related