Javafx- how this multiple toggle buttons (in one group) actions are correctly configure for my need

Question

This is what happens. But i need to return colors when i press other toggle buttons

What I need to do is colors need to be back to blue after clicking on another button (while toggling another button need to untoggle toggled buttons)

Problem is when I toggle 1st button (working correctly - changing color on box). But when I press 2nd button while selected 1st button, 1st button color box color not returning to blue.

public class FXMLDocumentController implements Initializable {
    
    @FXML
    private ToggleButton TB1;

    @FXML
    private ToggleGroup G1;

    @FXML
    private ToggleButton TB2;

    @FXML
    private ToggleButton TB3;

    @FXML
    private ToggleButton TB4;

    @FXML
    private Rectangle C1;

    @FXML
    private Rectangle C2;

    @FXML
    private Rectangle C3;

    @FXML
    private Rectangle C4;

    @FXML
    void TB1Action(ActionEvent event) {
        if (TB1.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C1, Color.DODGERBLUE, Color.RED);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C1, Color.RED, Color.DODGERBLUE);
            ft.play();
        }
    }

    @FXML
    void TB2Action(ActionEvent event) {
        if (TB2.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C2, Color.DODGERBLUE, Color.GREENYELLOW);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C2, Color.GREENYELLOW, Color.DODGERBLUE);
            ft.play();
        }
    }

    @FXML
    void TB3Action(ActionEvent event) {
        if (TB3.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C3, Color.DODGERBLUE, Color.GREENYELLOW);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C3, Color.GREENYELLOW, Color.DODGERBLUE);
            ft.play();
        }
    }

    @FXML
    void TB4Action(ActionEvent event) {
        if (TB4.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C4, Color.DODGERBLUE, Color.GREENYELLOW);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C4, Color.GREENYELLOW, Color.DODGERBLUE);
            ft.play();
        }
    }
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    
}

Answer 1

You don't need to set onAction property for the ToggleButtons. Just add a ChangeListener to the selectedToggle property of the ToggleGroup. In that ChangeListener you need to do two things:

1. Change the color of the Rectangle associated with the newly selected ToggleButton.
2. Revert the color of the previously selected ToggleButton.

I reverse engineered a FXML file based on the code in your question. The below code is a SSCCE with minimal changes to your code just to show how to use a ChangeListener.

File: fxmldocu.fxml

<?xml version="1.0" encoding="UTF-8"?>
<?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?>

<VBox fx:id="root"
      xmlns:fx="https://javafx.com/fxml/1"
      xmlns="http://javafx.com/javafx/15.0.1"
      fx:controller="FXMLDocumentController"
      spacing="10">
    <fx:define>
        <ToggleGroup fx:id="G1"/>
    </fx:define>
   <children>
      <HBox spacing="10">
         <children>
            <ToggleButton fx:id="TB1" text="ToggleButton" toggleGroup="$G1" selected="false">
            </ToggleButton>
            <Rectangle fx:id="C1" width="100" height="29">
               <fill><Color fx:constant="DODGERBLUE"/></fill>
            </Rectangle>
         </children>
      </HBox>
      <HBox spacing="10">
         <children>
            <ToggleButton fx:id="TB2" text="ToggleButton" toggleGroup="$G1" selected="false">
            </ToggleButton>
            <Rectangle fx:id="C2" width="100" height="29">
               <fill><Color fx:constant="DODGERBLUE"/></fill>
            </Rectangle>
         </children>
      </HBox>
      <HBox spacing="10">
         <children>
            <ToggleButton fx:id="TB3" text="ToggleButton" toggleGroup="$G1" selected="false">
            </ToggleButton>
            <Rectangle fx:id="C3" width="100" height="29">
               <fill><Color fx:constant="DODGERBLUE"/></fill>
            </Rectangle>
         </children>
      </HBox>
      <HBox spacing="10">
         <children>
            <ToggleButton fx:id="TB4" text="ToggleButton" toggleGroup="$G1" selected="false">
            </ToggleButton>
            <Rectangle fx:id="C4" width="100" height="29">
               <fill><Color fx:constant="DODGERBLUE"/></fill>
            </Rectangle>
         </children>
      </HBox>
   </children>
</VBox>

Your FXMLDocumentController with added ChangeListener

import javafx.animation.FillTransition;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Toggle;
import javafx.scene.control.ToggleButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.util.Duration;

public class FXMLDocumentController {
    @FXML
    private ToggleButton TB1;

    @FXML
    private ToggleGroup G1;

    @FXML
    private ToggleButton TB2;

    @FXML
    private ToggleButton TB3;

    @FXML
    private ToggleButton TB4;

    @FXML
    private Rectangle C1;

    @FXML
    private Rectangle C2;

    @FXML
    private Rectangle C3;

    @FXML
    private Rectangle C4;

    @FXML
    void TB1Action(ActionEvent event) {
        if (TB1.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C1, Color.DODGERBLUE, Color.RED);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C1, Color.RED, Color.DODGERBLUE);
            ft.play();
        }
    }

    @FXML
    void TB2Action(ActionEvent event) {
        if (TB2.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C2, Color.DODGERBLUE, Color.GREENYELLOW);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C2, Color.GREENYELLOW, Color.DODGERBLUE);
            ft.play();
        }
    }

    @FXML
    void TB3Action(ActionEvent event) {
        if (TB3.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C3, Color.DODGERBLUE, Color.GREENYELLOW);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C3, Color.GREENYELLOW, Color.DODGERBLUE);
            ft.play();
        }
    }

    @FXML
    void TB4Action(ActionEvent event) {
        if (TB4.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C4, Color.DODGERBLUE, Color.GREENYELLOW);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C4, Color.GREENYELLOW, Color.DODGERBLUE);
            ft.play();
        }
    }

    @FXML
    private void initialize() {
        G1.selectedToggleProperty().addListener(new ChangeListener<Toggle>() {

            @Override
            public void changed(ObservableValue<? extends Toggle> observable, Toggle oldValue, Toggle newValue) {
                if (oldValue == TB1) {
                    TB1Action(null);    
                }
                else if (oldValue == TB2) {
                    TB2Action(null);
                }
                else if (oldValue == TB3) {
                    TB3Action(null);
                }
                else if (oldValue == TB4) {
                    TB4Action(null);
                }
                if (newValue == TB1) {
                    TB1Action(null);    
                }
                else if (newValue == TB2) {
                    TB2Action(null);
                }
                else if (newValue == TB3) {
                    TB3Action(null);
                }
                else if (newValue == TB4) {
                    TB4Action(null);
                }
            }
        });
    }
}

Note that the "controller" class does not need to implement Initializable interface. It can simply declare a initialize method instead, as I have done in the above code.

Finally, an Application class for running the application.

import java.net.URL;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Togglers extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Class<?> theClass = getClass();
        URL url = theClass.getResource("fxmldocu.fxml");
        VBox root = (VBox) FXMLLoader.load(url);
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

Also note that another possible alternative – which I did not explore – could be to bind the selectedToggle property of ToggleGroup with the selected property for each ToggleButton.

Lastly, (and before kleopatra adds a comment regarding it :-) consider using Java naming conventions.