white vertical lines occasionally appear on the background

[kcjian]

Library information:

• Version: 2.6.1
• View or Compose module: view，Example4Fragment
  

Describe the bug**

When selecting multiple options, white vertical lines occasionally appear on the background


Screenshots? (if applicable)

Not necessarily, it appears after multiple selections

Please pay attention to the vertical line between day 19 and day 20

[kizitonwose]

This is happening because of an error in how we use drawables in the sample project (Example 4). Unfortunately, this error has made its way into many projects that follow the sample.

In Example 4, a single drawable is shared between all the day views and when the calendar width is not fully divisible by 7, the layout will assign the remaining pixels to one of the day views to fill the space. This means that the drawable which was sized using a smaller view will be shown on a wider view, hence we get the vertical lines. This "vertical line" is the pixel space that the drawable cannot fill due to its limited size.

The fix is to use one drawable per day view. We do not see this in other examples because they use setBackgroundResource which loads a drawable for each day view.

TL;DR: In the Example 4 code, change this:

private fun configureBinders() {
	// Issue: The drawables are outside the DayViewContainer so we use a shared instance.
    val clipLevelHalf = 5000
    val ctx = requireContext()
    val rangeStartBackground =
        ctx.getDrawableCompat(R.drawable.example_4_continuous_selected_bg_start).also {
            it.level = clipLevelHalf // Used by ClipDrawable
        }
    val rangeEndBackground =
        ctx.getDrawableCompat(R.drawable.example_4_continuous_selected_bg_end).also {
            it.level = clipLevelHalf // Used by ClipDrawable
        }
    val rangeMiddleBackground =
        ctx.getDrawableCompat(R.drawable.example_4_continuous_selected_bg_middle)
    val singleBackground = ctx.getDrawableCompat(R.drawable.example_4_single_selected_bg)
    val todayBackground = ctx.getDrawableCompat(R.drawable.example_4_today_bg)

    class DayViewContainer(view: View) : ViewContainer(view) {
        lateinit var day: CalendarDay // Will be set when this container is bound.
        val binding = Example4CalendarDayBinding.bind(view)
        // ... other code
    }
	// ... other code
}

Use this instead:

private fun configureBinders() {
    class DayViewContainer(view: View) : ViewContainer(view) {
		// Fix: Move the drawables into the DayViewContainer so we have a unique instance.
        val clipLevelHalf = 5000
        val rangeStartBackground =
            view.context.getDrawableCompat(R.drawable.example_4_continuous_selected_bg_start).also {
            it.level = clipLevelHalf // Used by ClipDrawable
        }
        val rangeEndBackground =
            view.context.getDrawableCompat(R.drawable.example_4_continuous_selected_bg_end).also {
            it.level = clipLevelHalf // Used by ClipDrawable
        }
        val rangeMiddleBackground = view.context.getDrawableCompat(R.drawable.example_4_continuous_selected_bg_middle)
        val singleBackground = view.context.getDrawableCompat(R.drawable.example_4_single_selected_bg)
        val todayBackground = view.context.getDrawableCompat(R.drawable.example_4_today_bg)

        lateinit var day: CalendarDay // Will be set when this container is bound.
        val binding = Example4CalendarDayBinding.bind(view)
        // ... other code
    }
    // ... other code
}

Accessing the drawables:

continuousBgView.applyBackground(container.rangeStartBackground)
continuousBgView.applyBackground(container.rangeMiddleBackground)
continuousBgView.applyBackground(container.rangeEndBackground)

The result (using red color so the vertical lines are more visible)

Bug	Fix