Customized Text in ListView javafx

Question

I wanna design a custom listview in JavaFX, And I need to add some different fonts with different sizes, but my code doesn't work.

Here is my updateItem Function:

list.setCellFactory(param -> new ListCell<String>() {
        @Override
        protected void updateItem(String item, boolean empty) {
            super.updateItem(item, empty);
            if (empty) {
                setText(null);
                setGraphic(null);
            } else {
                ImageView imageView = new ImageView();
                switch (item) {
                    case "Back":
                        imageView.setImage(image1);
                        System.out.println(imageView.getImage());
                        break;
                    case "Shop":
                        imageView.setImage(image0);
                        break;
                }
                imageView.setFitHeight(100);
                imageView.setFitWidth(100);
                Text text = new Text(item);
                text.setFont(Font.font("B Aria", 500));
                Text text1 = new Text("100");
                text1.setFont(Font.font("Arial", 200));
                setText(text.getText() + "\n" + text1.getText());
                setGraphic(imageView);
                setStyle("-fx-background-color: white");
                setStyle("-fx-text-fill:#5aa6f0;");
            }
        }
    });

As you see, Two texts are same in Font and size:

How can I fix this? Thanks.

Answer 1

The text property of the cell is just a string: it doesn't carry any style or font information with it. So all you are doing here is setting the text of the cell to the concatenation of the two strings, with a newline between them. The style of the text is determined solely by styles set on the cell itself (ie a text fill of #5aa6f0 ).

To achieve what you want here, you'll need to display the two Text objects with their styles as part of the graphic . Since you already have an image view as the graphic, you'll need to combine these: eg you can have a VBox containing the two Text s, and an HBox containing the image and the VBox . You may need to experiment with the layout to get it exactly as you want, but this should give you the idea:

list.setCellFactory(param -> new ListCell<String>() {

    private final VBox textContainer = new VBox();
    private final Text itemText = new Text();
    private final Text valueText = new Text();
    private final HBox graphic = new HBox();
    private final ImageView imageView = new ImageView();

    {
        textContainer.getChildren().addAll(itemText, valueText);
        graphic.getChildren().addAll(imageView, textContainer);
        // may be better to put styles in an external CSS file:
        itemText.setFill(Color.web("#5aa6f0"));
        itemText.setFont(Font.font("B Aria", 500));
        valueText.setFill(Color.web("#5aa6f0"));
        valueText.setFont(Font.font("Arial", 200));
        setStyle("-fx-background-color: white;");
        imageView.setFitHeight(100);
        imageView.setFitWidth(100);
    }

    @Override
    protected void updateItem(String item, boolean empty) {
        super.updateItem(item, empty);
        if (empty) {
            setGraphic(null);
        } else {
            switch (item) {
                case "Back":
                    imageView.setImage(image1);
                    break;
                case "Shop":
                    imageView.setImage(image0);
                    break;
            }
            itemText.setText(item);
            valueText.setText("100");
            setGraphic(graphic);
        }
    }
});