Search code examples
androidandroid-edittexttextwatcher

Show spinner in EditText using "setCompoundDrawables" and TextWatcher


I'm trying to achieve this effect on a EditText:

Spinner

Using TextWatcher and setCompoundDrawables,

This is my code:

    searchEditText = (EditText) findViewById(R.id.editText_search);

    searchEditText.addTextChangedListener(new TextWatcher() 
    {
        CountDownTimer timer = new CountDownTimer(800, 800)
        {
            @Override
            public void onTick(long millisUntilFinished) 
            {
            }

            @Override
            public void onFinish() 
            {
                Log.i("SearchActivity", "searching..");
            }
        };

        @Override
        public void afterTextChanged(Editable arg0) 
        {
        }

        @Override
        public void beforeTextChanged(CharSequence arg0, int arg1, int arg2, int arg3)
        {
            timer.cancel();
            timer.start();

            //This is not working:
            searchEditText.setCompoundDrawablesWithIntrinsicBounds(android.R.drawable.ic_menu_call, 0, 0, 0);
        }

        @Override
        public void onTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) 
        {
            searchEditText.setCompoundDrawablesWithIntrinsicBounds(android.R.drawable.ic_menu_search, 0, 0, 0);
        }
    });

In the code I've commented what is not working: "// This is not working"

I have two questions:

  1. What drawable should I use for a animated spinner/loading? android.R.drawable.what?

  2. With the testing icon I've chosen (ic_menu_call) is not working. I'm always seeing the search icon and never the "call" icon.

I want that while the user is typing he sees the other non-search icon (the spinner)


Solution

  • The problem is that beforeTextChanged and onTextChanged happens too fast that the EditText doesnt have time you change drawable from one to another thus giving you only the last drawable that is added which is the ic_menu_search

    solution:

    use your timer instead to change drawable to give time to edditText to change drawable inside it.

    sample:

    final EditText searchEditText = new EditText(this);
    
        searchEditText.addTextChangedListener(new TextWatcher() 
        {
            CountDownTimer timer = new CountDownTimer(1000, 800)
            {
                @Override
                public void onTick(long millisUntilFinished) 
                {
                    searchEditText.setCompoundDrawablesWithIntrinsicBounds(android.R.drawable.ic_menu_call, 0, 0, 0);
    
                }
    
                @Override
                public void onFinish() 
                {
                    Log.i("SearchActivity", "searching..");
                    searchEditText.setCompoundDrawablesWithIntrinsicBounds(android.R.drawable.ic_menu_search, 0, 0, 0);
                }
            };
    
            @Override
            public void afterTextChanged(Editable arg0) { }
    
            @Override
            public void beforeTextChanged(CharSequence arg0, int arg1, int arg2, int arg3)
            {
                timer.cancel();
                timer.start();
            }
    
            @Override
            public void onTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) { }
        });
    

    As you can see I set your timer duration to 1 second so the EditText has time to change back to another drawable.

    For question 1 and 2, you cant add View to the setCompoundDrawablesWithIntrinsicBounds that it only need drawable or bitmap from your drawable folder or android default drawable folder.