Android change button text takes a long time

Question

For my app I want to disable/change a specific button that is pressed.

I have an onclick method called btnClicked which simplified looks like this:

Public class MainActivity extends Activity{
     Button myBytton;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
        myBytton = (Button)findViewById(R.id.buttonCall);
     } 
     public void btnClicked(View view)
     {
          myBytton.setText("loading");
          myBytton.setEnabled(false);
          myBytton.setClickable(false);
          // Do a call to an external api
          callApi();
     }

     public void callApi(){
          // run querys
          if(succesullyCalledApi){
                 vibrator.vibrate(500);
                 // I tried commenting out the below part, 
                 // it is than visible that the phone vibrates before it 
                 // has changed the text (atleast a quarter of a second).
                 myBytton.setText("search");
                 myBytton.setEnabled(true);
                 myBytton.setClickable(true);
          }
     }  
}

In the callApi method is a vibrate method which vibrates after the function gets a result. Also if there is a result in the callApi myButton will be enabled and the text changed to search.

What happens is the following:

I click on the button, the phone vibrates first and afterwards it changes its text.

my question.

Why did callApi / vibrate run before myBytton.setText ?

Answer 1

what NigelK said is true.

When you arrive in the btnClicked method all the instructions are made on the UI thread. Therefore when you ask the System to vibrate, it will be blocked for XX time depending on the time you passed to the method vibrator.vibrate(XX);.

In order to avoid this "freeze" you need to make the vibration on another Thread.

Here is what it will look like :

Public class MainActivity extends Activity 
{
    Button myBytton;

     @Override
     protected void onCreate(Bundle savedInstanceState) 
     {
         myBytton = (Button)findViewById(R.id.buttonCall);
     } 

     public void btnClicked(View view)
     {
         myBytton.setText("loading");
         myBytton.setEnabled(false);
         myBytton.setClickable(false);
         // Do a call to an external api
         callApi();
     }

     public void callApi() 
     {
         // run querys
         if(succesullyCalledApi) 
         {
             // here you create and run the Thread.
             // put anything you want to do inside the run method
             new Thread(
                 new Runnable() 
                 {
                     public void run() 
                     {
                         // here you start the vibration
                         vibrator.vibrate(500);
                     }
                 }
             ).start();


             // I tried commenting out the below part, 
             // it is than visible that the phone vibrates before it 
             // has changed the text (atleast a quarter of a second).
             myBytton.setText("search");
             myBytton.setEnabled(true);
             myBytton.setClickable(true);
         }
     }  
}

And that's it. It will launch another Thread that will handle the vibration and not freeze your UI thread.

---

EDIT

Here is the AsyncTask version :

The three elements asked when you extend AsyncTask are :

• The type of the parameters you pass to the doInBackground() method
• The Type of the elements that are passed in the onProgressUpdate() method.
• The Type of the element returned by the doInBackground() method that is also the parameter of the onPostExecute() method.

This is what it looks like :

public class MyTask extends AsyncTask<Void, Integer, Boolean> 
{
    private Button mButton;

    public MyTask(Button button) 
    {
        mButton = button;
    }     

     // Here everything will run on a background Thread
     protected Boolean doInBackground(Void... voids) 
     {
        boolean succesullyCalledApi = false;

        // do your long querys here
        // ...

        return succesullyCalledApi;
     }

     // Here everything will run on the UI Thread
     protected void onProgressUpdate(Integer... progress) {
         // here you can make some update to the UI like updating a 
         // progress bar
     }

     // Here everything will run on the UI Thread
     protected void onPostExecute(Boolean succesullyCalledApi) 
     {
         if(succesullyCalledApi) 
         {
             mButton.setText("search");
             mButton.setEnabled(true);
             mButton.setClickable(true);

             // here you start the vibration
             vibrator.vibrate(500);
         }
     }
 }

And in your callApi() method you only have to to this :

public void callApi() 
{
    new MyTask(myButton).execute();
}

---

EDIT 2

In order to retrieve the query back to your main Thread (or UI Thread) all you have to do is ... nothing.

You are in the UI Thread when the onPostExecute() method is called.

But I assume that you want to retrieve the query back to your MainActivity. To do so :

• Pass MainActivity in parameter of MyTask constructor,
• Create a method in MainActivity named processQuery() (or whatever you want),
• Finally call this method in the onPostExecute() method.

Here are some snippets :

Public class MainActivity extends Activity 
{
    Button myBytton;

    ...


    public void callApi() 
    {
        // add this to the constructor
        new MyTask(this, myButton).execute();
    }

    // I put String here but adapt it to your query Type.
    public void processQuery(String query)
    {
        // process your query here.
    }
}


public class MyTask extends AsyncTask<Void, Integer, Boolean> 
{
    private Button mButton;
    private MainActivity mMainActivity;

    public MyTask(MainActivity mainActivity, Button button) 
    {
        mButton = button;
        mMainActivity = mainActivity;
    }

    ...

    // Here everything will run on the UI Thread
     protected void onPostExecute(Boolean succesullyCalledApi) 
     {
         if(succesullyCalledApi)
         {
             // process your query
             mMainActivity.processQuery("THE QUERY YOUR WANT TO PROCESS");

             mButton.setText("search");
             mButton.setEnabled(true);
             mButton.setClickable(true);

             // here you start the vibration
             vibrator.vibrate(500);
         }
     }

}

There probably is a better way to do this but this one is simple and work :)

Hope it helps.

Cheers

Answer 2

Because you are doing all stuff at the UI Thread. You must use an AsyncTask for your long running operations.

Try below implementation:

public void callApi() {
  MyTask myTask = new MyTask();
  myTask.execute();
}


private class MyTask extends AsyncTask<Void, Void, Boolean> {
  protected void doInBackground(Void... params) {
    // This runs on a separate background thread

    boolean succesullyCalledApi = false;
    // run querys
    // do your long running query here and return its result.

    return succesullyCalledApi;
  }

  protected void onPostExecute(Boolean succesullyCalledApi) {
    // this runs on UI Thread

    if(succesullyCalledApi){
      vibrator.vibrate(500);
      myBytton.setText("search");
      myBytton.setEnabled(true);
      myBytton.setClickable(true);
    } else {
      // You should better think this part also. what will happen if result is false?
    }
  }

}

Answer 3

This is because your call to the API is being done on the UI thread. Even though you have made changes to the UI, the screen won't refresh until the processing invoked from the button clicked event completes. Call your API on a new thread or via an Async Task to get the behaviour you want.