Change color of gradient like ScreenSaver?

Dynamic Gradient Colors: Recreating the Screensaver Effect on Android

Learn how to implement a continuously changing linear gradient background in your Android applications, similar to classic screensavers, using GradientDrawable and ValueAnimator.

Creating visually engaging user interfaces often involves dynamic elements. One popular effect is a smoothly transitioning color gradient, reminiscent of old screensavers. This article will guide you through implementing such an effect in an Android application, allowing you to dynamically change the colors of a linear gradient background.

Understanding the Core Components

To achieve a dynamic gradient, we'll primarily rely on two Android components: GradientDrawable and ValueAnimator.

GradientDrawable is a drawable that can define a gradient. It allows you to specify the gradient type (linear, radial, sweep), orientation, and the colors involved. We'll be using a linear gradient.

ValueAnimator is a powerful animation class that animates a single value over a specified duration. Instead of animating properties of views directly, it animates arbitrary values, which we can then use to update our GradientDrawable's colors. This allows for fine-grained control over the animation process.

flowchart TD
    A[Start Animation] --> B{ValueAnimator.ofObject()};
    B --> C{UpdateListener (onAnimationUpdate)};
    C --> D[Calculate Interpolated Colors];
    D --> E[Create new GradientDrawable];
    E --> F[Set new colors to GradientDrawable];
    F --> G[Set GradientDrawable as View Background];
    G --> H{Animation Loop?};
    H -- Yes --> B;
    H -- No --> I[End Animation];

Workflow for animating gradient colors

Implementing the Dynamic Gradient

The process involves defining a set of colors to transition between, creating a GradientDrawable with these colors, and then using a ValueAnimator to smoothly interpolate between different color sets. The ValueAnimator will trigger updates, allowing us to generate new GradientDrawable instances with the interpolated colors and apply them to our view's background.

import android.animation.ArgbEvaluator
import android.animation.ValueAnimator
import android.graphics.drawable.GradientDrawable
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.ContextCompat

class MainActivity : AppCompatActivity() {

    private lateinit var rootView: View
    private var currentAnimator: ValueAnimator? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        rootView = findViewById(R.id.root_layout)

        startGradientAnimation()
    }

    private fun startGradientAnimation() {
        val color1 = ContextCompat.getColor(this, R.color.gradient_start_color_1)
        val color2 = ContextCompat.getColor(this, R.color.gradient_end_color_1)
        val color3 = ContextCompat.getColor(this, R.color.gradient_start_color_2)
        val color4 = ContextCompat.getColor(this, R.color.gradient_end_color_2)

        val colors1 = intArrayOf(color1, color2)
        val colors2 = intArrayOf(color3, color4)

        currentAnimator?.cancel()

        currentAnimator = ValueAnimator.ofObject(ArgbEvaluator(), colors1, colors2).apply {
            duration = 3000 // 3 seconds for one transition
            repeatMode = ValueAnimator.REVERSE
            repeatCount = ValueAnimator.INFINITE
            addUpdateListener { animator ->
                val animatedColors = animator.animatedValue as IntArray
                val gradientDrawable = GradientDrawable(
                    GradientDrawable.Orientation.TL_BR,
                    animatedColors
                )
                rootView.background = gradientDrawable
            }
            start()
        }
    }

    override fun onDestroy() {
        super.onDestroy()
        currentAnimator?.cancel()
    }
}

Kotlin code for animating a linear gradient background.

<!-- activity_main.xml -->
<androidx.constraintlayout.widget.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:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- Your other UI elements can go here -->

</androidx.constraintlayout.widget.ConstraintLayout>

Layout XML for the root view that will display the gradient.

<!-- colors.xml -->
<resources>
    <color name="gradient_start_color_1">#FF6A00</color>
    <color name="gradient_end_color_1">#EE0979</color>
    <color name="gradient_start_color_2">#00C6FF</color>
    <color name="gradient_end_color_2">#0072FF</color>
</resources>

Define your gradient colors in colors.xml.

Customizing the Gradient Effect

You can customize various aspects of this dynamic gradient:

• Colors: Add more color pairs to ValueAnimator.ofObject() to create a longer sequence of transitions. You can also use a TypeEvaluator to define how colors are interpolated.
• Duration: Adjust the duration property of the ValueAnimator to control the speed of the transition.
• Orientation: Change GradientDrawable.Orientation.TL_BR to other orientations like TOP_BOTTOM, LEFT_RIGHT, BL_TR, etc., to alter the direction of the gradient.
• Repeat Mode: ValueAnimator.REVERSE makes the animation play backward after reaching the end, creating a smooth loop. ValueAnimator.RESTART would jump back to the start.
• View: Apply the gradient to any View by setting its background. For a full-screen effect, use the root layout of your activity or fragment.

Considerations for Performance

While this approach is generally efficient, keep the following in mind:

• Number of Colors: Animating between too many distinct colors in a very short duration might be slightly more demanding, but for typical screensaver-like effects, it's usually fine.
• View Hierarchy: Applying the gradient to a large view or the root layout is common. If you have a very complex layout with many overlapping views, ensure the background drawing doesn't cause overdraw issues, though modern Android rendering is highly optimized.
• Battery Life: Continuous animations, especially with high frame rates, can consume more battery. For background effects, a duration of 3-5 seconds per transition is a good balance between fluidity and efficiency.

By following these steps, you can create a captivating and dynamic gradient background for your Android application, adding a touch of modern flair and visual interest to your user interface.