CODEWITHSUNDEEP
androiddatepickermaterial-design
Steven Rathmann
Steven Rathmann

Reputation: 107

Android using MaterialDatePicker and TextInputLayout

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:

enter image description here

Thank you for your help.

Upvotes: 6

Views: 6962

Answers (3)

Matthias Bruns
Matthias Bruns

Reputation: 900

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

Upvotes: 2

Sourav Anand
Sourav Anand

Reputation: 51

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.

Upvotes: 3

luk321
luk321

Reputation: 116

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!

Upvotes: 6

Related Questions