How to add images to a ListView

Question

I\'ve been reading documents for the last 8 hours and found nothing that could help me. Vaguely yes, but no code is working becuase it keeps saying \"image url not found\" and t

Answer 1

Try to solve the issues in smaller pieces, a step by step approach.
You can start by getting the list view display the images you want. Using hot linked images makes the code more of an mre and makes helping and testing easy and efficient:

import java.util.stream.Stream;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.TilePane;
import javafx.stage.Stage;

public class FxMain extends Application {

    @Override
    public void start(Stage primaryStage) {

        MonthListCell[] listCell = Stream.of(Month.values()).map(MonthListCell::new).toArray(MonthListCell[]::new);
        ObservableList<MonthListCell> items =FXCollections.observableArrayList (listCell);
        ListView<MonthListCell> listView = new ListView<>(items);
        primaryStage.setScene(new Scene(listView));
        primaryStage.sizeToScene();
        primaryStage.show();
    }

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

enum Month{

    JAN(1,"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/64x64/Circle_Green.png"),
    FEB(2,"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/64x64/Circle_Red.png"),
    MAR(3,"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/64x64/Circle_Yellow.png"),
    APR(4,"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/64x64/Circle_Blue.png"),
    MAY(5,"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/64x64/Circle_Orange.png"),
    JUN(6,"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/64x64/Circle_Grey.png");

    private final int monthValue;
    private final String imgName;

    private Month(int monthValue, String imgName){
        this.monthValue = monthValue;
        this.imgName = imgName;
    }

    public int getMonth(){
        return monthValue;
    }

    public String getImage(){
        return imgName;
    }
}

class MonthListCell extends ListCell<Month> {

    private final ImageView imageView;
    private final Label text; 

    MonthListCell(Month month) {
        Image image = new Image(month.getImage());
        imageView = new ImageView(image);
         //use label for text instead of setText() for better layout control 
        text = new Label(month.name());
        TilePane node = new TilePane(Orientation.VERTICAL, 5, 0, imageView, text);
        setGraphic(node);
    }

    @Override
    public void updateItem(Month month, boolean empty) {
        super.updateItem(month, empty);
        if (empty) {
            setText(null);
            setGraphic(null);
        } else {
            imageView.setImage(new Image(month.getImage()));
            text.setText(month.name());
        }
    }
}

Next try to use local resources (images) instead of the linked resources.