Gradients

Gradients can be linear or radial.

Linear Gradients

A linear gradient is set up using the method below:

GradientPaint(startX, startY, startColour, endX, endY, endColour)

The surface of the component that is less than startX,startY is coloured solely in startColour. Likewise, the surface of the component that is great than endX,endY is coloured solely in endColour.

Gradient_Linear_Demo example (Run Applet)

import java.awt.*;
import javax.swing.*;

public class Gradient_Linear_Demo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JLayeredPane
    {
        @Override
        public void paintComponent(Graphics g)
        {
            final Graphics2D g2 = (Graphics2D) g;
            GradientPaint gradient = new GradientPaint(0, 0, Color.yellow, 0, this.getHeight(), Color.blue);
            
            g2.setPaint(gradient);
            g2.fillRect(0, 0, getWidth(), getHeight());
        }
    }
}

Multistop Linear Gradients

A multistop linear gradient is set up using the method below:

LinearGradientPaint(startX, startY, startColour, endX, endY, fractions[], colours[])

The fractions are all floating point numbers in the range of 0 to 1. A linear gradient is generated between each pair of fractions, using the matching pair of colours.

The surface of the component that is less than startX,startY is coloured solely in startColour. Likewise, the surface of the component that is great than endX,endY is coloured solely in endColour.

Gradient_MultiStopLinear_Demo example (Run Applet)

import java.awt.*;
import javax.swing.*;

public class Gradient_MultiStopLinear_Demo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JLayeredPane
    {
        public View()
        {
            super();
        }

        @Override
        public void paintComponent(Graphics g)
        {
            final Graphics2D g2 = (Graphics2D) g;

            // proportional position at which each new colour will be assigned
            // and the colours to apply
            final float steps[] =
            {
                0.0f, 0.49f, 0.5f, 1.0f
            };
            final Color colours[] =
            {
                Color.yellow, Color.red, Color.red, Color.white
            };
            final LinearGradientPaint gradient = new LinearGradientPaint(0.0f, 0.0f, 0.0f, getHeight(), steps, colours);

            g2.setPaint(gradient);
            g2.fillRect(0, 0, getWidth(), getHeight());
        }
    }
}

Radial Gradients

A radial gradient is similar to a multiStops linear gradient.

RadialGradientPaint(centrePoint, radius, fractions[], colours[])

Gradient_Radial_Demo example (Run Applet)

import javax.swing.*;
import java.awt.*;

public class Gradient_Radial_Demo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JLayeredPane
    {
        public View()
        {
            super();
        }

        @Override
        public void paintComponent(Graphics g)
        {
            super.paintComponent(g);
            final Graphics2D g2 = (Graphics2D) g;

            Paint oldPaint = g2.getPaint();

            // proportional position at which each new colour will be assigned
            // and the colours to apply
            float steps[] =
            {
                0.0f, 0.49f, 0.5f, 1.0f
            };
            Color colours[] =
            {
                Color.yellow, Color.red, Color.red, Color.white
            };

            // declare a radius and a centre
            float radius = 100;
            Point centre = new Point(getWidth() / 2, getHeight() / 2);

            RadialGradientPaint gradient = new RadialGradientPaint(centre, radius, steps, colours);
            g2.setPaint(gradient);
            g2.fillRect(0, 0, getWidth(), getHeight());
            g2.setPaint(oldPaint);
        }
    }
}

Placing Gradients onto Components

In order to place a gradient onto a component, you must override the component's paintComponent() method. This is achieved by making your own class that extends from the parent component. The new class must:

override the paintComponent() method.
instruct super.paintComponent() to ignore painting the background when it is called.

The example below shows some buttons that have a multi stop gradient applied to them.

Gradient_Button_Demo example (Run Applet)

import javax.swing.*;
import java.awt.*;

public class Gradient_Button_Demo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel
    {
        public View()
        {
            super();
            add(new GradientButton("Button 1"));
            add(new GradientButton("Button 2"));
            add(new GradientButton("Button 3"));
        }
    }

    public class GradientButton extends JButton
    {
        public GradientButton(String label)
        {
            super(label);

            // causes the method super.paintComponent(g);
            // in paintComponent() to ignore the background
            setContentAreaFilled(false);
        }

        @Override
        public void paintComponent(Graphics g)
        {
            final Graphics2D g2 = (Graphics2D) g;

            Paint oldPaint = g2.getPaint();

            // proportional position at which each new colour will be assigned
            // and the colours to apply
            float steps[] =
            {
                0.0f, 0.49f, 0.5f, 1.0f
            };
            Color colours[] =
            {
                Color.yellow, Color.red, Color.red, Color.white
            };

            LinearGradientPaint gradient = new LinearGradientPaint(0.0f, 0.0f, 0.0f, getHeight(), steps, colours);
            g2.setPaint(gradient);
            g2.fillRect(0, 0, getWidth(), getHeight());
            g2.setPaint(oldPaint);

            // paint the text
            super.paintComponent(g);
        }
    }
}

Placing Gradients onto Text

Gradients can be placed onto Text, as shown in the example below.

Gradient_Text_Demo example (Run Applet)

import javax.swing.*;
import java.awt.*;

public class Gradient_Text_Demo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel
    {
        public View()
        {
            super();
        }

        @Override
        protected void paintComponent(Graphics g)
        {
            super.paintComponent(g);
            final Graphics2D g2 = (Graphics2D) g;

            // gradient
            GradientPaint gradient = new GradientPaint(0, 0, Color.yellow, getWidth(), getHeight(), Color.blue);
            g2.setPaint(gradient);

            // text
            g2.setFont(new Font("Times Roman", Font.BOLD + Font.ITALIC, 140));
            g2.drawString("DkIT", 0, 150);
        }
    }
}