Customize Android date picker

background

Ms. Design, given a requirement as shown below, obviously this is a date picker

research

Currently, the mainstream date picker for ANDROID is the official DatePickerDialog. Create a DatePickerDialog as follows. It receives a themeResId to set the theme of the dialog box.

public DatePickerDialog(@NonNull Context context, @StyleRes int themeResId,
        @Nullable OnDateSetListener listener, int year, int monthOfYear, int dayOfMonth) {
    
    
    this(context, themeResId, listener, null, year, monthOfYear, dayOfMonth);
}

There are five themes to choose from:

1. public static final int THEME_TRADITIONAL = 1;
2. public static final int THEME_HOLO_DARK = 2;
3. public static final int THEME_HOLO_LIGHT = 3;
4. public static final int THEME_DEVICE_DEFAULT_DARK = 4;
5. public static final int THEME_DEVICE_DEFAULT_LIGHT = 5;

1st traditional theme THEME_TRADITIONAL:

The second list selection box THEME_HOLO_DARK;

The third list selection box THEME_HOLO_LIGHT;

The fourth list selection box THEME_DEVICE_DEFAULT_DARK;

The fifth list selection box THEME_DEVICE_DEFAULT_LIGHT;

thinking and summarizing

In summary, the third one is more in line with our UI, but there is an extra part on the right side (the above example is a schematic diagram on the 5.1 system, and the third one after 6.0 is actually only the left half), and the color and margin None of them meet our needs. It would be nice if these could be customized.
So I went to see the source code:
as follows, DatePickerDialog puts a DatePicker and two buttons on the AlertDialog. So the important thing here is the DatePicker .

View the source code of DatePicker. When calling DatePicker, a datePickerMode will be passed in. Here, it is called according to mMode.

<DatePicker
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:datePickerMode="spinner"/>

What we want to look at is the spinner (scrolling list) mode. Follow the code and you can see that it loads a date_picker_legacy layout
createSpinnerUIDelegate-》DatePickerSpinnerDelegate

Find this layout date_picker_legacy, you can see the actual implementation of DatePicker, which is actually three NumberPicker

However, the NumerPicker provided by the system has very few interfaces (on version 6.0) that can be called externally. There are only preset ranges, etc., and it does not support our custom layout at all. Lightweight customization (inheriting NumberPicker) can also complete some requirements, such as modifying the theme color, only displaying the year and month, modifying the font color and size, etc., but some requirements such as the background when selected cannot be completed.

In summary, we can only complete it through heavyweight customization, that is, completely write a new control similar to NumberPicker, and then draw the background and text font color and size when selected. Thinking of this, I want to give up, because I feel so difficult. But I found that there is a ready-made control WheelPicker that can be used. The implementation of WheelPicker is based on the native Android NumberPicker. In addition to implementing the standard method of NumberPicker, it also provides more custom attributes. If you want to replace it in the project, you only need to replace NumberPicker with WheelPicker. I reckon that switching to this can meet the needs of Miss UI.
WheelPicker URL: https://github.com/AigeStudio/WheelPicker

another option

Before the previous plan was implemented, I found another control written by my brother, DatePickerView.
Blog URL: https://blog.csdn.net/oLimxing/article/details/112475099
DatePickerView URL: https://github.com/limxing/DatePickerView
This big guy achieves the same effect as NumberPicker by controlling RecyclerView.

In the end I chose this option.
However, this control does not realize the cycle of year, month and day, and the layout and requirements are also different, but it can be downloaded to the source code. After some modifications, it still achieves the desired effect at the beginning, and I want the head of the boss.
I can change it, and I can understand the code, but it is so difficult for me to write it myself.
Brackets, the code of WheelPicker is also necessary to look at, if I am a serious person.
Final effect: https://gitee.com/djyan/DatePickerView