Change ListView font size in JavaFX

Question

I want to know how can I change the list view items text font size in JavaFx. The size of each row text will vary . I tried using cell factor property but i don't know how to use it. Can anybody help me here ?

Answer 1

A similar question is here:

How to change the font size in ListView in JavaFX?

Also you can play with the .css below:

.list-cell:filled:selected:focused, .list-cell:filled:selected {
    -fx-background-color: linear-gradient(#328BDB 0.0%, #207BCF 25.0%, #1973C9 75.0%, #0A65BF 100.0%);
    -fx-text-fill: white;
}

.list-cell{
    -fx-font-size:15.0;
}

.list-cell:even { /* <=== changed to even */
    -fx-background-color: white;
}

.list-cell:filled:hover {
    -fx-background-color: #0093ff;
    -fx-text-fill: white;
}

How to use external css in JavaFX?

How to use external css file to style a javafx application

How to programmatically change the size of text?:

Before Java8:

listView.setCellFactory(new Callback<ListView<String>, ListCell<String>>() {
            @Override
            public ListCell<String> call(ListView<String> p) {
                return new ListCell<String>() {
                    @Override
                    protected void updateItem(String item, boolean empty) {
                        super.updateItem(item, empty);
                        if (item != null) {
                            setText(item);

                            // decide to add a new styleClass
                            // getStyleClass().add("costume style");
                            // decide the new font size
                            setFont(Font.font(16));
                        }
                    }
                };
            }
        });

With lambda expressions:

listView.setCellFactory(cell -> {
            return new ListCell<String>() {
                @Override
                protected void updateItem(String item, boolean empty) {
                    super.updateItem(item, empty);
                    if (item != null) {
                        setText(item);

                        // decide to add a new styleClass
                        // getStyleClass().add("costume style");
                        // decide the new font size
                        setFont(Font.font(16));
                    }
                }
            };
        });

Answer 2

Store text and text size in a item class

public class SizedText {

    private final int textSize;
    private final String text;

    public SizedText(int textSize, String text) {
        this.textSize = textSize;
        this.text = text;
    }

    public int getTextSize() {
        return textSize;
    }

    public String getText() {
        return text;
    }
}

And use a cellFactory that returns ListCell s that set the text size according to the item data in the updateItem method.

@Override
public void start(Stage primaryStage) {
    ListView<SizedText> list = new ListView<>(FXCollections.observableArrayList(
            new SizedText(10, "10"),
            new SizedText(15, "15"),
            new SizedText(20, "20"),
            new SizedText(25, "25"),
            new SizedText(30, "30"),
            new SizedText(35, "35"),
            new SizedText(40, "40"),
            new SizedText(50, "50"),
            new SizedText(60, "60")
    ));

    list.setCellFactory(l -> new ListCell<SizedText>() {

        @Override
        protected void updateItem(SizedText item, boolean empty) {
            super.updateItem(item, empty);

            if (empty || item == null) {
                setText(null);
            } else {
                setText(item.getText());
                setFont(Font.font(item.getTextSize()));
            }
        }

    });

    Scene scene = new Scene(list);

    primaryStage.setScene(scene);
    primaryStage.show();
}

Answer 3

In javaFx you can use css to style different objects. It depends on the object in your list view but it would go something like this.

ListView<Hyperlink> listview = ..

            ObservableList<Hyperlink> lists = listview.getItems();

            for(Hyperlink link:lists)
            {
                link.setStyle("-fx-background-color:#ffffff");
            }