0

I have to create a javafx button with background image from some url. Image is showing perfectly. But the problem is image is not rounded. Image is showing as its original shape. But i need to create button as circular view with the image. How can i do this?

Here is the code i have tried

Image cameraIcon = new Image("//url");//image will be from url
ImageView cameraIconView = new ImageView(cameraIcon);
cameraIconView.setFitHeight(120);
cameraIconView.setFitWidth(120);
cameraIconView.setStyle(""
            + "-fx-border-color: black;"
            + "-fx-border-style: solid;"
            + "-fx-border-width: 10;"
            + "-fx-border-radius: 10 10 10 10;"
    );      

Button button;
button.setGraphic(cameraIconView);
button.setStyle("-fx-base: coral;");
button.setStyle(
            "-fx-background-radius: 50em; "
            + "-fx-min-width: 60px; "
            + "-fx-min-height: 60px; "
            + "-fx-max-width: 130px; "
            + "-fx-max-height: 60px;"
    );
Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Shakib_007
  • 51
  • 1
  • 5
  • I have seen your link, but there is about how to set backround. My problem is not about setting backround image. I have already set backround image but the image is not rounded as the button. @Elarbi Mohamed Aymen – Shakib_007 Apr 16 '18 at 09:30
  • And did you this jewelsea's [answer](https://stackoverflow.com/a/20490028/4629012) ? – Pagbo Apr 16 '18 at 10:00
  • @Pagbo .....thanks a lot – Shakib_007 Apr 16 '18 at 10:40

1 Answers1

1

try it with css style

.btnHome {
    -fx-background-image: url("/images/btnHomeHover.png");
    -fx-background-size: 50px, 50px;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
    -fx-border-radius: 30;
}
N'bia
  • 27
  • 1
  • 8