Text Animation and Background change

Question

I'm stuck and need help.

How can I add animations like on the picture. I want the color of the background and text to be smoothly automatically changed 1 sec after the app is launched. And to be like a cycle. Meanwhile an icon is impulsing.

Answer 1

Here you go..

I did the code to change color of background layout and text. Currently I did for random colors, if you need pre-defined colors, please let me know. Below is my code

1. activity_main.xml

`

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.golevr.background_animation.MainActivity"
    android:id="@+id/constraint">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

`

2. MainActivity.java

`

public class MainActivity extends AppCompatActivity {

            // Move your declarations here if you intend on using them after the onCreate() method
            ConstraintLayout layout;
            TextView textView;

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

                // Inflate your objects
                layout = (ConstraintLayout) findViewById(R.id.constraint);
                textView = (TextView) findViewById(R.id.textView);

                // We change the color to RED for the first time as the program loads
                layout.setBackgroundColor(Color.RED);

                // We change the color to GREEN for the first time as the program loads
                textView.setTextColor(Color.GREEN);

                // Create the timer object which will run the desired operation on a schedule or at a given time
                Timer timer = new Timer();

                // Create a task which the timer will execute.  This should be an implementation of the TimerTask interface.
                // I have created an inner class below which fits the bill.
                MyTimer myTimer = new MyTimer();

                // We schedule the timer task to run after 1000 ms and continue to run every 1000 ms.
                timer.schedule(myTimer,1000,1000);
            }

            // An inner class which is an implementation of the TImerTask interface to be used by the Timer.
            class MyTimer extends TimerTask{
                @Override
                public void run() {

                    // This runs in a background thread.
                    // We cannot call the UI from this thread, so we must call the main UI thread and pass a runnable
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            Random rand = new Random();

                            // The random generator creates values between [0,256) for use as RGB values used below to create a random color
                            // We call the RelativeLayout object and we change the color.  The first parameter in argb() is the alpha.
                            layout.setBackgroundColor(Color.argb(255, rand.nextInt(256),rand.nextInt(256),rand.nextInt(256)));
                            textView.setTextColor(Color.argb(222,rand.nextInt(222),rand.nextInt(222),rand.nextInt(222)));
                        }
                    });
                }
            }
        }

`

Is this what you want?

Answer 2

You can use Property Animation for changing color

int colorFrom = getResources().getColor(R.color.red);
int colorTo = getResources().getColor(R.color.blue);
ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
colorAnimation.setDuration(500); // milliseconds
colorAnimation.addUpdateListener(new AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animator) {
        textView.setBackgroundColor((int) animator.getAnimatedValue());
    }

});
colorAnimation.start();

Use alpha animations to fade in and out the textchanging So on repeat is when it is fading back in so you can update the text at that time

AlphaAnimation anim = new AlphaAnimation(1.0f, 0.0f);
        anim.setDuration(500);
        anim.setRepeatCount(1);
        anim.setRepeatMode(Animation.REVERSE);
        txtLabel.startAnimation(anim);

        anim.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }
            @Override
            public void onAnimationEnd(Animation animation) {

            }
            @Override
            public void onAnimationRepeat(Animation animation) {
                txtLabel.setText("my next Text"); //for fading back in
            }
        });

You can use the same animation for alpha on a bitmap or imageView to pulse in and out as well.

AlphaAnimation animPulse = new AlphaAnimation(1.0f, 0.0f);
    animPulse.setDuration(500);
    animPulse.setRepeatCount(Animation.INFINITE);
    animPulse.setRepeatMode(Animation.REVERSE);

    imgPulse.startAnimation(animPulse);

Then of course just put in your

public void onCreate(){
      Handler mMainHandler = new Handler(Looper.prepareMainLooper());
      mMainHandler.postDelay(new Runnable(){
           doAnimations();
      }, 1000);
}

Then simply lump all your animations into methods and call them from doAnimations. Good luck.