How to make javafx button with 3xp circle shape?

Question

I want to make a VERY small round button with no text. This is how I tried.

Button bt = new Button(); bt.setShape(new Circle(1.5)); bt.setMaxSize(3,3); 

However, there are two problems:
1. The shape of the button is not quite round, but more like an oval.
bt.setMaxSize(1.5,1.5); not effective. In my opinion, its diameter is more than 3 ...
How could I make a smaller round button? Help evaluate.

Answer 1

Update: when checking the resulting button closed, setting the form, as in Jose’s answer, seems to work better on very small buttons than setting -fx-background-radius , as used in this answer (the resulting button looks a little cooler when the form is set). So the solution here is probably best for large buttons (e.g. 10 pixels or more), while shape customization is probably best for a very small 3px button (although this is a pretty subtle difference).

---

3px is a very small button. I'm not sure how you expect people to click on it.

You can do this with CSS.

Here is a 30px round button:

And your requested 3px size button:

Rounding is achieved by setting a large value to -fx-background-radius .

Screenshots were taken on the mac retina, so they are twice the size of the original.

 import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class Rounding extends Application { @Override public void start(Stage stage) throws Exception { Button roundButton = new Button(); roundButton.setStyle( "-fx-background-radius: 5em; " + "-fx-min-width: 3px; " + "-fx-min-height: 3px; " + "-fx-max-width: 3px; " + "-fx-max-height: 3px;" ); StackPane layout = new StackPane( roundButton ); layout.setPadding(new Insets(10)); stage.setScene(new Scene(layout)); stage.show(); } public static void main(String[] args) { launch(args); } } 

Notice that the button is displayed using background layers. The inner layer is the actual button, and the outside is the focus ring and a little glow. Thus, it can be a little more than 3px. If you want to get 3px for sure, you will need to get rid of background background inputs. Something like below:

 roundButton.setStyle( "-fx-background-radius: 5em; " + "-fx-min-width: 3px; " + "-fx-min-height: 3px; " + "-fx-max-width: 3px; " + "-fx-max-height: 3px; " + "-fx-background-color: -fx-body-color;" + "-fx-background-insets: 0px; " + "-fx-padding: 0px;" ); 

Inline styles are used here only to make the sample small and self-contained. In a real application, you put styles into a stylesheet.

The idea of ​​using the -fx-background-radius button to round a button was derived from implementing rounded radio buttons in the standard JavaenaX modena.css stylesheet. You can find the stylesheet by looking at the jfxrt.jar file, which includes JavaFX code and resources.

For comparison, here is an image of a button created using a circle shape solution, as in Jose's answer:

why else do you need to configure minSize () .....

Because JavaFX is trying to provide reasonable defaults. If there was no minimum size for the empty button by default, when you resize your scene, some of the buttons will simply disappear and the user will not be able to click on them - this will be a very bad user interface. Thus, the default minimum size is about 1em, plus some addition (for example, a little more than a character), even if there is no text on the button. However, this is simply the default installed by the Java system, as it cannot know exactly what your application wants. When the defaults do not work for your situation, override them or provide additional hints, such as explicitly setting the minimum size of the control.

What does "5em" mean?

See the JavaFX 8 css reference manual :

em: font size of the corresponding font

So 5em means 5 times the font size. Most of the sizes of controls in the JavaFX style sheet are set by default with em units. Thus, when you change the font or font size, the user interface scales gracefully to accommodate a larger or smaller font. In this particular case, the choice of 5em was pretty arbitrary, I just wanted a lot of importance for the button to be completely round, otherwise -fx-background-radius would create a rounded rectangle, not a full circle. By ensuring that the radius sizes that go up to -fx-background-radius are greater than half the size of the control, then the control takes the form of a circular circle.

I know this is somewhat confusing and unintuitive. I just copied the concept from the default JavaFX stylesheet with the idea that, no matter how confused, this is probably the best way to achieve these effects or not be used in the default stylesheet.

The main advantage that I see in this approach is that no code is required, all styles can be executed directly in CSS (so you can change the look without changing the Java code), and if you want, you can specify co -determines in units of em, so that the control scales with your font size. Therefore, there is some reason for the apparent insanity.

Answer 2

You just need to set the minimum size as well. This will do:

 double r=1.5; btn.setShape(new Circle(r)); btn.setMinSize(2*r, 2*r); btn.setMaxSize(2*r, 2*r); 

And that will give you a round and very small button. Not sure if you want to make it smaller, but you can do it too. Just change the radius r to the desired value.