Animate Shape Color in Android

Question

I would like to create a loop somewhere in my Android code that changes the color of a drawable rectangle between two colors continuously at some rate. I would like to start and stop its blinking using two buttons. I have done a lot of research, but just can't seem to figure out how to do it. I am new to android and do not have experience with run() methods. But I am guessing I have to make some kind of rectangle class with a run() method that will animate it into changing colors.

Answer 1

I am also fairly new to android, but I will give it a shot.

Since you say you want it to blink, you should be able to switch the actual image between, lets say, blue and red, with a simple 'for' loop. When the button is pressed, you could change the status of a boolean from false to true. Then, when the 'for' statement is not true anymore, it jumps to the next set of code, which stops it. Here is what I would do.

Your XML for the two buttons:

<Button
    android:id="@+id/start"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Start"
    android:Clickable="true"
    android:onClick="start"
     />

<Button
    android:id="@+id/stop" <!-- Gives the button an ID to use in java code -->
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Stop" <!-- sets the text on the button -->
    android:Clickable="true" <!-- makes the button clickable -->
    android:onClick="stop" <!-- The method it calls when it is clicked, removes the necessity of an OnClickListener -->
     />

Now, you would have 2 ImageViews: blue_rectangle and red_rectangle, both in the same place in the layout. Here is the XML for the two ImageViews

<ImageView
android:id="@+id/blue_rectangle"
android:layout_width="100dp"
android:layout_height="75dp"
android:layout_marginLeft="50dp"
android:layout_marginTop="5dp"
android:src="@drawable/blue_rectangle" />

<ImageView
android:id="@+id/red_rectangle"
android:layout_width="100dp"
android:layout_height="75dp"
android:layout_marginLeft="50dp"
android:layout_marginTop="5dp"
android:src="@drawable/red_rectangle" />

This next part is the tricky part.

Here is the Java.

package your.package.name.thingy.here;

//everything it tells you to import goes here

public class BlinkingActivity extends Activity{

 ImageView blueRectangle;
 ImageView redRectangle;
 Button start;
 Button stop;

    @Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.yourLayout);

    blueRectangle = (ImageView) findViewById(R.id.blue_rectangle);
    redRectangle = (ImageView) findViewById(R.id.red_rectangle);
    start = (Button) findViewById(R.id.start);
    stop = (Button) findViewById(R.id.stop);
    Boolean isBlinking = new Boolean(false);

    blinkRectangle(whateverVariableThisNeeds);

}

public static void blinkRectangle(View view){

blueRectangle.setVisibility(View.INVISIBLE);
redRectangle.setVisibility(View.INVISIBLE);

for(initialization; isBlinking; update){

   blueRectangle.setVisibility(View.VISIBLE);

   blueRectangle.postDelayed(new Runnable() {
   @Override
   public void run() {
   blueRectangle.setVisibility(View.INVISIBLE);
   }
   }, 2000); //the 2000 is the number of milliseconds for how long blue is visible
   redRectangle.setVisibility(View.VISIBLE);

   redRectangle.postDelayed(new Runnable() {
   @Override
   public void run(){
   redRectangle.setVisibility(View.INVISIBLE);
   }
   }, 2000);

   blueRectangle.setVisibility(View.VISIBLE); //This prevents a bug where if the user hits the stop button at just the right time, both rectangles will be invisible.
}


public static void start(View view){ //no need to call this anywhere, the XML onClick does it for you

isBlinking = true; //I think this is how you set a boolean, if not, correct me.

}

public static void stop(View view){//same here

isBlinking = false; //again, correct me if I'm wrong.

}

}

Here is what the code basically does.

It has a boolean which is defaulted to false. While it is false, the rectangle does not blink. While it is true, the for statement in blinkRectangle() runs. That for loop makes the blue on visible, waits 2 seconds, makes it invisible, makes the red one visible, waits two seconds, and repeats. The start() and stop() methods switch the boolean to true and false, respectively. I think this type of for loop re-checks the boolean when it gets back to the top. I have never worked with it before. That's what I could gather from the website I looked at.

Well, I think that about does it. If you don't understand what any of the code does, or it doesn't work, or I have the question wrong, or I am just downright wrong, or ANYTHING, just comment on this answer. I hope this works!

Good Luck!

P.S. Here are the websites I used for reference

http://www.tutorialspoint.com/java/java_loop_control.htm

http://www.java-examples.com/java-boolean-example

Wow...I just realized this question is 2 years old. Still, I hope this helps you!