How to move and color the navigator's close/minimize/maximize buttons using JavaFX

Question

I would like to know how can I adjust the color of my top ( navigator ) of my program, right now it looks like that:

https://i.imgur.com/NdBUQzt.png

but I want it to be colored, or to make it a part of my software, like spotify does:

https://46c4ts1tskv22sdav81j9c69-wpengine.netdna-ssl.com/wp-content/uploads/2017/06/ef6b137fb60f5671e2d92a8096442a46.png

^ You can notice that the close/minimize/maximize buttons are colored ( black ) and are not in a new line, but in the same level as the software.

Another example would be Word for example:

https://filestore.community.support.microsoft.com/api/images/561dc05e-f679-40d0-8a0d-983f3d90333b

I have heard about some solutions included making my own buttons, and make their functionality to behave like the native's windows 10 ( for example ) one, but in that two cases I listed above ( Spotify and Word ), the buttons are native to the OS, I mean I can tell it's a real windows 10 close/minimize/maximize buttons.

It can be done in any way at javaFX? ( not sure if it's worth mention but I also use an Visual editor - Scene builder )

Thanks in advance.

Answer 1

A possible approach to your problem would be to remove the default layout of the primary stage and start modifying it by yourself. To do that you have to use an undecorated toolbar. You do that at your stage controller:

    primaryStage.initStyle(StageStyle.UNDECORATED);

After that you can create your customized toolbar. Here is a very basic example:

    primaryStage.initStyle(StageStyle.UNDECORATED);

    BorderPane borderPane = new BorderPane();
    borderPane.setStyle("-fx-background-color: green;");

    ToolBar toolBar = new ToolBar();

    int height = 25;
    toolBar.setPrefHeight(height);
    toolBar.setMinHeight(height);
    toolBar.setMaxHeight(height);
    toolBar.setStyle("-fx-background-color: blue;");



    borderPane.setTop(toolBar);

    primaryStage.setScene(new Scene(borderPane, 300, 250));
    primaryStage.show();

Anyways you can play with the design and try different ways in order to fit your preferences. As for the part of native toolbar buttons one idea would be imitating them. Have a look in the following link how to design them.

http://fxexperience.com/2011/12/styling-fx-buttons-with-css/