JavaFX - Linear Gradient Pattern

Quiz

Apart from solid colors, you can also display a color gradient in JavaFX. A color gradient, in color science, is defined as the progression of colors depending on their positions. Hence, a color gradient is also known as color ramp or color progression.

Traditionally, a color gradient contains colors arranged sequentially or linearly. However, in a linear gradient pattern, the colors are flowing in a single direction. Even if the shape to be coloured is not linear, like a circle or an ellipse, the colors would still be arranged in one direction.

Let us learn how to apply the linear gradient pattern on 2D shapes in this chapter.

Applying Linear Gradient Pattern

To apply a Linear Gradient Pattern to the nodes, instantiate the LinearGradient class and pass its object to the setFill(), setStroke() methods.

The constructor of this class accepts five parameters namely −

startX, startY − These double properties represent the x and y coordinates of the starting point of the gradient.
endX, endY − These double properties represent the x and y coordinates of the ending point of the gradient.
cycleMethod − This argument defines how the regions outside the color gradient bounds, defined by the starting and ending points, should be filled.
proportional − This is a Boolean Variable; on setting this property to true, the start and end locations are set to a proportion.
Stops − This argument defines the color-stop points along the gradient line.

//Setting the linear gradient 
Stop[] stops = new Stop[] { 
   new Stop(0, Color.DARKSLATEBLUE),  
   new Stop(1, Color.DARKRED)
};  
LinearGradient linearGradient = 
   new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops);

Example 1

Following is an example which demonstrates how to apply a gradient pattern to the nodes in JavaFX. Here, we are creating a circle and a text nodes and applying linear gradient pattern to them.

Save this code in a file with name LinearGradientExample.java.

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.LinearGradient; 
import javafx.scene.paint.Stop; 

import javafx.stage.Stage; 
import javafx.scene.shape.Circle; 
import javafx.scene.text.Font; 
import javafx.scene.text.Text; 
         
public class LinearGradientExample extends Application { 
   @Override 
   public void start(Stage stage) {           
      //Drawing a Circle 
      Circle circle = new Circle();    
      
      //Setting the properties of the circle 
      circle.setCenterX(300.0f);  
      circle.setCenterY(180.0f); 
      circle.setRadius(90.0f); 
      
      //Drawing a text 
      Text text = new Text("This is a colored circle"); 
      
      //Setting the font of the text 
      text.setFont(Font.font("Edwardian Script ITC", 55)); 
      
      //Setting the position of the text 
      text.setX(140); 
      text.setY(50); 
       
      //Setting the linear gradient 
      Stop[] stops = new Stop[] { 
         new Stop(0, Color.DARKSLATEBLUE),  
         new Stop(1, Color.DARKRED)
      };  
      LinearGradient linearGradient = 
         new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops); 
       
      //Setting the linear gradient to the circle and text 
      circle.setFill(linearGradient); 
      text.setFill(linearGradient); 
         
      //Creating a Group object  
      Group root = new Group(circle, text); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Linear Gradient Example"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls LinearGradientExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls LinearGradientExample

Output

On executing, the above program generates a JavaFX window as follows −

Example 2

Apart from circle, you can also apply this type of gradient on other closed shapes like Polygons. Here, we are creating a triangle and coloring it with a certain linear gradient pattern.

Save this code in a file with name TriangleLinearGradient.java.

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.LinearGradient; 
import javafx.scene.paint.Stop; 

import javafx.stage.Stage; 
import javafx.scene.shape.Polygon;
         
public class TriangleLinearGradient extends Application { 
   @Override 
   public void start(Stage stage) {            
      Polygon triangle = new Polygon(); 
	  
      triangle.getPoints().addAll(new Double[]{ 
         100.0, 50.0, 
         170.0, 150.0, 
         100.0, 250.0,  
      }); 
       
        
      Stop[] stops = new Stop[] { 
         new Stop(0, Color.ORANGE),  
         new Stop(1, Color.YELLOW)
      };  
      LinearGradient linearGradient = 
         new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops); 
       

      triangle.setFill(linearGradient);  
          
      Group root = new Group(triangle); 
          
      Scene scene = new Scene(root, 300, 300);  
      
      stage.setTitle("Linear Gradient Example"); 
          
      stage.setScene(scene); 
          
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls TriangleLinearGradient.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls TriangleLinearGradient

Output

On executing, the above program generates a JavaFX window as follows −

Print Page