Circle won't move position in JavaFX

Question

I am creating a widget which so far has a battery monitor and clock. I tried to add a circle behind the battery monitor to make it look like the shape of a battery. I have tried to change the position values of the circle but it isn't moving. the following picture shows what I am getting now and the intended effect

Here is my code for the circle:

                stack = new StackPane();
                Text text2 = new Text();
                Circle circle = new Circle(10, 10, 10, Color.BLACK);

                batteryBar = new ProgressBar();
                batteryBar.setPrefHeight(27);
                batteryBar.setId("battery");

                stack.getChildren().addAll(batteryBar, text2, circle);
                text2.setFont(new Font("Arial", 15));
                text2.setStyle("-fx-font-weight: bold;");
                text2.setFill(Color.WHITE);

Answer 1

You can Easily set the X and Y coordinates of the Circle with the methods setX() and setY() . You also might want to consider setLayoutX() and setLayoutY() which set the x and y coordinates relative to the Layout

Also Note that StackPane cannot be used here. You must use Pane for setting the x and y axis of the Circle.

This is because StackPane overrides all the x and y values with its own. To know more about this, check out this Stack-overflow question

Here would be your final Code :-

            pane= new Pane();
            Text text2 = new Text();
            Circle circle = new Circle(10, 10, 10, Color.BLACK);
            circle.setLayoutX(10);
            circle.setLayoutY(10);
            batteryBar = new ProgressBar();
            batteryBar.setPrefHeight(27);
            batteryBar.setId("battery");

            pane.getChildren().addAll(batteryBar, text2, circle);
            text2.setFont(new Font("Arial", 15));
            text2.setStyle("-fx-font-weight: bold;");
            text2.setFill(Color.WHITE);