How can I make responsive ImageView in FXML (JavaFX)

Question

I have a scene showing 3 images, and I want each of them to take a third of the width of the scene. From now, I have made 3 Pane of each 30% of it, it works. But in those Pane, I can't make my ImageView use only the width of the Pane.

<GridPane GridPane.rowIndex="1" GridPane.columnIndex="0">
        <ImageView GridPane.columnIndex="0" fx:id="imgChasseur" preserveRatio="true" onMouseClicked="#handleChoixChasseur"/>
        <ImageView GridPane.columnIndex="1" fx:id="imgMage" preserveRatio="true" onMouseClicked="#handleChoixMage"/>
        <ImageView GridPane.columnIndex="2" fx:id="imgGuerrier" preserveRatio="true" onMouseClicked="#handleChoixGuerrier"/>
    <columnConstraints>
        <ColumnConstraints percentWidth="33" />
        <ColumnConstraints percentWidth="33" />
        <ColumnConstraints percentWidth="33" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints percentHeight="100" />
    </rowConstraints>        
</GridPane>

With that sample of code, I can't see the three because they are huge, and with the 'fitWidth="100"' in the 3 ImageView, they are too small.

The way I understand it is that the 'fitWidth' works in pixels, but it's not a responsive way, so it doesn't help me very much...

The GridPane is the only Pane which seems to have percentage values, so I thought it could help me make them responsive, but it doesn't seem so. Is there a way, regardless of the Pane I should use?

Does this answer your question? [JavaFX ImageView fits container](https://stackoverflow.com/questions/48804283/javafx-imageview-fits-container) — fuggerjaki61, Nov 28 '20 at 20:04
Try adding `fx:id = “gridPane”` to the `GridPane` and then `fitWidth = “${gridPane.width / 3}”` to each image view. — James_D, Nov 28 '20 at 20:07
@James_D it doesn't seem to work, it tells me I can't set a bound value — QDelage, Nov 29 '20 at 13:56
@fuggerjaki61 it may, but actually I just found another solution which fits my needs — QDelage, Nov 29 '20 at 13:57
@QDelage Why would you need to set it anywhere if you use that? — James_D, Nov 29 '20 at 14:25
@James_D I used what u gave me, but the Exception was something like "you can't set a bound value". Maybe I didn't use it correctly though, I have found another solution so I'll admit I didn't spent much time on that solution, sorry — QDelage, Nov 29 '20 at 17:04
@QDelage yes I understand that. I was asking why you were setting it (somewhere in Java code) when you already bound it in the FXML I provided. — James_D, Nov 29 '20 at 17:05
@James_D yes but I did it instead of what you gave me. When I used your idea, the error was the one I told you, don't know why — QDelage, Nov 29 '20 at 17:19

score 0 · Accepted Answer · answered Nov 29 '20 at 14:00

I found a solution : I added a listener on the surrounding Pane which modifies the fitWidth of my ImageView's in the Controller

    paneOriginal.widthProperty().addListener((ChangeListener<? super Number>) new ChangeListener<Number>() {
        @Override
        public void changed(ObservableValue<? extends Number> arg0, Number arg1, Number arg2) {
            imgChasseur.setFitWidth(paneOriginal.getWidth() / 3);
            imgMage.setFitWidth(paneOriginal.getWidth() / 3);
            imgGuerrier.setFitWidth(paneOriginal.getWidth() / 3);
        }
    });

With this, I can resize my scene whenever I want and it still fits (and I have to call those three lines at the loading of the FXML one time at least of course.

How can I make responsive ImageView in FXML (JavaFX)

1 Answers1