Search code examples
androiddatepickerandroid-edittextdialogmaterial-components-android

Showing the MaterialDatePicker when clicking into the Material Outlined Text Field


I am working on a small app where the user can start an activity. By doing that, a text input shall is shown where todays date is set by default.

When clicking into the text field, the MaterialDatePicker shall be shown as dialog.

I have successfully implemented that the MaterialDatePicker shows up when clicking on a button, but I cannot find a sololution to show the dialog instead of the Android standard android keyboard.

Any advises on that?

Activity XML:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/edtStartWearLensDate"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:hint="@string/txtLabelWearSelectStartDate"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtLabelStartWearLensID">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

Activity:

On Create:

edtStartWearLensDate = findViewById(R.id.edtStartWearLensDate);
edtStartWearLensDate.setOnClickListener(view -> onEdtStartWearLensDateClick());

On Click into the text field

private void onEdtStartWearLensDateClick() {
        showDatePickerDialog();
}

Method to show dialog (works when calling from a Button on click listener)

private void showDatePickerDialog(){
        MaterialDatePicker.Builder builder = MaterialDatePicker.Builder.datePicker();

        builder.setTitleText("Select start date");
        builder.setSelection(MaterialDatePicker.todayInUtcMilliseconds());

        final MaterialDatePicker materialDatePicker = builder.build();

        materialDatePicker.show(getSupportFragmentManager(), "DATE_PICKER");

        materialDatePicker.addOnPositiveButtonClickListener(new MaterialPickerOnPositiveButtonClickListener() {
            @Override
            public void onPositiveButtonClick(Object selection) {
                edtStartWearLensDate.getEditText().setText(materialDatePicker.getHeaderText());
            }
        });
    }

Solution

  • Try to set the clickable and focusable properties to true in the TextInputEditText:

    <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/text_input_edit_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:focusable="false"
                android:clickable="true"/>
    

    And call the setOnClickListener method on it:

    findViewById<TextInputEditText>(R.id.text_input_edit_text).setOnClickListener(view -> onEdtStartWearLensDateClick())