How to animate background color change on relative layouts views when pressing a ToggleButton in Android?

Question

I have a RelativeLayout containing another relative layout which has several backgroundColored views inside of it, like this, and continuing with more views:

<RelativeLayout 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"
                tools:context=".MainActivity
                ">

    <RelativeLayout
        android:id="@+id/palette"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:animateLayoutChanges="true">

        <View
            android:background="@color/purple"
            android:tag="@color/purple"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_width="100dip"
            android:layout_height="200dip"
            android:id="@+id/view1">
        </View>

Then I have a seekbar which when slided iterates over the number of views of the relative layouts changing the color of them, like this:

 @
 Override
 public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {


   for (int i = 0; i < mPalette.getChildCount(); i++) {
     View child = mPalette.getChildAt(i);

     int originalColor = Color.parseColor((String) child.getTag());
     int invertedColor = (0x00FFFFFF - (originalColor | 0xFF000000)) |
       (originalColor & 0xFF000000);

     if (getResources().getColor(R.color.white) != originalColor &&
       getResources().getColor(R.color.lightgray) != originalColor) {

       int red = (originalColor >> 16) & 0x000000FF;
       int green = (originalColor >> 8) & 0x000000FF;
       int blue = originalColor & 0x000000FF;

       int invR = (invertedColor >> 16) & 0x000000FF;
       int invG = (invertedColor >> 8) & 0x000000FF;
       int invB = invertedColor & 0x000000FF;

       child.setBackgroundColor(Color.rgb(
         (int)(red + (invR - red) * (progress / 100f)), (int)(green + (invG - green) * (progress / 100f)), (int)(blue + (invB - blue) * (progress / 100f))));
       child.invalidate();
     }
   }
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

That runs smoothly and without problems.

What I want to achieve is to slide that seekBar automatically by using a ToggleButton "auto" in order to view the colors changing while changing the progress of the seekbar from 0 to 100, but what actually happens with my code is that it waits until the cycle is completed, and only then the views are updated when the seekbar hits 100 (and it hits it directly without stepping to it), my code for this is this:

 public void autoToggle(View view) throws InterruptedException {
    SeekBar seekBar=(SeekBar)findViewById(R.id.seekBar);
    boolean on = ((ToggleButton) view).isChecked();
    if(on){
        mPalette = (RelativeLayout) findViewById(R.id.palette);
        for (int i =0;i<10;i++){
            seekBar.setProgress(i);
            mPalette.requestLayout();
            Thread.sleep(10);
        }
    }
    else
        seekBar.setProgress(0);
}

I have added the mPalette.requestLayout() method to see if it updated but neither did it.

If I finally found a good way of doing it (this was not a rush question, I had worked on it 2 days previous to asking it) should I answer it myself now? — Char, Apr 27 '15 at 10:45

score 0 · Accepted Answer · edited May 23 '17 at 11:51

From this answer I decided to research the ObjectAnimator class: Android ObjectAnimator

To start I did change the ToggleButton for two buttons, one called go100 and another called go0, both sliding the seekbar from its currentPosition(); to 100 or 0, this was because they have a better logic to their use, since a toggleButton would remain checked after performing the animation if I didn't force it's uncheck, and either way it would be a weird UI behaviour. Both buttons are outside the RelativeLayout containing the colored views that the seekBar recolours.

Buttons xml definition, by using the android:onClick: method there is no need for the button onClickListener to be overridden on the code, but just to define their onClick method

  <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/go_100"
        android:id="@+id/go100"
        android:onClick="go100"
        android:layout_alignTop="@+id/go0"
        android:layout_alignParentRight="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/go_0"
        android:id="@+id/go0"
        android:onClick="go0"
        android:layout_alignWithParentIfMissing="false"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="73dp"
        android:layout_alignParentLeft="true" />

Java code doing the slide of the seekBar, and allowing it to change while sliding, which was the actual problem, since I could make it move with a for, while or other method, but not show the sliding intervals in between the starting and the ending position.

 /* Called when the go100 button is clicked, it slides the seekBar from its current position
    to 100 in an adjusted time given the previous progress of the seekbar,
    given maximum 4 seconds and minimum 0 seconds
     */
    public void go100(View view){
        final SeekBar seekBar =  (SeekBar) findViewById(R.id.seekBar);
        ObjectAnimator anim = ObjectAnimator.ofInt(seekBar, "progress", seekBar.getProgress(),100);
        anim.setDuration(4000-(4000*seekBar.getProgress()/100));
        anim.start();
    }

    /* Called when the go0 button is clicked, it slides the seekBar from its current position
    to 100 in an adjusted time given the previous progress of the seekbar,
    given maximum 4 seconds and minimum 0 seconds
    */
    public void go0 (View view){
        final SeekBar seekBar =  (SeekBar) findViewById(R.id.seekBar);
        ObjectAnimator anim2 = ObjectAnimator.ofInt(seekBar, "progress", seekBar.getProgress(),0);
        anim2.setDuration(4000*seekBar.getProgress()/100);
        anim2.start();
    }

At the end I also wanted to try the seekbar to loop from one side to another by using to use the ObjectAnimator ofMultiInt (Object target, String propertyName, int[][] values) and providing it with the matrix of int [][] a = new int {{0,100},{100,0} but did not manage to solve it that way and settled with my above solution.

How to animate background color change on relative layouts views when pressing a ToggleButton in Android?

1 Answers1