Progress Bar showing two progresses with different colors

Question

I am trying to write a task manager in Java and am thinking about using a progress bar to show the progress of a task. The whole progress bar will indicate the whole task. I plan to show the overall undone progress in gray, planned progress in green, and the completed percentage of progress in red, overlayed on the green one. However, I do not know whether Java allows me to achieve a progress bar filled with two colors, with one overlayed on another. Could anyone enlighten me?

Look at this https://stackoverflow.com/questions/10773978/how-to-change-jprogressbar-color — Cardinal System, Jul 13 '17 at 13:39

score 3 · Answer 1 · answered Jul 13 '17 at 13:53

Reflecting on your problem, I thought of a shortcut, overlap more progress bars and make the background transparent

Try with css

.progress-bar > .track {
  -fx-background-color: transparent;
}
.progress-bar > .bar {
  -fx-background-color: transparent;}

C. Lightfoot · Accepted Answer · 2017-07-13T14:22:01.827

2

This link might be helpful for javafx: JavaFX ProgressBar: how to change bar color?

They set a foreground color and a background color for the progress bar, so it's possible!

edited Jul 13 '17 at 14:22

answered Jul 13 '17 at 13:44

C. Lightfoot

529
1
5
24

score 2 · Answer 3 · answered Jul 13 '17 at 15:06

Here is an app that kinda simulates what you want to do. This app uses two ProgressBars. The background ProgressBar color is set to green and its value is set to 100. The foreground ProgressBar color is set to red and it acts like a normally ProgressBar and is incremented by .01 every .5 seconds.

Main:

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.event.Event;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ProgressBar;
import javafx.scene.control.ProgressIndicator;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;

public class ProgressSample extends Application {

    private final DoubleProperty counter = new SimpleDoubleProperty(0.0);

    @Override
    public void start(Stage stage) {
        Group root = new Group();
        Scene scene = new Scene(root, 300, 250);
        stage.setScene(scene);
        stage.setTitle("Progress Controls");

        ProgressBar pbRed = new ProgressBar();
        pbRed.getStylesheets().add(getClass().getResource("ProgressBarColors.css").toExternalForm());
        pbRed.getStyleClass().add("red-bar");
        pbRed.progressProperty().bind(counter);

        ProgressBar pbGreen = new ProgressBar();        
        pbGreen.setStyle("-fx-accent: green;");
        pbGreen.setProgress(1);

        final ProgressIndicator piRed = new ProgressIndicator();

        ProgressIndicator piGreen = new ProgressIndicator();
        piGreen.setProgress(100);

        StackPane spOne = new StackPane();
        spOne.getChildren().addAll(pbGreen, pbRed);

        Timeline timeline = new Timeline();
        timeline.setCycleCount(Timeline.INDEFINITE);
        timeline.getKeyFrames().add(
                new KeyFrame(Duration.seconds(.5),
                        new EventHandler() {
                    // KeyFrame event handler
                    @Override
                    public void handle(Event event)
                    {
                        counter.set(counter.add(.01).get());
                        System.out.println(counter.get());
                    }
                }
                ));
        timeline.playFromStart();

        HBox hbox = new HBox();
        hbox.getChildren().add(spOne);

        final VBox vb = new VBox();
        vb.getChildren().add(hbox);        
        vb.setSpacing(5);
        scene.setRoot(vb);
        stage.show();
    }

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

CSS:

.progress-bar > .track  {
    /*-fx-background-color: transparent ;*/
    -fx-control-inner-background: transparent;
    -fx-text-box-border: transparent;
}

.red-bar    { -fx-accent: red;    }

score 0 · Answer 4 · answered Jul 13 '17 at 13:52

0

If you want to have progress bar with multiple colors you have to write your own.

answered Jul 13 '17 at 13:52

talex

17,973
3
29
66

Progress Bar showing two progresses with different colors

4 Answers4