2

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,
            )

        }
intellijAI
  • 35
  • 2
  • 8
  • Just in case you want a calendar in compose... Take a look here: https://stackoverflow.com/questions/71797272/how-would-you-go-about-placing-boxes-correctly/71798262#71798262 – nglauber Apr 17 '22 at 01:30

1 Answers1

3

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)) },
    // ...
Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
  • Hi @Pylyp Thanks for your answer but unfortunately contextWrapper give error `Too many arguments for public constructor ContextWrapper(base: Context!) defined in android.content.ContextWrapper` – intellijAI Apr 21 '22 at 06:53
  • @intellijAI I got a little messed up, you should use `ContextThemeWrapper` instead – Phil Dukhov Apr 21 '22 at 07:29
  • can you add style code as well I'm not finding the way to achieve in style.Like changing navigation icons and adding today text. – intellijAI Apr 21 '22 at 07:40
  • Hey @Pylyp Dukhov can you add style code as well I'm not finding the way to achieve in style.Like changing navigation icons and adding today text. – intellijAI Apr 21 '22 at 08:47
  • 1
    @intellijAI I haven't noticed that you need custom layout too. In this case you can build a custom view, like shown [here](https://stackoverflow.com/a/21873560/3585796), or build it completely in Compose - it'll be a combination of Rows and Columns. – Phil Dukhov Apr 21 '22 at 08:50
  • Hey @Pylyp Dukhov Thanks for your comment. As you guided I made changes in my code now `Text` is slightly up as you can see I have edited my code. Can you tell me how can I add margin top or something like that inside `Text`. – intellijAI Apr 22 '22 at 07:20
  • 1
    @intellijAI You can use `Modifier.padding` or `Modifier.offset` – Phil Dukhov Apr 22 '22 at 08:00
  • Thanks @Pylyp Dukhov `Modifier.offset` worked. – intellijAI Apr 22 '22 at 08:44