Color row in JTree

Question

I'd like to color elements in a JTree. However, simply adding a background color only to the label looks kind of strange. Particularly if more than one node is selected, the resulting shape looks ragged and distracting.

Is there a way to make the background extend the whole width of the tree element, so that the whole row gets colored? Either starting at the left border or starting at the beginning of the label, but definitely extending till the right border of the component?

Here is a small self-contained demo, based on this question.

import java.awt.*;
import javax.swing.*;
import javax.swing.tree.*;
public class SO26724913 {
    public static void main(String[] args) {
        DefaultMutableTreeNode a = new DefaultMutableTreeNode("a");
        DefaultMutableTreeNode b = new DefaultMutableTreeNode("b");
        DefaultMutableTreeNode c = new DefaultMutableTreeNode("c");
        a.add(b);
        a.add(c);
        final JTree tree = new JTree(a);
        tree.setCellRenderer(new DefaultTreeCellRenderer() {
                @Override
                public Component getTreeCellRendererComponent
                    (JTree tree, Object value, boolean selected,
                     boolean expanded, boolean leaf, int row, boolean focus)
                {
                    JComponent c = (JComponent)
                        super.getTreeCellRendererComponent
                        (tree, value, selected, expanded, leaf, row, focus);
                    DefaultMutableTreeNode node = (DefaultMutableTreeNode)value;
                    String data = (String)node.getUserObject();
                    if ("b".equals(data)) {
                        c.setBackground(Color.RED);
                        c.setOpaque(true);
                    }
                    else {
                        c.setBackground(null);
                        c.setOpaque(false);
                    }
                    return c;
                }
            });
        JFrame frm = new JFrame();
        frm.getContentPane().add(tree);
        frm.setSize(200, 200);
        frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frm.setVisible(true);
    }
}

This is what the code currently generates.

I'd prefer either this
or this.

Yoon

What if you call setPreferredSize() for the component returned by super.getTreeCellRendererComponent() to have width big enough to cover whole row? – Incus

@StanislavL: That breaks the automatic size computation in several places. Overriding getPreferredSize instead makes sure the height is computed as usual. Computing the width of the whole tree will become impossible, though. Nevertheless, interesting approach, might be worth an answer so users can vote on this. – Yoon

Definitely overriding getPreferredSize() is better to keep height. It also could be smart approach to increase the width only if it's smaller than JTree width to keep the default JTree width calculation intact. – Incus

@StanislavL: For some reason, tree.getWidth() is zero inside my cell renderer. It seems that the cells are rendered to some buffered image, then the tree size is computed afterwards, and the cells are not rendered again. – Yoon

Answer 1

You might be able to override the paintComponent(Graphics) method of JTree to paint selection rectangles directly:

import java.awt.*;
import java.awt.event.*;
import java.util.Arrays;
import javax.swing.*;
import javax.swing.tree.*;

public class ColorTreeTest {
  private static final Color SELC = Color.RED;
  public JComponent makeUI() {
    FocusListener fl = new FocusListener() {
      @Override public void focusGained(FocusEvent e) {
        e.getComponent().repaint();
      }
      @Override public void focusLost(FocusEvent e) {
        e.getComponent().repaint();
      }
    };
    DefaultTreeCellRenderer r = new DefaultTreeCellRenderer() {
      @Override public Component getTreeCellRendererComponent(
          JTree tree, Object value, boolean selected, boolean expanded,
          boolean leaf, int row, boolean hasFocus) {
        JLabel l = (JLabel) super.getTreeCellRendererComponent(
            tree, value, selected, expanded, leaf, row, false);
        l.setBackground(selected ? Color.RED
                                 : tree.getBackground());
        l.setOpaque(true);
        return l;
      }
    };
    JPanel p = new JPanel(new GridLayout(1, 2));
    for (JTree t : Arrays.asList(new ColorTree1(), new ColorTree2())) {
      t.addFocusListener(fl);
      t.setCellRenderer(r);
      t.setOpaque(false);
      p.add(new JScrollPane(t));
    }
    return p;
  }
  static class ColorTree1 extends JTree {
    @Override public void paintComponent(Graphics g) {
      g.setColor(getBackground());
      g.fillRect(0, 0, getWidth(), getHeight());
      if (getSelectionCount() > 0) {
        g.setColor(SELC);
        for (int i : getSelectionRows()) {
          Rectangle r = getRowBounds(i);
          g.fillRect(r.x, r.y, getWidth() - r.x, r.height);
        }
      }
      super.paintComponent(g);
      if (getLeadSelectionPath() != null) {
        Rectangle r = getRowBounds(getRowForPath(getLeadSelectionPath()));
        g.setColor(hasFocus() ? SELC.darker() : SELC);
        g.drawRect(r.x, r.y, getWidth() - r.x - 1, r.height - 1);
      }
    }
  }
  static class ColorTree2 extends JTree {
    private static final Color SELC = Color.RED;
    @Override public void paintComponent(Graphics g) {
      g.setColor(getBackground());
      g.fillRect(0, 0, getWidth(), getHeight());
      if (getSelectionCount() > 0) {
        g.setColor(SELC);
        //@see http://ateraimemo.com/Swing/TreeRowSelection.html
        for (int i : getSelectionRows()) {
          Rectangle r = getRowBounds(i);
          g.fillRect(0, r.y, getWidth(), r.height);
        }
      }
      super.paintComponent(g);
      if (getLeadSelectionPath() != null) {
        Rectangle r = getRowBounds(getRowForPath(getLeadSelectionPath()));
        g.setColor(hasFocus() ? SELC.darker() : SELC);
        g.drawRect(0, r.y, getWidth() - 1, r.height - 1);
      }
    }
  }
  public static void main(String... args) {
    EventQueue.invokeLater(new Runnable() {
      @Override public void run() {
        createAndShowGUI();
      }
    });
  }
  public static void createAndShowGUI() {
    JFrame f = new JFrame();
    f.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    f.getContentPane().add(new ColorTreeTest().makeUI());
    f.setSize(320, 240);
    f.setLocationRelativeTo(null);
    f.setVisible(true);
  }
}

Jamilajamill

I guess that for the sake of performance I'll try to take the clip bounds of the graphics context into account, but that's just details. Apart from that, this works pretty well for me. Thanks! – Yoon

I have the some problem but with JXtreeTable, it is possibile to apply this solution at my object? – Tonatonal

Some system look and feels (Linux, CentOS 7, Java 1.8) will repaint the entire row's background when super.paintComponent(g); is called, rendering this solution partially useless. You can usually spot such L&F implementations by how they render cell selection by default - if selection highlight rectangle spans the whole row, not just the renderer's cell (third vs. first example in question's images), you may be out of luck. – Sorce