Change JList item background color on hover

Question

I'm trying to change the background color of a JList cell when it is being hovered over, but I'm not sure how to do it. Here is what I currently have:

package cats.youtube.gui;

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Component;
import java.awt.Rectangle;
import java.awt.event.MouseEvent;
import java.util.LinkedList;

import javax.swing.AbstractListModel;
import javax.swing.DefaultListCellRenderer;
import javax.swing.JList;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
import javax.swing.ListSelectionModel;
import javax.swing.border.EmptyBorder;

import cats.youtube.search.YoutubeSearchResult;

public class SearchResultsList extends JPanel{

    private class Renderer extends DefaultListCellRenderer{

        public Component getListCellRendererComponent(JList list, Object value, int index, boolean selected, boolean focused){
            final JTextArea area = new JTextArea(model.get(index).toString());
            area.setBorder(new EmptyBorder(5, 0, 5, 0));
            area.setForeground(selected || focused ? Color.WHITE : Color.BLACK);
            area.setBackground(selected || focused ? Color.RED : Color.WHITE);
            return area;
        }
    }

    public class Model extends AbstractListModel<String>{

        private LinkedList<YoutubeSearchResult> results;
        private Object lock;

        private Model(){
            results = new LinkedList<YoutubeSearchResult>();

            lock = new Object();
        }

        public int getSize(){
            return results.size();
        }

        public String getElementAt(final int i){
            return results.get(i).toString();
        }

        public YoutubeSearchResult get(final int i){
            return results.get(i);
        }

        public void add(final YoutubeSearchResult r){
            synchronized(lock){
            results.add(r);
            fireContentsChanged(this, 0, getSize());
            try{
                lock.wait(500L);
            }catch(InterruptedException e){
                e.printStackTrace();
            }
            }
        }

        public void remove(final YoutubeSearchResult r){
            results.remove(r);
            fireContentsChanged(this, 0, getSize());
        }

        public void removeAll(){
            results.clear();
            fireContentsChanged(this, 0, getSize());
        }
    }

    private JList<String> list;
    private JScrollPane scroll;
    private Model model;
    private Renderer renderer;

    public SearchResultsList(){
        super(new BorderLayout());

        list = new JList<String>(){
            public void processMouseMotionEvent(final MouseEvent e){
                super.processMouseMotionEvent(e);
                final int i = locationToIndex(e.getPoint());
                if(i > -1){
                    final Rectangle bounds = getCellBounds(i, i+1);
                    if(bounds.contains(e.getPoint())){
                        //           <--------- here is line 95
                    }
                }

            }
        };
        list.setModel(model = new Model());
        list.setCellRenderer(renderer = new Renderer());
        list.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);

        add(scroll = new JScrollPane(list), BorderLayout.CENTER);
    }

    public Model getModel(){
        return model;
    }
}

The problem is on line 95; I don't know what to put there. I tried multiple approaches, one being calling the getListCellRendererComponent method through my renderer and changing the background like that, but that didn't work.

The hovering portion does work (it does get the correct indexes) I just don't know what to put on line 95. If anyone could help me, it would be very much appreciated.

Answer 1

I, personally, would use a MouseMotionListener over overriding the processMouseMotionEvent, but that's just me.

You need some way to tell the renderer which rows are "highlighted", the two immediate ways I can think of achieving this is to ...

1. Create a custom JList which has methods to set/get the highlighted row. You would then need to cast to this implementation and interrogate the appropriate method, taking action as required.
2. Provide a method within the list data that mark the row as highlighted or not. This would allow you to interrogate the data directly.

The advantage of the first approach is that it isolates the responsibility to the view, where it really belongs. It does have the disadvantage of meaning you need to create a custom JList. It might be easier to use the getClientProperty and putClientProperty methods instead, this would mean you wouldn't need a custom implementation nor cast the list in the renderer, but is has the disadvantage of not being obvious to other developers.

The second approach mixes display and data information together, not something I would encourage as you really want to keep this kind of stuff separated ;)

Answer 2

Here's how I did it (solution here: http://objectmix.com/java/73071-highlight-itemin-jlist-mouseenter-mouse-over.html, second message):

private int mHoveredJListIndex = -1;

...

mList.addMouseMotionListener(new MouseAdapter() {
  public void mouseMoved(MouseEvent me) {
    Point p = new Point(me.getX(),me.getY());
    int index = mList.locationToIndex(p);
    if (index != mHoveredJListIndex) {
      mHoveredJListIndex = index;
      mList.repaint();
    }
  }
});

And in your renderer:

public class CellRenderer extends JComponent implements ListCellRenderer
{

  @Override
  public Component getListCellRendererComponent(JList aList, Object aValue, int aIndex, boolean aIsSelected, boolean aCellHasFocus)
  {
    Color backgroundColor = mHoveredJListIndex == aIndex ? Color.gray : Color.white;
    JPanel pane = new JPanel(new BorderLayout()); // add contents here   

    pane.setBackground(backgroundColor);
    return pane;
  }
}

Answer 3

AFAIK good RolloverSupportTest / Hightlighter is implemented

• Substance L&F has hightlighter

• RolloverSupportTest by @aephyr