JavaFX Tutorial - JavaFX Gradient Color








We can use radial gradient to make shapes appear three-dimensional.

Gradient paint can interpolate between two or more colors, which gives depth to the shape.

JavaFX provides two types of gradients: a radial (RadialGradient) and a linear (LinearGradient) gradient.

To create a gradient color in JavaFX we need to set five properties.

  • Set the starting point to begin the first stop color.
  • Set the end point as the end stop color.
  • Set the proportional property to specify whether to use standard screen coordinates or unit square coordinates.
  • Set the cycle method to with three enums: NO_CYCLE, REFLECT, or REPEAT.
  • Set an array of Stop colors.

By setting proportional attribute to false, we can set the gradient axis to have a beginning point and an end point based on standard screen (x, y) coordinates.

By setting the proportional attribute to true, the gradient axis line beginning and ending points will be represented as unit square coordinates. The x, y coordinates for begin and end points must be between 0.0 and 1.0 (double).





LinearGradient

To create a linear gradient paint, we specify startX, startY, endX, and endY for the start and end points. The start and end point coordinates specify where the gradient pattern begins and stops.

The following table lists the LinearGradient Properties

PropertyData Type / Description
startXDouble
Set X coordinate of the gradient axis start point.
startYDouble
Set Y coordinate of the gradient axis start point.
endXDouble
Set X coordinate of the gradient axis end point.
endYDouble
Set Y coordinate of the gradient axis end point.
proportionalBoolean
Set whether the coordinates are proportional to the shape. true will use unit square coordinates, otherwise use screen coordinate system.
cycleMethodCycleMethod
Set cycle method applied to the gradient.
stopsList<Stop>
Set stop list for gradient's color specification.

The following code shows how to use Linear Gradient to paint a Rectangle.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
//from   w  ww. j  ava  2 s.co  m
public class Main extends Application {

    @Override
    public void start(Stage stage) {
        VBox box = new VBox();
        final Scene scene = new Scene(box,300, 250);
        scene.setFill(null);
        Stop[] stops = new Stop[] { new Stop(0, Color.BLACK), new Stop(1, Color.RED)};
        LinearGradient lg1 = new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops);
        
        Rectangle r1 = new Rectangle(0, 0, 100, 100);
        r1.setFill(lg1);
        
        box.getChildren().add(r1);
        
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

The code above generates the following result.

null




Radial Gradient

The following table lists RadialGradient Properties.

PropertyData Type/Description
focusAngleDouble
Set the angle in degrees from the center of the gradient to the focus point where the first color is mapped.
focusDistanceDouble
Set the distance from the center of the gradient to the focus point where the first color is mapped.
centerXDouble
Set X coordinate of the center point of the gradient's circle.
centerYDouble
Set Y coordinate of the center point of the gradient's circle.
radiusDouble
Set the radius of the circle of the color gradient.
proportionalboolean
Set coordinates and sizes are proportional to the shape.
cycleMethodCycleMethod
Set the Cycle method applied to the gradient.
StopsList<Stop>
Set stop list for gradient's color
/*  ww  w  .  ja  v a  2s .c  o m*/
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class Main extends Application {
    static int dx = 1;
    static int dy = 1;

    public static void main(String[] args) {
        Application.launch(args);
    }

    @Override
    public void start(final Stage primaryStage) {
        primaryStage.setTitle("Animation");
        Group root = new Group();
        Scene scene = new Scene(root, 400, 300, Color.WHITE);

        primaryStage.setScene(scene);
        addBouncyBall(scene); 
        primaryStage.show();
    }
    private void addBouncyBall(final Scene scene) {
        final Circle ball = new Circle(100, 100, 20);

        RadialGradient gradient1 = new RadialGradient(0,
            .1,
            100,
            100,
            20,
            false,
            CycleMethod.NO_CYCLE,
            new Stop(0, Color.RED),
            new Stop(1, Color.BLACK));

        ball.setFill(gradient1);

    
        final Group root = (Group) scene.getRoot();
        root.getChildren().add(ball);

    }
}

The code above generates the following result.

null

Semitransparent Gradients

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
/*from  w  w w. jav  a2 s.c  om*/
public class Main extends Application {

    @Override
    public void start(Stage stage) {
        VBox box = new VBox();
        final Scene scene = new Scene(box,300, 250);
        scene.setFill(null);
        // A rectangle filled with a linear gradient with a translucent color.
        Rectangle rectangle = new Rectangle();
        rectangle.setX(50);
        rectangle.setY(50);
        rectangle.setWidth(100);
        rectangle.setHeight(70);

        LinearGradient linearGrad = new LinearGradient(
                0,   // start X 
                0,   // start Y
                0,   // end X
                1, // end Y
                true, // proportional
                CycleMethod.NO_CYCLE, // cycle colors
                // stops
                new Stop(0.1f, Color.rgb(25, 200, 0, .4)),
                new Stop(1.0f, Color.rgb(0, 0, 0, .1)));
        rectangle.setFill(linearGrad);
        
        box.getChildren().add(rectangle);
        
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

The code above generates the following result.

null

Reflective Cycle Gradients

The following code create a rectangle with a repeating pattern of a gradient using green and black in a diagonal direction.

The start X, Y and end X, Y values are set in a diagonal position, and the cycle method is set to reflect CycleMethod.REFLECT.

CycleMethod.REFLECT makes the gradient pattern repeat or cycle between the stop colors.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
/*from   w  w  w  . ja va  2  s .  c o  m*/
public class Main extends Application {

  @Override
  public void start(Stage stage) {
    VBox box = new VBox();
    final Scene scene = new Scene(box, 300, 250);
    scene.setFill(null);
    // A rectangle filled with a linear gradient with a translucent color.
    Rectangle rectangle = new Rectangle();
    rectangle.setX(50);
    rectangle.setY(50);
    rectangle.setWidth(100);
    rectangle.setHeight(70);

    LinearGradient cycleGrad = new LinearGradient(50, // start X
        50, // start Y
        70, // end X
        70, // end Y
        false, // proportional
        CycleMethod.REFLECT, // cycleMethod
        new Stop(0f, Color.rgb(21, 25, 0, .784)), new Stop(1.0f, Color.rgb(0,
            210, 0, .784)));
    rectangle.setFill(cycleGrad);

    box.getChildren().add(rectangle);

    stage.setScene(scene);
    stage.show();
  }

  public static void main(String[] args) {
    launch(args);
  }
}

The code above generates the following result.

null