Skip to main content

android - How to create a gradient background animation


<?xml version="1.0" encoding="utf-8"?>


import android.os.Bundle;
import android.content.Context;
import android.util.DisplayMetrics;
import android.view.Window;
import android.view.WindowManager;
import android.widget.CompoundButton;
import android.widget.RelativeLayout;
import android.os.Handler;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {
    private Context mContext;
    private RelativeLayout mRL;

    private Handler mHandler;
    private Runnable mRunnable;
    private int mInterval = 5000;
    private Point mScreenSize;

    private TransitionDrawable drawable;;
    private GradientGenerator mGradientGenerator;
    private GradientDrawable mStartGradient;
    private GradientDrawable mEndGradient;

    protected void onCreate(Bundle savedInstanceState) {
        // Request for window action bar feature

        // Hide the action bar

        // Get the application context
        mContext = getApplicationContext();

        // Get the widgets reference from XML layout
        mRL = (RelativeLayout) findViewById(;
        ToggleButton toggle = (ToggleButton) findViewById(;

        // Get the screen size in pixels
        mScreenSize = getScreenSize();

                A Handler allows you to send and process Message and Runnable objects associated with
                a thread's MessageQueue. Each Handler instance is associated with a single thread
                and that thread's message queue. When you create a new Handler, it is bound to the
                thread / message queue of the thread that is creating it -- from that point on,
                it will deliver messages and runnables to that message queue and execute them
                as they come out of the message queue.
            public Handler ()
                Default constructor associates this handler with the Looper for the current thread.
                If this thread does not have a looper, this handler won't be able to receive
                messages so an exception is thrown.
        // Initialize a new Handler
        mHandler = new Handler();

        // Initialize a new instance of GradientGenerator class
        mGradientGenerator = new GradientGenerator(mContext,mScreenSize);

        // Generate a random GradientDrawable
        mStartGradient = mGradientGenerator.getRandomGradientDrawable();

        // Set the RelativeLayout background

        // Set click listener for ToggleButton
        toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                if (b) {
                            Represents a command that can be executed. Often used to run code in a
                            different Thread.

                            A Thread is a concurrent unit of execution. It has its own call stack for
                            methods being invoked, their arguments and local variables. Each application
                            has at least one thread running when it is started, the main thread, in the
                            main ThreadGroup. The runtime keeps its own threads in the system thread group.

                            There are two ways to execute code in a new thread. You can either subclass
                            Thread and overriding its run() method, or construct a new Thread and pass a
                            Runnable to the constructor. In either case, the start() method must be
                            called to actually execute the new Thread.
                    // Initialize a new Runnable
                    mRunnable = new Runnable() {
                            public abstract void run ()
                                Starts executing the active part of the class' code. This method is
                                called when a thread is started that has been created with a class which
                                implements Runnable.
                        public void run() {
                            // Do a task after an interval
                    // Play animation immediately after button click
                    mHandler.postDelayed(mRunnable, 100);
                } else {
                        public final void removeCallbacks (Runnable r)
                            Remove any pending posts of Runnable r that are in the message queue.
                    // Stop the animation

    // Custom method to do a task
    protected void doTask(){
        // If the animation already running
        if(mEndGradient != null){
                To make a continuous animation we get the last animation ending GradientDrawable
                and set it as next animation starting GradientDrawable
            mStartGradient = mEndGradient;

            An extension of LayerDrawables that is intended to cross-fade between the first
            and second layer. So, TransitionDrawable support only two layers.
        // Generate an array of GradientDrawable objects
        GradientDrawable[] mGradientDrawableArray = new GradientDrawable[]{

        // Get and store the last element from GradientDrawable array
        mEndGradient = mGradientDrawableArray[mGradientDrawableArray.length-1];

        // Initialize a new TransitionDrawable using ColorDrawable array
        drawable = new TransitionDrawable(mGradientDrawableArray);

        // Set the animation duration

        // Set the TransitionDrawable as RelativeLayout background drawable

            public final boolean postDelayed (Runnable r, long delayMillis)
                Causes the Runnable r to be added to the message queue, to be run after the specified
                amount of time elapses. The runnable will be run on the thread to which this handler
                is attached. The time-base is uptimeMillis(). Time spent in deep sleep will add an
                additional delay to execution.
        // Schedule the next animation

    // Custom method to get screen size in pixels
    protected Point getScreenSize(){
        DisplayMetrics dm = new DisplayMetrics();
        WindowManager windowManager = (WindowManager) mContext.getSystemService(mContext.WINDOW_SERVICE);
        Point size = new Point(dm.widthPixels,dm.heightPixels);
        return size;


import android.content.Context;

import java.util.Random;

public class GradientGenerator {
    private Random mRandom = new Random();
    private Context mContext;
    private Point mGradientSize;

    GradientGenerator(Context context, Point gradientSize){
        // Set the context of application
        this.mContext = context;
        // Set the gradient size (width and height)
        this.mGradientSize = gradientSize;

    // Custom method to generate random GradientDrawable array
    protected GradientDrawable[] getRandomGradientDrawableArray(int length){
        GradientDrawable[] gradients = new GradientDrawable[length];
        for (int i=0;i<length;i++){
            gradients[i] = getRandomGradientDrawable();
        return gradients;

    // Custom method to generate random GradientDrawable
    protected GradientDrawable getRandomGradientDrawable(){
        GradientDrawable gradient = new GradientDrawable();

            public void setOrientation (GradientDrawable.Orientation orientation)
                Changes the orientation of the gradient defined in this drawable.

                Note: changing orientation will affect all instances of a drawable loaded from a
                    resource. It is recommended to invoke mutate() before changing the orientation.

                    orientation : The desired orientation (angle) of the gradient
        // Set the gradient orientation

            public void setColors (int[] colors)
                Sets the colors used to draw the gradient.
                Each color is specified as an ARGB integer and the array must contain at least 2 colors.

                    colors : an array containing 2 or more ARGB colors
        // Set the gradient colors

        // The type of the gradient: LINEAR_GRADIENT, RADIAL_GRADIENT or SWEEP_GRADIENT
        gradient = setRandomGradientType(gradient);

            public void setSize (int width, int height)
                Sets the size of the shape drawn by this drawable.

                width : The width of the shape used by this drawable
                height : The height of the shape used by this drawable
        // Set the gradient size (width and height)
        gradient.setSize(mGradientSize.x, mGradientSize.y);

        // Return the GradientDrawable
        return gradient;

    // Custom method to get a random GradientDrawable GradientType
    protected GradientDrawable setRandomGradientType(GradientDrawable gradient){
            public void setGradientType (int gradient)
                Sets the type of gradient used by this drawable.

                    gradient : The type of the gradient: LINEAR_GRADIENT, RADIAL_GRADIENT or SWEEP_GRADIENT
            Get a random number from 0,1, and 2
            We Uses the random numbers as this way
            0 = LINEAR_GRADIENT
            1 = RADIAL_GRADIENT
            2 = SWEEP_GRADIENT
        int randomNumber = mRandom.nextInt(3);
        if(randomNumber == 0){
        }else if(randomNumber==1)
        }else {

        // Set the gradient center for GradientDrawable
        if(randomNumber !=0){
                Sets the center location of the gradient. The radius is honored only when the
                gradient type is set to RADIAL_GRADIENT or SWEEP_GRADIENT.

                Gradient center honored a float value between 0 to 1
            //Random.nextFloat() * (x - y) + x
                    mRandom.nextFloat() * (1 - 0) + 0,
                    mRandom.nextFloat() * (1 - 0) + 0)

        // Sets the radius of the gradient.
        if(randomNumber == 1){
                public void setGradientRadius (float gradientRadius)
                    Sets the radius of the gradient. The radius is honored only when the gradient type is set to RADIAL_GRADIENT.

                        gradientRadius : The radius of the gradient in pixels

        // Return the GradientDrawable where gradient type assigned
        return gradient;

    // Custom method to generate a color array of random colors
    protected int[] getRandomColorArray(){
        // Get random number between minimum (inclusive) to maximum (exclusive)
        int numberOfColors = mRandom.nextInt(16-3)+3;
        int[] colors = new int[numberOfColors];
        for (int i=0;i<numberOfColors;i++){
            colors[i] = getRandomColor();
        // Return the color array, number of elements between 3 to 15
        return colors;

    // Get a random gradient orientation
    protected GradientDrawable.Orientation getRandomOrientation(){
        // Initialize a new array of GradientDrawable Orientation
        GradientDrawable.Orientation[] orientations = new GradientDrawable.Orientation[]{
                // BL_TR : draw the gradient from the bottom-left to the top-right
                // BOTTOM_TOP : draw the gradient from the bottom to the top
                // BR_TL : draw the gradient from the bottom-right to the top-left
                // LEFT_RIGHT : draw the gradient from the left to the right
                // RIGHT_LEFT : draw the gradient from the right to the left
                // TL_BR : draw the gradient from the top-left to the bottom-right
                // TOP_BOTTOM : draw the gradient from the top to the bottom
                // TR_BL : draw the gradient from the top-right to the bottom-left
        // Return a random Orientation
        GradientDrawable.Orientation orientation = orientations[mRandom.nextInt(orientations.length)];
        return orientation;

    // Custom method to generate a random color
    protected int getRandomColor(){
        // 256 is excluded, so random number is between 0 to 255
        int red = mRandom.nextInt(256);
        int green = mRandom.nextInt(256);
        int blue = mRandom.nextInt(256);
        int color = Color.argb(255, red, green, blue);
        // Return the random argb color
        return color;
More android examples

Popular posts from this blog

How to use NumberPicker in Android

Table of contentsNumberPicker ExamplesetOnValueChangedListeneronValueChange()setWrapSelectorWheel()setMinValue()setMinValue()setMaxValue()NumberPicker with String ArraysetDisplayedValues()String Array1. NumberPicker Example activity_main.xml <RelativeLayout xmlns:android="" xmlns:tools="" android:id="@+id/rl" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" tools:context=".MainActivity" android:background="#ffffff" > <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="25dp" android:text="Select a number..." /> <NumberPicker android:id="@+id/np" …

TextView new line (multiline) in android

TextView new line (multiline) TextView display text on android app. by default, TextView show text on a single line, and if it is long then TextView take more lines to display its text. android developers can generate a new line on TextView both programmatically and syntactically. android developers can make a multiline TextView without splitting text to multiline by android:minLines attribute.

the following android example code demonstrate us how can we syntactically create a new line on TextView widget by xml layout file and string resource file.

the simplest way to create a new line on TextView is android:text attribute. android:text attribute allow us to display text on android app. we can add a simple '\n' to TextView text where we want to start a new line. in this way we can create a multiline TextView widget in android app. we can assign android:text attribute value by this way android:text="Line1 \n Line2 \n Line3" for a TextView widget. this value will…

How to change TextView font size in android

TextView font size TextView widget display text on android application. we can set or change TextView font size statically by declarative syntax in xml layout file or programmatically at run time in java file. even we can use an xml file source to define font size.

the following example code demonstrate us how can we define TextView font size in xml layout file and how can we uses dimens.xml to reference font size. in this example we did not changes any coding in java file, so here we only include the layout xml file and dimens.xml file. activity_main.xml <LinearLayout xmlns:android="" xmlns:tools="" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:layout_margin="25dp" tools:context=".MainActivity" > <TextView android:id=&…