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.

1. the display is a little bit delayed because first a keyboard is opened which is closed immediately after calling the MaterialDatePicker.
2. 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.

Answer 1

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!

Answer 2

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.