how to keep space between images in scrollpane

Question

I need to space up between images in a scrollpane.I'm adding an imageview and a button to a Vbox.Then that vbox to a gridpane.gridpane is added to scrollpane.However,scrollpane gets overcrowded.I've used gridpane.setPadding(), but no effect. here's my code:

            File file = new File("D:\\SERVER\\Server Content\\Apps\\icons");
            File[] filelist1 = file.listFiles();
            ArrayList<File> filelist2 = new ArrayList<>();


            for (File file1 : filelist1) {
                filelist2.add(file1);

            }
            btnar=new ArrayList<>();
            for (int i = 0; i < filelist2.size(); i++) {
               downloadbtn=new Button("Download");
               btnar.add(downloadbtn);
            }


            System.out.println(filelist2.size());
            gridpane.setAlignment(Pos.CENTER);
            gridpane.setPadding(new Insets(50, 50, 50, 50));

            gridpane.setHgap(50);
            gridpane.setVgap(50);


            ColumnConstraints columnConstraints = new ColumnConstraints();
            columnConstraints.setFillWidth(true);
            columnConstraints.setHgrow(Priority.ALWAYS);
            gridpane.getColumnConstraints().add(columnConstraints);

            int imageCol = 0;
            int imageRow = 0;

            for (int i = 0; i < filelist2.size(); i++) {
                System.out.println(filelist2.get(i).getName());
                image = new Image(filelist2.get(i).toURI().toString());

                pic = new ImageView();
                pic.setFitWidth(130);
                pic.setFitHeight(130);


                pic.setImage(image);
                vb = new VBox();
                vb.getChildren().addAll(pic,btnar.get(i));

                gridpane.add(vb, imageCol, imageRow);
                GridPane.setMargin(pic, new Insets(2,2,2,2));
                imageCol++;

                // To check if all the 3 images of a row are completed
                if (imageCol > 2) {
                    // Reset Column
                    imageCol = 0;
                    // Next Row
                    imageRow++;

                } 
            }

here' how my stage looks like when images are added

Answer 1

Your code looks fine to me. I have tried your code with a folder filled with images. I wrapped the GridPane on a ScrollPane and gave the ScrollPane a defined size. The space between ImageViews are as per the HGap and VGap provided. Here is a image to second my findings.

Note

If you are looking for gaps between ImageView in a GridPane use setHgap() and setVgap()

setPadding() is used to set the margin around the grid. You can ofcourse use a mix of both as I have done below

Please find this MCVE to support you find your mistake

import java.io.File;
import java.util.ArrayList;
import java.util.List;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.ScrollPane.ScrollBarPolicy;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class LoadingImages extends Application {


    @Override
    public void start(Stage primaryStage) throws Exception {

        ScrollPane scrollPane = new ScrollPane();
        GridPane gridpane = new GridPane();
        scrollPane.setHbarPolicy(ScrollBarPolicy.AS_NEEDED);
        scrollPane.setVbarPolicy(ScrollBarPolicy.AS_NEEDED);
        scrollPane.setPrefSize(500, 500);
        scrollPane.setContent(gridpane);
        Scene scene = new Scene(scrollPane);
        primaryStage.setScene(scene);
        primaryStage.show();

        File file = new File("Path to folder with images");
        File[] filelist1 = file.listFiles();
        ArrayList<File> filelist2 = new ArrayList<>();


        for (File file1 : filelist1) {
            filelist2.add(file1);

        }
        List btnar=new ArrayList<>();
        for (int i = 0; i < filelist2.size(); i++) {
           Button downloadbtn=new Button("Download");
           btnar.add(downloadbtn);
        }


        System.out.println(filelist2.size());
        gridpane.setAlignment(Pos.CENTER);
        gridpane.setPadding(new Insets(50, 50, 50, 50));

        gridpane.setHgap(50);
        gridpane.setVgap(50);


        ColumnConstraints columnConstraints = new ColumnConstraints();
        columnConstraints.setFillWidth(true);
        columnConstraints.setHgrow(Priority.ALWAYS);
        gridpane.getColumnConstraints().add(columnConstraints);

        int imageCol = 0;
        int imageRow = 0;

        for (int i = 0; i < filelist2.size(); i++) {
            System.out.println(filelist2.get(i).getName());
            Image image = new Image(filelist2.get(i).toURI().toString());

            ImageView pic = new ImageView();
            pic.setFitWidth(130);
            pic.setFitHeight(130);


            pic.setImage(image);
            VBox vb = new VBox();
            vb.getChildren().addAll(pic,(Button)btnar.get(i));

            gridpane.add(vb, imageCol, imageRow);
            GridPane.setMargin(pic, new Insets(2,2,2,2));
            imageCol++;

            // To check if all the 3 images of a row are completed
            if (imageCol > 2) {
                // Reset Column
                imageCol = 0;
                // Next Row
                imageRow++;

            } 
        }

    }

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