How do I center an Image view in an anchor pane?

Question

I am using scene builder to create my GUI and I am displaying Images as users select items in a list. The Images are of different sizes and when an Image that is smaller than the pane it is in, the image is displayed in the top left of the pane. How do I go about getting the ImageView and/or Image to be displayed in the center of the Pane?

I've looked throughout the javafx imageview and image APIs but I haven't found much on centering the ImageViewin a Pane. I haven't seen anything in scene builder, either. Usually in scene builder, if there is a way to center a node, there will be an option for centering.

Answer 1

In any kind of pane its now possible to set image alignment in specific postion.. for this you can use try HBox

when you insert an Image into the HBox, initially its shown like below.

now set the alignment property of the HBox

now change the alignment to centre and see the output

I hope its work for you

Its also possible to do so programmatically in a Pane via get image

try this

AnchorPane anchorPane = new AnchorPane();
Image img = new Image(getClass().getResourceAsStream("Edit-Male-User-icon.png"));
ImageView imageView = new ImageView(img);
anch.getChildren().add(imageView );
ImageView app = (ImageView) (Node) anchorPane.getChildren().get(0);
app.setX(100);
app.setY(100);

Answer 2

Create a Group and scene in your start method:

Group root = new Group();
Scene scene = new Scene(root, 551, 400, Color.BLACK);
primaryStage.setScene(scene);

Create an ImageView and set the following properties:

ImageView imageView = new ImageView();
// set aspect ratio
imageView.setPreserveRatio(true);
// resize based on the scene
imageView.fitWidthProperty().bind(scene.widthProperty());
imageView.fitHeightProperty().bind(scene.heightProperty());

Create a StackPane (at least that is what I used) and bind your properties:

StackPane stack = new StackPane();
stack.getChildren().add(imageView);

    stack.translateXProperty()
            .bind(scene.widthProperty().subtract(stack.widthProperty())
                    .divide(2));

    stack.translateYProperty()
            .bind(scene.heightProperty().subtract(stack.heightProperty())
                    .divide(2));

Add this stack to root element:

root.getChildren().add(stack);

Show primaryStage and execute other code in your start method:

primaryStage.show();

Answer 3

A simple way to make small images dynamically centered :

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class CenterInStage extends Application {

    private final String TITLE = "Center in Stage";
    private final double WIDTH = 350;
    private final double HEIGHT = 250;
    private final String IMAGE_PATH =
            "http://icons.iconarchive.com/icons/iconka/meow-2/64/cat-rascal-icon.png";

    @Override
    public void start(Stage primaryStage) {

        primaryStage.setTitle(TITLE);

        Image image = new Image(IMAGE_PATH);
        ImageView imageView = new ImageView(image);
        imageView.setPreserveRatio(true);

        StackPane pane = new StackPane();
        pane.getChildren().add(imageView);
        StackPane.setAlignment(imageView, Pos.CENTER);

        Scene scene = new Scene(pane, WIDTH, HEIGHT);

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

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