Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

JavaFx LinearGradient Examples

1. LinearGradient Introduction

The LinearGradient class helps in applying such a gradient to any JavaFx shapes. In JavaFx, Linear Colour Gradient is applied by an axis in which a colour changes gradually from one point to another point. We call this axis as Gradient Axis. If we draw a line perpendicular to a specific point in the linear gradient axis, all the pixels in the perpendicular axis represents same colour.

2. Gradient Axis

Now, let us look at some examples for Gradient Axis. Have a look at the below code:

Fig 1. JavaFx Gradient Fill and Gradient Axis
Fig 1. JavaFx Gradient Fill and Gradient Axis

Explanation

  1. To experiment the gradient fill, we create a rectangle shape with width 400 and height 300.
  2. The colour stop defines the offset location and in which a colour change is defined. In our example, we create two Stop instances to denote yellow and red colours. In our example, offset 0 and offset 1 defines the start and end point in the gradient axis direction. Note, this is a relative unit.
  3. Next, the LinearGradient constructor creates the instance. The first two parameter tells the start of the gradient in terms of x and y coordinate values. Second two parameter denotes the end point of the gradient and by referring the picture we can clearly say the gradient in our example is in horizontal direction. Fifth parameter is a boolean & when it is true, the values (First four params) are specified in relative co-ordinate in proportions. For example, our rectangle width is 400. In proportions – 0 means 0, 1 means 400 and 0.5 means 200. The sixth parameter is to specify the Gradient filling cycles, and, in our example, we specified NO_CYCLE. After this, we can pass ‘n’ number of Stop instances.
  4. Once the LinearGradient object is ready, we pass it to the setFill method of the shape.

Running the code will produce the below result. Here, we can see Yellow Stop is at the left as we specified the offset as 0 and Red Stop is towards the right as it has the offset of 1 (Refer Snippet 02).

Fig 2. LinearGradient Applied Horizontally
Fig 2. LinearGradient Applied Horizontally

We can change the Gradient Axis by using the first four parameters. The below picture shows, how we can use first four parameter to change the Gradient Axis and apply the gradient using Yellow, Red Stop objects & their Offset.

Fig 3. Changing the Gradient Axis in JavaFx Gradient Fill
Fig 3. Changing the Gradient Axis in JavaFx Gradient Fill

3. LinearGradient REPEAT Cycle

We already saw the CycleMethod constant NO_CYCLE in the previous section. We can use REPEAT option to copy the previous gradient along the gradient axis. The code snippet is below:

Fig 4. LinearGradient with Repeat Cycle
Fig 4. LinearGradient with Repeat Cycle

Explanation

  1. The first gradient point is in the top left corner of rectangle and second gradient point in the top middle of the rectangle as we specified 0.5 in the parameter. This fills the gradient from left edge to middle of the rectangle.
  2. Here, we specified the cycle method as REPEAT and hence the un-filled portion on the right side of the rectangle is filled with one more gradient which repeats the previous half.

Now look at the code snippet below:

Fig 5. LinearGradient with Multiple Repeat Cycle
Fig 5. LinearGradient with Multiple Repeat Cycle

Now at marker location 1, we changed the value to 0.05. This means, we marked the gradient end at 1:20 th location on the gradient axis and we also asked to perform REPEAT cycle to have multiple gradient which repeats along the gradient axis to fill the rectangle completely.

4. LinearGradient Reflect Cycle

When we set cycle method as reflect, the fill will happen with a mirror image of the previous fill. Let us change our previous example to have REFLECT cycle with same 20 divisions of the gradient area.

Fig 6. LinearGradient with Multiple Reflect Cycles
Fig 6. LinearGradient with Multiple Reflect Cycles

Explanation

  1. We set gradient end point at 1:20th location of the rectangular width as we did in our previous code change.
  2. This time, we use the REFLECT cycle method to apply the gradient on the remaining portion of the rectangle. We can compare this result with the previous one to know how the gradient differs when applied as REPEAT & REFLECT.

5. LinearGradient & Multiple Color Stops

In our previous examples, we used only two colours (Red & Yellow) to apply the gradient over the Gradient Axis. It is also possible to use multiple colours stops along the gradient axis. When creating the Stop instances, we can mark the relative location on the axis so that LinearGradient instance will perform colour interpolation between various colours. Now, look at the example below which uses five colours to perform colour gradient on the rectangle.

Fig 7. LinearGradient with Multiple Colour Stops
Fig 7. LinearGradient with Multiple Colour Stops

Explanation

  1. Here, we create five Stop instances to represent five colours on the gradient axis. First parameter passed to the Stop instance tells the relative location of color stop.
  2. In the LinearGradient constructor, we decided the Gradient as horizontal and in left->Right direction. Note, we use full rectangle for the gradient and have NO_CYCLE option.
  3. Finally, we pass all the Gradient Stops to the variable argument constructor which can receive any number of Stop instances. Also, note the order of the Stop instances are not important as the Stop instances already have the relative location of their color stops.

When we use different cycle option, the color stops are still applied relative to the Main Gradient’s relative dimensions. The below example shows that:

Fig 8. LinearGradient with Multiple Colour Stops and Reflect Cycle
Fig 8. LinearGradient with Multiple Colour Stops and Reflect Cycle

Explanation

  1. We divide the rectangle as 10 parts and apply the gradient to the very first part. This means, we apply the gradient to 1:10th of the rectangle. In that portion, the color stops are applied at five equal intervals (Remember the constructor of Stops – 0, 0.25, 0.5, 0.75 and 1) to make the colour gradient.
  2. JavaFx fills the remaining portions of the rectangle using the Reflect cycle method. You can also try with the REPEAT method in this same example.

6. Code Reference

Example 1: Linear Gradient Axis

Example 2: Linear Gradient with Multiple Colour Stops

Categories: JavaFx

Tags: , , , , ,

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.