Implementing Custom Date and Time Picker with 2-way Data Binding Support
The Data binding library is one of the most popular libraries among the android developers. We have been using it in the Open Event Organiser Android app for building interactive UI’s for some time now. The Open Event Organiser Android App is the Event management app for organizers using the Open Event Platform. This blog explains how we implemented our own custom Date and Time picker with 2-way data binding support using the Data binding framework.
Why custom picker ?
One specific requirement in the app is to have a button, clicking on that button should open a DatePicker which would allow the user to select the date. A similar behaviour was required to allow the user to select the time as well. In order to handle this requirement we were using Binding Adapters on Button. For eg. the following Binding Adapter allowed us to define a property date on a button and set an Observable String as it’s value. We implemented a similar Binding Adapter for selecting time as well.
@BindingAdapter("date") public static void bindDate(Button button, ObservableField<String> date) { String format = DateUtils.FORMAT_DATE_COMPLETE; bindTemporal(button, date, format, zonedDateTime -> new DatePickerDialog(button.getContext(), (picker, year, month, dayOfMonth) -> setPickedDate( LocalDateTime.of(LocalDate.of(year, month + 1, dayOfMonth), zonedDateTime.toLocalTime()), button, format, date), zonedDateTime.getYear(), zonedDateTime.getMonthValue() - 1, zonedDateTime.getDayOfMonth())); }
It calls the bindTemporal method which takes in a function along with the button, date and the format and does two things. First, it sets the value of the date as the text of the button. Secondly, it attaches a click listener to the button and applies the function passed in as the argument when clicked. Below is the bindTemporal method for reference:
private static void bindTemporal(Button button, ObservableField<String> date, String format, Function<ZonedDateTime, AlertDialog> dialogProvider) { if (date == null) return; String isoDate = date.get(); button.setText(DateUtils.formatDateWithDefault(format, isoDate)); button.setOnClickListener(view -> { ZonedDateTime zonedDateTime = ZonedDateTime.now(); try { zonedDateTime = DateUtils.getDate(isoDate); } catch (DateTimeParseException pe) { Timber.e(pe); } dialogProvider.apply(zonedDateTime).show(); }); }
It was working pretty well until recently when we started getting deprecation warnings about using Observable fields as a parameter of Binding Adapter. Below is the full warning:
Warning:Use of ObservableField and primitive cousins directly as method parameters is deprecated and support will be removed soon. Use the contents as parameters instead in method org.fossasia.openevent.app.common.app.binding.DateBindings.bindDate
The only possible way that we could think of was to pass in regular String in place of Observable String. Now if we pass in a regular String object then the application won’t be reactive. Hence we decided to implement our own custom view to resolve this problem.
Custom Date and Time Picker
We decided to create an Abstract DateTimePicker class which will hold all the common code of our custom Date and Time pickers. It is highly recommended that you go through this awesome blog post first before reading any further. We won’t be going through the details already explained in the post.
Following are the important features of this Abstract class:
- It extends the AppCompatButton class.
- It stores an ObservableString named value and an OnDateTimeChangedListener as it’s field. We will discuss the change listener later in the article.
- It implements the three mandatory constructors and calls it’s super method. It also calls the init method which sets the current date and time as the default.
- It has a bindTemporal method which is the same as we discussed earlier.
- It has a setPickedDate method which sets the selected date/time as the text for the button so that users can see the selected date/time on the button itself. Moreover it notifies the change listener about the change in date if attached.
- It has an abstract method called setValue. It will be implemented in the sub classes and used to set the date or time value for the field named value.
You can check the full implementation here.
The OnDateTimeChangedListener which we mentioned above is an extremely simple interface. It defines a simple method onDateChanged which takes in the selected date as the argument.
public interface OnDateTimeChangedListener {
void onDateChanged(ObservableString newDate);
}
Let’s have a look at the implementation of the DatePicker class. The key features of this class are:
- It extends the AbstractDateTimePicker class and implements the necessary constructors calling the corresponding super constructor.
- It implements the method setValue which sets the date or time passed in to the field value. It also calls the bindTemporal method of the super class.
public class DatePicker extends AbstractDateTimePicker { public DatePicker(Context context) { super(context); } public DatePicker(Context context, AttributeSet attrs) { super(context, attrs); } public DatePicker(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public void setValue(String value) { ObservableString observableValue = getValue(); if (observableValue.get() == null || !TextUtils.equals(observableValue.get(), value)) { observableValue.set(value); String format = DateUtils.FORMAT_DATE_COMPLETE; bindTemporal(value, format, zonedDateTime -> new DatePickerDialog(this.getContext(), (picker, year, month, dayOfMonth) -> setPickedDate( LocalDateTime.of(LocalDate.of(year, month + 1, dayOfMonth), zonedDateTime.toLocalTime()), format), zonedDateTime.getYear(), zonedDateTime.getMonthValue() - 1, zonedDateTime.getDayOfMonth())); } } }
Next we discuss the BindingAdapter and the InverseBindingAdapter for the custom DatePicker which allows the data binding framework to set the action to be performed when date changes and get the date from the view respectively.
@BindingAdapter(value = "valueAttrChanged") public static void setDateChangeListener(DatePicker datePicker, final InverseBindingListener listener) { if (listener != null) { datePicker.setOnDateChangedListener(newDate -> listener.onChange()); } } @InverseBindingAdapter(attribute = "value") public static String getRealValue(DatePicker datePicker) { return datePicker.getValue().get(); }
Now in order to use our view, we can simply define it in the layout file as shown below:
<org.fossasia.openevent.app.ui.views.DatePicker style="?attr/borderlessButtonStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/purple_500" app:value="@={ date }" />
The key thing to notice is the use of @= instead of @ which denotes two way data binding.
Conclusion
The Android Data binding framework is extremely powerful and flexible at the same time. We can use it for our custom requirements as shown in this article.
References
- Android data binding: https://developer.android.com/topic/libraries/data-binding/
- Custom two way data binding made easy: https://medium.com/@douglas.iacovelli/custom-two-way-databinding-made-easy-f8b17a4507d2
You must be logged in to post a comment.