DatePickerDialog. Change selected day background

Question

I use a standard android picker. And now it looks like this:

Is there any way to change the background of the selected day so that it looks like this, for example?

Changing the color of the selected day does not cause problems. There is a variable in style for this. But it doesn't work that way with background.

Answer 1

As DatePickerDialog does not provide direct customization options for the selected day background. Try to create custom DatePickerDialog.

public class CustomDatePickerDialog extends DatePickerDialog {

    public CustomDatePickerDialog(Context context, OnDateSetListener listener, int year, int month, int dayOfMonth) {
        super(context, listener, year, month, dayOfMonth);
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        DatePicker datePicker = getDatePicker();

        if (datePicker != null) {
            datePicker.setCalendarViewShown(false);
            datePicker.getDayOfMonthTextView().setBackgroundResource(R.drawable.your_custom_selected_day_background);
        }
    }
}

And use in activity as below

Calendar calendar = Calendar.getInstance();
int year = calendar.get(Calendar.YEAR);
int month = calendar.get(Calendar.MONTH);
int dayOfMonth = calendar.get(Calendar.DAY_OF_MONTH);

DatePickerDialog.OnDateSetListener dateSetListener = (view, selectedYear, selectedMonth, selectedDayOfMonth) -> {
    // date selection
};

CustomDatePickerDialog datePickerDialog = new CustomDatePickerDialog(getContext(), dateSetListener, year, month, dayOfMonth);
datePickerDialog.show();

Answer 2

To achieve the calendar date selection style shown in the image where the selected date has a border around it, you can use a DayViewDecorator in the MaterialCalendarView library. Here's how you can customize the selected day with a border:

Step 1: Add the Dependency

implementation ("com.github.prolificinteractive:material-calendarview:2.0.0")

Step 2: Define the Calendar in XML

Add the MaterialCalendarView to your layout file:

<com.prolificinteractive.materialcalendarview.MaterialCalendarView
    android:id="@+id/calendarView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:mcv_showOtherDates="all"/>

Step 3: Create the Custom Selector Drawable

Create a custom drawable resource (res/drawable/custom_selector.xml) for the border:

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="2dp"
                android:color="#FF4081" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</layer-list>

Step 4: Create the DayViewDecorator Class

Create a class EventDecorator to handle the decoration:

class EventDecorator(
context: Context,
private val dates: HashSet<CalendarDay>) : DayViewDecorator {

private val drawable: Drawable = ContextCompat.getDrawable(context, R.drawable.custom_selector)!!

override fun shouldDecorate(day: CalendarDay): Boolean {
    return dates.contains(day)
}

override fun decorate(view: DayViewFacade) {
    view.setSelectionDrawable(drawable)
    view.addSpan(ForegroundColorSpan(Color.BLACK)) // Set the desired text color
}}

Step 5: Apply the Decorator in Your Activity or Fragment

In your Activity or Fragment, apply the decorator to the MaterialCalendarView:

calendarView = findViewById(R.id.calendarView)

    val dates = HashSet<CalendarDay>()
    dates.add(CalendarDay.today())

    calendarView.addDecorator(EventDecorator(this, dates))

    calendarView.setOnDateChangedListener { widget, date, selected ->
        dates.clear()
        dates.add(date)
        calendarView.invalidateDecorators()
        calendarView.addDecorator(EventDecorator(this, dates))
    }

Summary:- By following these steps, you can customize the MaterialCalendarView to display a border around the selected date, similar to the provided image. This approach uses DayViewDecorator to set a custom drawable as the selection background, providing the desired border effect.