Search code examples
javajavafxjavafx-8javafx-2

Java FX button highlight

enter image description here

What I want to do is, Please see attached screen shot. Once I click on between buttons 1-4 it should be highlighted with red and stay as highlighted until I select any other button between button 1 and button 4 and then highlight the selected button should be highlighted. I can do this with focused property. But I have other buttons on my scene such that button 5,6 and 7. Once I click on any other button or click on another control focus and red color goes away. But I want the clicked button stay as highlighted, or a sign that will show which button(between button 1 and button 4) is selected.

Solution

  • I recommend using a ToggleGroup and ToggleButton for this. The ToggleGroup allows your user to only select one button at a time. When the button is selected, you can then set the style you want.

    In the sample program below, I've got 6 ToggleButtons in the group and only one may be selected at any given time. The selected button will have a red background (highlight). Any buttons you create that do not have this styling will be unaffected.

    The code below is commented as well:

    import javafx.application.Application;
import javafx.geometry.Insets;
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.VBox;
import javafx.stage.Stage;

public class ButtonHighlights extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {

        // Simple interface
        VBox root = new VBox(5);
        root.setPadding(new Insets(10));
        root.setAlignment(Pos.CENTER);

        // Create a ToggleGroup to hold the list of ToggleButtons. This will allow us to allow the selection of only one
        // ToggleButton at a time
        ToggleGroup toggleGroup = new ToggleGroup();

        // Create our 6 ToggleButtons. For this sample, I will use a for loop to add them to the ToggleGroup. This is
        // not necessary for the main functionality to work, but is used here to save time and space
        for (int i = 0; i < 6; i++) {
            ToggleButton button = new ToggleButton("Button #" + i);

            // If you want different styling for the button when it's selected other than the default, you can either
            // use an external CSS stylesheet, or apply the style in a listener like this:
            button.selectedProperty().addListener((observable, oldValue, newValue) -> {

                // If selected, color the background red
                if (newValue) {
                    button.setStyle(
                            "-fx-background-color: red;" + 
                            "-fx-text-fill: white");
                } else {
                    button.setStyle(null);
                }
            });

            // Add the button to our ToggleGroup
            toggleGroup.getToggles().add(button);
        }

        // Add all our buttons to the scene
        for (Toggle button :
                toggleGroup.getToggles()) {
            root.getChildren().add((ToggleButton) button);
        }

        // Show the Stage
        primaryStage.setWidth(300);
        primaryStage.setHeight(300);
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }
}

    The Result:

    screenshot