/ JavaFX / Round images with JavaFX

Round images with JavaFX

Hendrik on 2015/11/30 - 22:51 in JavaFX, Layout & UI

In modern UI you can often find round avatar images like shown in this image:
example

Creating this special UI nodes with JavaFX isn’t that hard. The most important JavaFX features to create such a rounded image is clipping. By using clipping you can define the area in that a control can draw it’s content. A clip can be any shape and you only need to set the shape property of a JavaFX Node instance to define its clipping. You can find an additional clipping description here.

Let’s start creating the component. As a first step we will define a Circle shape as a clip and define it for an ImageView instance:

clip

In addition a border should be added to the component. To do so we add one (or several) Circle shapes on top of the ImageView:

border

In the JavaFX code you can simply bind the bounds of the image to the bounds of the clip and the circle instances that are used as a border.

3 POST COMMENT

Send Us A Message Here

Your email address will not be published. Required fields are marked *

3 Comments
  • 2015/12/07

    Please I need to change keyboard language from English to Arabic when the textfield focused . Iam googled but all answers talk about solutions in swing . thank you

    Mohammed Dawood
    Reply
    • 2015/12/08

      Oh, I never tried something like this. sorry

      Reply
  • 2017/03/07

    Hey, the clipping tips worked for me but I can’t quit figure out how to create the border around the image

    Gordon
    Reply