MaterialTimePicker requires user to click three times

Issue

I am developing a native Android application with Kotlin, currently attempting to use a MaterialTimePicker to populate the time for an EditText. I have a UX issue where the user is required to click three time for the keyboard to display.

1. First click displays the MaterialTimePicker: First click displays the MaterialTimePicker
2. Second click focuses the MaterialTimePicker: Second click focuses the MaterialTimePicker
3. Third click displays the keyboard: Third click displays the keyboard

Here is the code that handles the onClick listener for the EditText:

binding.startTimeTextInputEditText.setOnClickListener {
        val (hours, minutes) = Functions.getTimeSplit(binding.startTimeTextInputEditText.text.toString())
        val picker = setupTimePicker(hours, minutes, R.string.title_start_time, false)
    }

Here is the code that sets up and displays the MaterialTimePicker:

private fun setupTimePicker(
    hours: Int,
    minutes: Int,
    titleTime: Int,
    force24Hours: Boolean
): MaterialTimePicker {
    val isSystem24Hour = is24HourFormat(this)
    val clockFormat = if (!force24Hours) {
        if (isSystem24Hour) TimeFormat.CLOCK_24H else TimeFormat.CLOCK_12H
    } else {
        TimeFormat.CLOCK_24H
    }

    val picker = MaterialTimePicker.Builder()
        .setTimeFormat(clockFormat)
        .setTitleText(titleTime)
        .setInputMode(INPUT_MODE_KEYBOARD)
        .setHour(hours)
        .setMinute(minutes)
        .build()
    picker.show(supportFragmentManager, picker.toString())

    return picker
}

I have already tried things such as making the EditText not focusable:

android:focusableInTouchMode="false"

Here is the XML code for the EditText:

<com.google.android.material.textfield.TextInputLayout
                        android:id="@+id/startTimeTextInputLayout"
                        style="@style/TextInput.Dark"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="4dp"
                        android:focusableInTouchMode="false"
                        android:layout_weight="1"
                        app:errorTextAppearance="@style/errorAppearance"
                        app:hintTextAppearance="@style/Hint.Dark">

                        <com.google.android.material.textfield.TextInputEditText
                            android:id="@+id/startTimeTextInputEditText"
                            style="@style/TextInputEditText.NotClickable.Dark"
                            android:layout_width="match_parent"
                            android:focusableInTouchMode="false"
                            android:layout_height="wrap_content"
                            android:background="@drawable/background_rounded_input_text"
                            android:hint="@string/hint_start_time"
                            android:inputType="text" />

                    </com.google.android.material.textfield.TextInputLayout>

All I would like to achieve the same flow with just two clicks:

1. For the user to click on the EditText, the MaterialTimePicker to display.
2. Another click to select either the Hours or Minutes and start typing on the keyboard.

Solution

I ran into this two click requirement myself and it seems that it was a bug in the material-components-android library. The issue has been fixed in version 1.5.0-alpha05.

So updating the library dependency to version 1.5.0-alpha05 or newer should fix your issue.

Answered By - Taneli Korri