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.

Solution 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);

Solution 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();

Solution 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);
    }
}

Comments

[j will]

Is the hbox fitted to parent?

[Anshul Parashar]

@jwill yes offcouse i am edit answer you can also do it programtically by using pane... see the changes

[j will]

For your example, how would you keep the image centered, but also image at the top of the pane?

[Wolfgang Fahl]

github.com/BITPlan/com.bitplan.javafx/blob/master/src/test/j‌​ava/… has this code embedded in a TestApplication to show the effect

[hassan moradnezhad]

the question is about AnchorPane. not StackPane!

[xeruf]

sorry, but the code example makes no sense to me, it does not center anything and contains redundant lines