OnClickListener in TextInputEditText wrapped around TextInputLayout

Question

I have got a TextInputEditText wrapped around a TextInputLayout, as Google recommends to do: https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html

However, my TextInputEditText has an OnClickListener set on it so when it gets tapped by the User, a DatePickerDialog can popup.
My issue is that in fact, on the first tap nothing happens apart from the hint label to move above the TextInputEditText. On second tap, the DatePickerDialog is shown.

How could I get that DatePickerDialog to show up on first tap?
Setting the onClickListener on the TextInutLayout instead of the TextInputEditText does not work. Anyone has an idea?

What code? It's just a basic XML with a **TextInputLayout** wrapping a **TextInputEditText** and on the Java side a simple **OnClickListener** set on the **TextInputEditTex**t. — Andy Strife, Nov 18 '16 at 06:06

score 19 · Accepted Answer · answered Nov 18 '16 at 06:08

The calendar opening only on the second click is because you are using an edittext. On the first click, your Edit Text will get focus. then the second click only calls the onClickListener.

If you are not looking forward to edit the date set manually (using keyboard), then why not using a TextView to display the selected Date?.

Show Calendar on First Click :

If you need to use EditText and load the calender in the first click, then try setting an onFocusChangeListner to the editText instead of onClickListner.

editText.setOnFocusChangeListener(new OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if(hasFocus) {
           // Show your calender here 
        } else {
           // Hide your calender here
        }
    }
});

Thanks for your reply mate, I will implement it tomorrow when I get back to work and flag your respond right if it works. To answer your question: **why not using a TextView to display the selected Date?** Well you know, those monkeys from the UX/Design Team... — Andy Strife, Nov 18 '16 at 06:15
@AndyStrife Ok Then `setOnFocusChangeListener` on `EditTetext` that is work on single click to Show Calendar. — Harshad Pansuriya, Nov 18 '16 at 06:17

score 8 · Answer 2 · answered Mar 11 '19 at 13:17

8

Set the attribute android:focusableInTouchMode to false, like this:

android:focusableInTouchMode="false"

in your edittext xml code. For more information, visit here

answered Mar 11 '19 at 13:17

Umasankar

495
7
6

This works as well - and depending on your solution this could be the better solution. In my case I did a custom view called TextInputLayoutWithEditText that allows me to set a click listener and then internally calls getEditText().setFocusable(false); before passing the listener to the edit text - this works surprisingly well. – slott Apr 02 '20 at 13:07

score 1 · Answer 3 · answered Jul 13 '20 at 12:29

1

I answered the linked question with an improved solution that does not affect keyboard navigation but still allows you to have the desired focus behaviour.

See https://stackoverflow.com/a/62875800/9901599, but the crux of it is to not set any focus-related XML attributes, and do this in code:

editText.setOnFocusChangeListener { view, isFocused ->
    if (view.isInTouchMode && isFocused) {
        view.performClick()  // picks up first tap
    }
}
editText.setOnClickListener {
    showDatePicker() // the actual thing you want to do
}

answered Jul 13 '20 at 12:29

machfour

1,929
2
14
21

I'm not sure why this was downvoted since it solves the problem perfectly. I had the same problem as in the question and this is the the solution I am using. Have I missed something? – machfour Aug 21 '20 at 14:18
this solve a problem when (UX Experience) user have already picker datetime then want to pick against by click TextInputEditText. for example ``` _bindingIs.txtTglBerangkat.setOnFocusChangeListener { view, b -> if (b) pickDateTime(_bindingIs.txtTglBerangkat) } _bindingIs.txtTglBerangkat.setOnClickListener { pickDateTime(_bindingIs.txtTglBerangkat) } ``` – Yogi Arif Widodo Nov 08 '21 at 09:05

score 1 · Answer 4 · answered Oct 26 '22 at 04:49

A simple solution is to set:

android:focusable="false"

To TextInputEditText or EditText

And use:

edittext.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {

                if (motionEvent.getAction() == MotionEvent.ACTION_UP){
                    showDatePicker();
                    return true;
                }

                return false;
            }
        });

It will also avoid showing the cursor in the edittext field.

OnClickListener in TextInputEditText wrapped around TextInputLayout

4 Answers4