How to change size of ImageView when changing size of window in javafx gui - user-interface

Question

I have not worked much with gui before, but I am trying to learn it by building a javafx application using SceneBuilder. Now I have trouble getting ImageView to resize when I resize the window.
I am using a gridPane, and i have placed a ImageView on a anchorPane inside one of the routes in the gridPane. The gridPane is changing size when I change the size of my window when i run the application, but the ImageView does not change size. I want the Imageview to change size correspondingly when i change the size of the window when i run the application.
have tried to read similar issues here on the forum, but have not found a solution that I can use, Does anyone have a good way to do this?
Really appreciate all answers.

Answer 1

You can use binding for simplicity, here the full example code
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage){
GridPane gridPane = new GridPane();
AnchorPane anchorPane = new AnchorPane();
// Set image with url
Image image = new Image("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-524e2cCaY9TUn8vglN3nqqOlT0jIJIIty-Z81S49q9Np6Yws");
ImageView imageView = new ImageView(image);
// Bind the imageView width property to gridPane width property
// So, if width of gridPane change, the width of imageView automatically will be change
imageView.fitWidthProperty().bind(gridPane.widthProperty());
// Make the ratio same with original image
imageView.setPreserveRatio(true);
anchorPane.getChildren().add(imageView);
gridPane.getChildren().add(anchorPane);
Scene scene = new Scene(gridPane, 600, 400);
primaryStage.setTitle("Hello World");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}