JavaFX: Apply css styles to toggle button

We can style toggle button widgets using style sheets.

Below step-by-step procedure explains, how to set the styles to ToggleButton using style sheets.

Step 1: Put all the css styles in a file and add the style sheet to the Scene object.

private static String cssFilePath = "C:\\Users\\krishna\\Documents\\Study\\javaFX\\demo.css";

Scene scene = new Scene(vbox, 800, 400);

scene.getStylesheets().add(new File(cssFilePath).toURI().toURL().toExternalForm());

Step 2: Add the styles to the toggle buttons.

Ex

ToggleButton toggleButton1 = new ToggleButton("Red");

toggleButton1.setUserData(Color.RED);

toggleButton1.getStyleClass().add("toggle-button1");

Find the below working application.

demo.css

.toggle-button1{
  -fx-font: 40 arial;
    -fx-base: red;   
}
 
.toggle-button2{
  -fx-font: 40 arial;
    -fx-base: lightgreen;  
}
 
.toggle-button3{
  -fx-font: 40 arial;
    -fx-base: lightblue;   
}

ToggleButtonApp.java

package com.sample.demos;

import java.io.File;
import java.io.FileNotFoundException;
import java.net.MalformedURLException;

import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Toggle;
import javafx.scene.control.ToggleButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class ToggleButtonApp extends Application {
 private static String cssFilePath = "C:\\Users\\krishna\\Documents\\Study\\javaFX\\demo.css";

 @Override
 public void start(Stage primaryStage) throws FileNotFoundException, MalformedURLException {
  ToggleGroup toggleGroup = new ToggleGroup();

  ToggleButton toggleButton1 = new ToggleButton("Red");
  toggleButton1.setUserData(Color.RED);
  toggleButton1.getStyleClass().add("toggle-button1");

  ToggleButton toggleButton2 = new ToggleButton("Green");
  toggleButton2.setUserData(Color.GREEN);
  toggleButton2.getStyleClass().add("toggle-button2");

  ToggleButton toggleButton3 = new ToggleButton("Blue");
  toggleButton3.setUserData(Color.BLUE);
  toggleButton3.getStyleClass().add("toggle-button3");

  toggleButton1.setToggleGroup(toggleGroup);
  toggleButton2.setToggleGroup(toggleGroup);
  toggleButton3.setToggleGroup(toggleGroup);

  Rectangle rect = new Rectangle();
  rect.setHeight(200);
  rect.setWidth(800);
  rect.setFill(Color.RED);
  rect.setStroke(Color.DARKGRAY);
  rect.setStrokeWidth(2);
  rect.setArcHeight(10);
  rect.setArcWidth(10);

  toggleGroup.selectedToggleProperty()
    .addListener((ObservableValue<? extends Toggle> ov, Toggle old_toggle, Toggle new_toggle) -> {
     if (new_toggle == null)
      rect.setFill(Color.WHITE);
     else
      rect.setFill((Color) toggleGroup.getSelectedToggle().getUserData());
    });

  HBox hbox = new HBox(toggleButton1, toggleButton2, toggleButton3);
  VBox vbox = new VBox(hbox, rect);

  hbox.setAlignment(Pos.TOP_CENTER);

  Scene scene = new Scene(vbox, 800, 400);
  scene.getStylesheets().add(new File(cssFilePath).toURI().toURL().toExternalForm());

  /* Set the scene to primaryStage, and call the show method */
  primaryStage.setTitle("JavaFX Toggle Button Example");
  primaryStage.setScene(scene);
  primaryStage.show();
 }

}

TestFX.java

package com.sample.demos;

import javafx.application.Application;

public class TestFX {
 public static void main(String args[]) {
  Application.launch(ToggleButtonApp.class, args);
 }
}

Previous                                                 Next                                                 Home