Updating image in table

Question

I'm currently creating an inventory system in which the user can select an item from their inventory list collection, and the icon on the right will update.

As of now, I've implemented a ClickListener to get the currently selected item from the inventory list and called the .getImage() method that I created to get the icon of the selected item.

I used table.add(image); to add the icon to the table. However, when the icon is added to the table, it fills up that space, and another column is created to the right when the user selects on another item. This is the issue.

How do I get the image area to update when the user selects another item, rather than creating another column to the right?

This is currently how it is: https://i.sstatic.net/4SUqD.jpg

I want the area where the sword is to be updated with the latest item that the user has clicked on.

Here is my code:

package com.sps.game.inventory;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Input;
import com.badlogic.gdx.InputProcessor;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.scenes.scene2d.*;
import com.badlogic.gdx.scenes.scene2d.ui.*;

import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
import com.badlogic.gdx.utils.viewport.FitViewport;
import com.badlogic.gdx.utils.viewport.Viewport;
import com.sps.game.controller.InventoryController;
import com.sps.game.controller.PlayerController;

import java.util.ArrayList;

public class PlayerInventory {
    public Stage stage;
    public SpriteBatch sb;
    private Viewport viewport;

    private Skin skin = new Skin(Gdx.files.internal("core/assets/pixthulhuui/pixthulhu-ui.json"));

    private List<Item> inventory;
    private List<Image> itemImages;

    private InventoryController inventoryController;
    private InputProcessor oldInput;

    Table table = new Table(skin);



    public PlayerInventory(SpriteBatch sb, PlayerController playerController) {
        this.sb = sb;
        viewport = new FitViewport(Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), new OrthographicCamera());
        stage = new Stage(viewport, sb);

        inventoryController = new InventoryController();
        inventory = inventoryController.getInventoryList();
       // itemImages = inventoryController.getImageList();
    }


    //THIS IS WHERE THE IMAGE IS ADDED

    private void formatting() {
        stage = new Stage();
        Label inventoryLabel = new Label("Inventory", skin);
        final Label imageLabel = new Label("Item", skin);

        table.setDebug(true);
        table.defaults();
        table.center();
        table.setFillParent(true);
        table.add(inventoryLabel);
        table.add(imageLabel);
        table.row();

        table.add(inventory); //need a way to get the current item selected
        inventory.addListener(new ClickListener() {
            public void clicked(InputEvent event, float x, float y) {
                Item clickedItem = inventory.getSelected();
                Image clickedImage = clickedItem.getImage();
                table.add(clickedImage);
                System.out.println(clickedItem.getName());
                }
            });



     //   stage.addActor(itemImages);
        stage.addActor(table);
    }





    public void setInput() {
        oldInput = Gdx.input.getInputProcessor(); //Get the old input from the user.
        Gdx.input.setInputProcessor(stage);       //Set the input to now work on the inventory.
    }

    public void update() {
        if (Gdx.input.isKeyPressed(Input.Keys.I) && oldInput == null) {
            formatting();
            setInput();
        }

        if (Gdx.input.isKeyPressed(Input.Keys.O) && oldInput != null) {
            stage.dispose();
            Gdx.input.setInputProcessor(oldInput);
            oldInput = null;
        }
    }

    public void dispose() {
        stage.dispose();
    }

}

The image is added in the formatting method()-

             inventory.addListener(new ClickListener() {
             public void clicked(InputEvent event, float x, float y) {
                Item clickedItem = inventory.getSelected();
                Image clickedImage = clickedItem.getImage();
                table.add(clickedImage);
                System.out.println(clickedItem.getName());
                }

Answer 1

Solved. You shouldn't use table.add(clickedImage) every time the screen is clicked. add() creates a new cell. Instead, add a placeholder Image just once during initial layout and keep a reference to it. In my ClickListener, i used clickedImage.setDrawable() instead to change what image is displayed.

Answer 2

I found the problem, looking into the LibGDX Wiki Table - Adding Cells it seems you are using the add() method that does not replace the previous actor in the cell, it only adds another one in the row. Instead, you should save your displayed image apart from the List

public class PlayerInventory {

    [..........................]

    Item clickedItem; // This will save your clicked item
    Image clickedImage; // This will save your clicked image;

    [..........................]

    inventory.addListener(new ClickListener() {
         public void clicked(InputEvent event, float x, float y) {
                if (clickedItem == null && clickedImage == null) {
                    clickedItem = inventory.getSelected(); // This line changed
                    clickedImage = clickedItem.getImage(); // This line changed
                    table.add(clickedImage);
                } else {
                    clickedItem = inventory.getSelected(); // This line changed
                    clickedImage = clickedItem.getImage(); // This line changed
                }

                System.out.println(clickedItem.getName());
            }
}

This will add the image if there was no image before and replace the image if there was one before. Hope this helps!