Java FX custom picture in alert dialog

Question

I'm pretty new at JavaFx, and what I'm trying to do is, to create an alert dialog with a custom picture.

First, I'm using IntelliJ idea and I didn't understand where to locate the .jpg file in the project (see picture attached).

Second, after adding the picture to the project, how do I proceed?

 Alert alert = new Alert(Alert.AlertType.ERROR, "Error", ButtonType.OK);
        alert.showAndWait();

Thank you

Answer 1

Including a resource in IntelIJ has already been the topic of multiple questions and I won't answer it here again. Please read one of the answers to other questions about this topic, e.g. maba's answer to adding resources in intellij for java project.

---

A custom image can be used by setting a ImageView as graphic for the Dialog:

Image image = new Image("https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Emojione_1F62D.svg/64px-Emojione_1F62D.svg.png");
ImageView imageView = new ImageView(image);
alert.setGraphic(imageView);
alert.showAndWait();

Note that this example uses a image from the web. For a image added as resource you'd use something like

Image image = new Image(getClass().getResource("/path/to/resource/image.jpg").toExternalForm());

instead.

Answer 2

This tutorial can give you better solution.javafx 8 dialogs

or you can use this following code also

protected Alert createAlert(){
    Alert alert = new Alert(AlertType.WARNING);

    alert.initModality(Modality.APPLICATION_MODAL);
    alert.initOwner(stage);
    alert.getDialogPane().setContentText("Some text");

    DialogPane dialogPane = alert.getDialogPane();
    GridPane grid = new GridPane();
    ColumnConstraints graphicColumn = new ColumnConstraints();
    graphicColumn.setFillWidth(false);
    graphicColumn.setHgrow(Priority.NEVER);
    ColumnConstraints textColumn = new ColumnConstraints();
    textColumn.setFillWidth(true);
    textColumn.setHgrow(Priority.ALWAYS);
    grid.getColumnConstraints().setAll(graphicColumn, textColumn);
    grid.setPadding(new Insets(5));

    Image image1 = new Image("http://www.mcaprojecttraining.com/images/java-big-icon.png");
    ImageView imageView = new ImageView(image1);
    imageView.setFitWidth(64);
    imageView.setFitHeight(64);
    StackPane stackPane = new StackPane(imageView);
    stackPane.setAlignment(Pos.CENTER);
    grid.add(stackPane, 0, 0);

    Label headerLabel = new Label("Warning");
    headerLabel.setWrapText(true);
    headerLabel.setAlignment(Pos.CENTER_RIGHT);
    headerLabel.setMaxWidth(Double.MAX_VALUE);
    headerLabel.setMaxHeight(Double.MAX_VALUE);
    grid.add(headerLabel, 1, 0);

    dialogPane.setHeader(grid);
    dialogPane.setGraphic(null);

    alert.showAndWait()
        .filter(response -> response == ButtonType.OK)
        .ifPresent(response -> System.out.println("The alert was approved"));

    return alert;
}

Resource Link:

1. Set image on left side of dialog
2. How do you set the icon of a Dialog control Java FX/Java 8

Answer 3

Add GridPane First

        GridPane grid = new GridPane();
        grid.setHgap(10);
        grid.setVgap(10);
        grid.setPadding(new Insets(10, 10, 10, 10));
        ImageView customImage = new ImageView(new Image("/home/mani/Desktop/img.jpg", 100, 80, false, true));
        grid.add(customImage, 0, 0);
        // make a dialog 
        final Dialog dlg = new Dialog(null, "myDailog-with-Image");
        // Add grid inside dialog.
        dlg.setContent(grid);
        dlg.show();