Working on Creating Image Gallery in JavaFX. not able to display image properly

Question

I am creating image gallery using javafx. I found many things on internet regarding this but not able to get any suitable help for this issue. I have to create one image gallery like picasa viewer. all the images is in thumbnail view in my image view and after that when I select image that is in pop-up viewer. I did it some code for that but I didn't get proper output. All the images from the folder redraw from the same co-ordinates. Below is my code and output.

@Override
public void initialize(URL url, ResourceBundle rb) {

    String path = "/home/ubuntu/eclipse with liferay/Desktop/imagetest/";

    File folder = new File(path);
    File[] listOfFiles = folder.listFiles();

    for (final File file : listOfFiles) {

            ImageView imageView;
            imageView = createImageView(file);
            imagecontainer.getChildren().addAll(imageView);

    }

}
 private ImageView createImageView(final File imageFile) throws FileNotFoundException, FileNotFoundException, FileNotFoundException, FileNotFoundException {
    // DEFAULT_THUMBNAIL_WIDTH is a constant you need to define  
    // The last two arguments are: preserveRatio, and use smooth (slower) resizing  

    ImageView imageView = null;
    try {

        final Image image;

        image = new Image(new FileInputStream(imageFile), DEFAULT_THUMBNAIL_WIDTH, 0, true, true);
        imageView = new ImageView(image);

    } catch (FileNotFoundException ex) {
        Logger.getLogger(GalleryController.class.getName()).log(Level.SEVERE, null, ex);
    }
    return imageView;

}

}

kindly help me to resolve my issue. I want to display images one by one as thumbnail view.

Answer 1

You need to create a TilePane and add the ImageView's to it. You can have a ScrollPane if needed. A complete example with double click to create a fullscreen preview is shown below. You can of course do necessary changes for creating a FXML :)

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseButton;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.TilePane;
import javafx.scene.paint.Color;
import javafx.stage.Screen;
import javafx.stage.Stage;

public class ImageGallery extends Application {

    Stage stage;

    @Override
    public void start(Stage primaryStage) throws Exception {
        stage = primaryStage;
        ScrollPane root = new ScrollPane();
        TilePane tile = new TilePane();
        root.setStyle("-fx-background-color: DAE6F3;");
        tile.setPadding(new Insets(15, 15, 15, 15));
        tile.setHgap(15);

        String path = "/home/ubuntu/eclipse with liferay/Desktop/imagetest/";

        File folder = new File(path);
        File[] listOfFiles = folder.listFiles();

        for (final File file : listOfFiles) {
                ImageView imageView;
                imageView = createImageView(file);
                tile.getChildren().addAll(imageView);
        }


        root.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER); // Horizontal
        root.setVbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED); // Vertical scroll bar
        root.setFitToWidth(true);
        root.setContent(tile);

        primaryStage.setWidth(Screen.getPrimary().getVisualBounds().getWidth());
        primaryStage.setHeight(Screen.getPrimary().getVisualBounds()
                .getHeight());
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    private ImageView createImageView(final File imageFile) {
        // DEFAULT_THUMBNAIL_WIDTH is a constant you need to define
        // The last two arguments are: preserveRatio, and use smooth (slower)
        // resizing

        ImageView imageView = null;
        try {
            final Image image = new Image(new FileInputStream(imageFile), 150, 0, true,
                    true);
            imageView = new ImageView(image);
            imageView.setFitWidth(150);
            imageView.setOnMouseClicked(new EventHandler<MouseEvent>() {

                @Override
                public void handle(MouseEvent mouseEvent) {

                    if(mouseEvent.getButton().equals(MouseButton.PRIMARY)){

                        if(mouseEvent.getClickCount() == 2){
                            try {
                                BorderPane borderPane = new BorderPane();
                                ImageView imageView = new ImageView();
                                Image image = new Image(new FileInputStream(imageFile));
                                imageView.setImage(image);
                                imageView.setStyle("-fx-background-color: BLACK");
                                imageView.setFitHeight(stage.getHeight() - 10);
                                imageView.setPreserveRatio(true);
                                imageView.setSmooth(true);
                                imageView.setCache(true);
                                borderPane.setCenter(imageView);
                                borderPane.setStyle("-fx-background-color: BLACK");
                                Stage newStage = new Stage();
                                newStage.setWidth(stage.getWidth());
                                newStage.setHeight(stage.getHeight());
                                newStage.setTitle(imageFile.getName());
                                Scene scene = new Scene(borderPane,Color.BLACK);
                                newStage.setScene(scene);
                                newStage.show();
                            } catch (FileNotFoundException e) {
                                e.printStackTrace();
                            }

                        }
                    }
                }
            });
        } catch (FileNotFoundException ex) {
            ex.printStackTrace();
        }
        return imageView;
    }

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

}

Output

This works great when you resize the Window, making the ScrollPane visible, if required.