Javafx buttons with css

JavaFX Button Styling

In the JavaFX application, we can apply CSS styling to buttons in various ways. We can change the size of the button as well as border colour, text colour can also be changed.

JavaFX Button with specified height and width:

import java.io.FileInputStream; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.StackPane; import javafx.stage.Stage; import javafx.event.ActionEvent; import javafx.event.EventHandler; public class ButtonUI extends Application < @Override public void start(Stage primaryStage) throws Exception < StackPane pane = new StackPane(); Button newbtn=new Button(" Submit "); newbtn.setMaxWidth(200); newbtn.setMaxHeight(100); newbtn.setOnAction(new EventHandler() < @Override public void handle(ActionEvent arg0) < System.out.println(" Button with specified size is clicked"); >> ); Scene scene=new Scene(pane,400,400); pane.getChildren().add(newbtn); primaryStage.setScene(scene); primaryStage.setTitle(" JavaFX Button with specified max width and height "); primaryStage.show(); > public static void main(String[] args) < launch(args); >> 

In order to create the Button with specified width and height in JavaFX and add action on it, we have to import all the required libraries such as the javafx.application.Application, javafx.scene.Scene, javafx.scene.control.Button, javafx.scene.layout.StackPane, javafx.stage.Stage, javafx.event.ActionEvent and javafx.event.EventHandler. Then we have created one class named ButtonUI extending the Application class. Also, we have to override the start method to provide implementation details. This method creates an object of Stage as primaryStage. For the container to hold a button with the image, a StackPane object is created which is then passed to the Scene class object. Then the Button class constructor is created with the name of the button passed to it, then the setMaxWidth() and setMaxHeight() method is called to specify the maximum width and height of the button. Then setOnAction() method is called on an instance of Button class and overridden handle method with the anonymous class object passed to it. Then button object is added to the StackPane container, the stage is prepared, the title is set, and the show() method is called to display output. In order to run the application, the launch(args) method is called in the main() method. In output Frame like container is displayed with the title, «JavaFX Button with specified max width and height”. Also, Submit button is displayed with a width 200 and a height 100.

JavaFX Button with specified CSS Styling:

We can apply CSS styles such as border, text color on the button in JavaFX.

import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.HBox; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class ButtonUI extends Application < @Override public void start(Stage primaryStage) throws Exception < Button newbn = new Button(" File "); Button newbn2 = new Button(" Edit "); Button newbn3 = new Button(" Help "); newbn.setStyle("-fx-border-color: #ff0000; -fx-border-width: 2px;"); newbn2.setStyle("-fx-background-color: #89cff0"); newbn3.setStyle("-fx-text-fill: #009000"); HBox hbox = new HBox(newbn, newbn2, newbn3); Scene scene = new Scene(hbox, 400, 400); primaryStage.setTitle(" JavaFX button with CSS styling "); primaryStage.setScene(scene); primaryStage.show(); >public static void main(String[] args) < Application.launch(args); >> 

In order to create the Buttons with specified CSS styling in JavaFX, we have to import all the required libraries such as the javafx.application.Application, javafx.scene.Scene, javafx.scene.control.Button, javafx.scene.layout.StackPane, javafx.stage.Stage, javafx.scene.layout.HBox. Then we have created one class named ButtonUI extending the Application class. Also, we have to override the start method to provide implementation details. This method creates an object of Stage as primaryStage. Then 3 buttons are created using the constructor and name specified to them. Style is set to each button using setStyle() method. Various CSS styling such as border colour and width, background colour, text colour is added in the setStyle() method. Then HBox object is created with 3 buttons passed to it. Scene class object is created with HBox object passed to it. Then the title is set and the show() method is called to display output. In order to run application, Application.launch(args) method is called in main() method. In the output, Frame like container is displayed with 3 buttons. The first button is File. It is created with border color red and border width 2 px specified. The second button, Edit has a background color sky blue. The third button Help is created with the text color green.

Источник

JavaFX Image Button Tutorial

In this tutorial, we will learn how to create image buttons in JavaFX. By default, there is no special component named ImageButton. However, we can easily extend the default JavaFX Button to create a button with image.

JavaFX Image Button with Text

To create a button with image, we can make use of the Button#setGraphic(Node) function. We can set the image we want to attach to the button through the setGraphic() method. Let’s see an example code to understand it better.

import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.ContentDisplay; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.layout.Region; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class JavaFXImageButton extends Application < private static final double BUTTON_HEIGHT = 100; public void start(Stage stage) < //Create a Button Button button = new Button("Download!"); button.setPrefSize(Region.USE_COMPUTED_SIZE, BUTTON_HEIGHT); //Create imageview with background image ImageView view = new ImageView(new Image("download.png")); view.setFitHeight(BUTTON_HEIGHT); view.setPreserveRatio(true); //Attach image to the button button.setGraphic(view); //Set the image to the top button.setContentDisplay(ContentDisplay.TOP); Scene scene = new Scene(new StackPane(button), 600, 300); stage.setTitle("JavaFX Button with Image!"); stage.setScene(scene); stage.show(); >public static void main(String[] args) < launch(args); >>

You can see the result above. We have added the image icon on the top and text on the bottom. You can change the position of the text with respect to the image by changing the setContentDisplay() option.

//Set button text to the right of the image button.setContentDisplay(ContentDisplay.RIGHT); //Set button text to the left of the image button.setContentDisplay(ContentDisplay.LEFT);

JavaFX Image Only Button

Now, if you would like to implement a button without any text that fits the button fully, let’s see how that can be achieved. When you want a clickable button with just an image and no text, you can still use the setGraphic(Node) function. Let’s understand it with an example code. We should make use of the no-arg constructor of javafx.scene.control.Button() to create button without any text.

private static final double BUTTON_HEIGHT = 100; public void start(Stage stage) < //Creating a Button without any text Button button = new Button(); button.setPrefSize(Region.USE_COMPUTED_SIZE, BUTTON_HEIGHT); //Create imageview with background image ImageView view = new ImageView(new Image("background.jpg")); view.setFitHeight(BUTTON_HEIGHT); view.setPreserveRatio(true); //Attach image to the button button.setGraphic(view); Scene scene = new Scene(new StackPane(button), 600, 300); stage.setTitle("JavaFX Button with Image!"); stage.setScene(scene); stage.show(); >

This will create the following output.

Q. How to remove the padding between the button graphic image and the button edge?
If you want to get rid of the padding between the image and the button edge, you need to manually set the button padding to zero. This can be done using the setPadding(Inset) option.

button.setPadding(Insets.EMPTY);

JavaFX Image Button with CSS

We can also create ImageButton with the help of JavaFX CSS. Set the image as the background for the Button using -fx-background-image CSS styling. Let’s see how we can create our ImageButton with CSS. The disadvantage of using a background image is that, the text will be on top of the image, and we will have to make sure that the text color is readable in the image background.

import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class JavaFXImageButton extends Application < public void start(Stage stage) < //Creating a Button without any text Button button = new Button(); button.setPrefSize(200, 100); button.setStyle("-fx-background-image: url(background.jpg);-fx-text-fill: white;-fx-font-size: 20px"); button.setText("Download!"); Scene scene = new Scene(new StackPane(button), 600, 300); stage.setTitle("JavaFX Image Button with CSS!"); stage.setScene(scene); stage.show(); >public static void main(String[] args) < launch(args); >>

Conclusion

In this tutorial, we have learned how to create JavaFX Buttons with Images. We have created button with image and text, button with only image and Image Button with CSS styling. If you liked this article, you might also want to checkout some of the other interesting articles I have written.

Источник