How can I STOP this animation?

Question

I created a color background animation that starts on button click (it smoothly changes the background color over and over again). My problem is that I can't stop the animation (if I click the button again it increases the animation speed). I already tried to create a while-loop but then the animation did't work anymore. My goal is that the animation starts if I press the image Btn, and if I press it again it should stop.

Code:

imageButton_info.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v){

                // Handler and runnable to run the animation in devices sdk below honeycomb.
                final Handler handler = new Handler();

                Runnable ChangeBackgroundRunnable = new Runnable() {

                    @Override
                    public void run() {
                        number++;
                        float[] hsvColor = {0, 1, 1};
                        hsvColor[0] = 360f * number / 100;
                        color.setBackgroundColor(Color.HSVToColor(hsvColor));

                        handler.postDelayed(this, 80);
                        if (number >=100)
                            number = 1;
                    }
                };
                number = 0;
                handler.removeCallbacks(ChangeBackgroundRunnable);
                handler.postDelayed(ChangeBackgroundRunnable, 0);

        }
    });

But the created program works almost perfectly, there should be a way to stop it? — Nick88, Feb 16 '17 at 00:49
Check this old stackoverflow [answer](http://stackoverflow.com/a/9458785/5156016). — , Feb 16 '17 at 00:58
Think about how to extend the solution proposed here: http://stackoverflow.com/a/10630973/5018798 — Gavin Harris, Feb 16 '17 at 01:24

score 0 · Accepted Answer · answered Feb 16 '17 at 01:46

Looking at your code (again) your removeCallbacks method is passing in an Instance of your Runnable that is yet to be running.

You will need to Store the instance of the Runnable outside of your Click Listener. I have jsut knocked up a quick example that shows my thinking:

public class MainActivity extends AppCompatActivity {

    TextView textView;
    Button startBtn;
    int counter = 0;
    boolean running = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        textView = (TextView) findViewById(R.id.tvCounter);
        startBtn = (Button) findViewById(R.id.startBtn);

        final Handler counterHandler = new Handler(Looper.getMainLooper()); //Just to be specific
        final Runnable myRunnable = new Runnable() {
            @Override
            public void run() {
                textView.setText(String.format("Count is %s", counter ++));
                counterHandler.postDelayed(this, 100);
            }
        };


        startBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                if(running) {
                    counterHandler.removeCallbacks(myRunnable);
                    running = false;
                } else {
                    counterHandler.post(myRunnable);
                    running = true;
                }


            }
        });

    }

}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/activity_main"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="example.com.test.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    android:id="@+id/tvCounter"/>

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
            android:id="@+id/startBtn" android:text="Start Stop Button"/>
</RelativeLayout>

Thanks a lot for your answer, your suggestion is working perfectly! — Nick88, Feb 17 '17 at 00:56

How can I STOP this animation?

1 Answers1