How to make imageviews rounded

Question

I want to make the imageviews on scrollpane to look rounded in shape..I'm adding an imageview and a button to a Vbox.Then that vbox to a gridpane.Gridpane is added to scrollpane.

Here's my screen shot
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(20, 20, 20,20));

            gridpane.setHgap(20);
            gridpane.setVgap(20);

            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, (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++;

                }

Answer 1

Use the following css to get a drop shadow:

-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 10, 0, 0, 0);

See the JavaFX CSS Reference guide for details.

To get the border in addition to the drop shadow, place your ImageView containing your Image in a StackPane. And apply the effect css above to the StackPane, in addition to a background and padding on the StackPane.

For example the css below applied to the StackPane containing your ImageView will provide a red border around your image:

-fx-padding: 10;
-fx-background-color: firebrick;

If you want the background defining your border curved at the edges, then use:

-fx-background-radius: 5;

That gets you an image like below where your image is enclosed in a shadowed border:

If you want to actually round the image itself, it's a bit trickier. You need to apply some code to:

1. Clip the image to a rounded rectangle.
2. Snapshot the clipped image.
3. Store the snapshot image back in the ImageView.
4. Remove the clip from the ImageView.
5. Apply the drop shadow effect to the ImageView.

Then you can get something like below:

Some code for that "BatmanLost.java":

import javafx.application.Application;
import javafx.fxml.*;
import javafx.scene.*;
import javafx.scene.effect.DropShadow;
import javafx.scene.image.*;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

import java.io.IOException;

public class BatmanLost extends Application {

    class WingClipper {
        @FXML
        private ImageView imageView;

        @FXML
        public void initialize() {
            // set a clip to apply rounded border to the original image.
            Rectangle clip = new Rectangle(
                imageView.getFitWidth(), imageView.getFitHeight()
            );
            clip.setArcWidth(20);
            clip.setArcHeight(20);
            imageView.setClip(clip);

            // snapshot the rounded image.
            SnapshotParameters parameters = new SnapshotParameters();
            parameters.setFill(Color.TRANSPARENT);
            WritableImage image = imageView.snapshot(parameters, null);

            // remove the rounding clip so that our effect can show through.
            imageView.setClip(null);

            // apply a shadow effect.
            imageView.setEffect(new DropShadow(20, Color.BLACK));

            // store the rounded image in the imageView.
            imageView.setImage(image);
        }
    }

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

    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader loader = new FXMLLoader(
            getClass().getResource(
                "batmanlostinthemix.fxml"
            )
        );
        loader.setController(new WingClipper());

        Pane batman = loader.load();

        stage.setTitle("Where's Batman?");
        stage.setScene(new Scene(batman));
        stage.show();
    }
}

With some FXML "batmanlostinthemix.fxml":

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="313.0" prefWidth="477.0" style="-fx-background-color: azure;" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
  <children>
    <ImageView fx:id="imageView" layoutX="29.0" layoutY="44.0" fitHeight="224.0" fitWidth="400.0" pickOnBounds="true" preserveRatio="true">
      <image>
        <Image url="http://collider.com/wp-content/uploads/lego-batman-movie-dc-super-heroes-unite-1.jpg" />
      </image>
    </ImageView>
  </children>
</AnchorPane>

Credits: https://stackoverflow.com/users/1155209/jewelsea