Android using MaterialDatePicker and TextInputLayout

Question

I am new to android development and currently trying to integrate material design into my app. I would like to evaluate a simple form, for this purpose I used the components com.google.android.material.textfield.TextInputLayout and com.google.android.material.textfield.TextInputEditText for user input. Besides the text input, I need a date, which I want to read with a MaterialDatePicker.

I tried to display the MaterialDatePicker with OnFocusChangeListener, this works too, but I have two problems.

the display is a little bit delayed because first a keyboard is opened which is closed immediately after calling the MaterialDatePicker.
when the display is closed with the Back button, the focus is still on TextInputLayout. So I would have to change the focus first to open a MaterialDatePicker again.

This is how I implemented the OnFocusChangeListener

@Override
public void onFocusChange(View view, boolean selected) {

    if( view.getId() == R.id.myId&& selected ){

        MaterialDatePicker.Builder builder = MaterialDatePicker.Builder.datePicker();
        MaterialDatePicker picker = builder.build();
        picker.show( this.getParentFragmentManager(), "DATE_PICKER" );
    }
}

Are there alternative components of Material Design that are better suited for the presentation? I would like to keep the behavior within the form, so as soon as the date is entered by the user, a small label should be displayed above, like this:

Thank you for your help.

Issue has been fix in latest release , you may refer google response https://issuetracker.google.com/issues/189559345 — Prags, Jul 23 '21 at 19:46

luk321 · Accepted Answer · 2020-06-01T20:58:42.063

I recently encountered the same problem.

The first issue concerning the keyboard, is solved by calling:

mTextInputEditText.setInputType(InputType.TYPE_NULL);

By setting the InputType to TYPE_NULL the keyboard won't open by clicking on the text field. In addition, if you no longer want the user to be able to input any text, you can add:

mTextInputEditText.setKeyListener(null);

The second issue, to show the DatePicker again while it is already in focus, you can set an extra onClickListener:

mTextInputEditText.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                openDatePicker();
            }
        });

The OnClickListener is called as soon as the user clicks the text field again. Sadly it will not work with the first click. You can look at this answer https://stackoverflow.com/a/11799891/9612595 for more information. Unfortunately, making the text field unfocusable resolves into weird behavior with the hint from Material.

I hope that helps!

deliverDatePicker.editText?.setOnClickListener { viewModel.onDatePickerClick() } deliverDatePicker.editText?.setOnFocusChangeListener { _, hasFocus -> if (hasFocus) { viewModel.onDatePickerClick() } } adding onFocusChangeListener solves the first case - they will never be called at the same time. — Matthias Bruns, Nov 02 '21 at 19:21

score 2 · Answer 2 · answered Aug 26 '21 at 05:25

Adding to luk321 answer. Instead of OnClickListener you can use OnTouchListener. For ex -

editText.setOnTouchListener((view, motionEvent) -> {
     if(motionEvent.getAction() == MotionEvent.ACTION_UP){
        //your code                
     }
     return false;
});

It will work on first touch. Be sure to use ACTION.UP otherwise event will occur while scrolling also.

score 2 · Answer 3 · answered Nov 02 '21 at 19:24

deliverDatePicker.editText?.setOnClickListener {
    viewModel.onDatePickerClick()
}
deliverDatePicker.editText?.setOnFocusChangeListener { _, hasFocus ->
    if (hasFocus) {
        viewModel.onDatePickerClick()
    }
}

Overriding setOnFocusChangeListener as well as setOnClickListener solves the first unregistered click event of @luk321 answer

Android using MaterialDatePicker and TextInputLayout

3 Answers3