Add space between label and jButton on a tabbed pane header

Question

as you can see in the image above, I've a tabbed pane. On the tab header I've a JLabel (Tab Test) and a JButton (X). They are placed next to each other but I want them to have a small gap to look natural.

I've tried with a Box but it has the same background has the text making it not look natural as well. The Box has no setBorders method.

Here's how it look like with a Box:

Here's my code:

        System.out.println("NewTableEvent!!!!");
        final String tittle = table.getTabName();

        JButton jButtonClose = new JButton("X");
        jButtonClose.setBorderPainted(false);
        jButtonClose.setBorder(null);

        JPanel tabComponent = new JPanel(new BorderLayout());
        tabComponent.add(new JLabel(tittle), BorderLayout.WEST);
        tabComponent.setToolTipText("Close this tab.");
        Component box = Box.createRigidArea(new Dimension(25,0));
        tabComponent.add(box, BorderLayout.CENTER);
        tabComponent.add(jButtonClose, BorderLayout.EAST);


//        rightTabbedPane.addTab(null, table.getTable());
        rightTabbedPane.addTab(null, new JPanel());

        // Get total tabs
        final int totalTabs = rightTabbedPane.getComponentCount();
        System.out.println("Total tabs: " + totalTabs);

        // Set the custom tab component
        rightTabbedPane.setTabComponentAt(0, tabComponent);

So, how can I make space the JLabel and JButton and keep the background from that distance neutral?

Answer 1

Thanks to @Gavin Markee, I came up with this solution:

First, create this new class (It's the exact same class given in the example from Gavin MArkee's link, I'm just posting it here in case it is romoved in the future):

public class ButtonTabComponent extends JPanel {

    private final JTabbedPane pane;

    public ButtonTabComponent(final JTabbedPane pane) {

        // Unset default FlowLayout' gaps
        super(new FlowLayout(FlowLayout.LEFT, 0, 0));
        if (pane == null) {
            throw new NullPointerException("TabbedPane is null");
        }
        this.pane = pane;
        setOpaque(false);

        //make JLabel read titles from JTabbedPane
        JLabel label = new JLabel() {
            @Override
            public String getText() {
                int i = pane.indexOfTabComponent(ButtonTabComponent.this);
                if (i != -1) {
                    return pane.getTitleAt(i);
                }
                return null;
            }
        };

        add(label);
        //add more space between the label and the button
        label.setBorder(BorderFactory.createEmptyBorder(0, 0, 0, 5));
        //tab button
        JButton button = new TabButton();
        add(button);
        //add more space to the top of the component
        setBorder(BorderFactory.createEmptyBorder(2, 0, 0, 0));
    }

    private class TabButton extends JButton implements ActionListener {
        public TabButton() {
            int size = 17;
            setPreferredSize(new Dimension(size, size));
            setToolTipText("close this tab");
            //Make the button looks the same for all Laf's
            setUI(new BasicButtonUI());
            //Make it transparent
            setContentAreaFilled(false);
            //No need to be focusable
            setFocusable(false);
            setBorder(BorderFactory.createEtchedBorder());
            setBorderPainted(false);
            //Making nice rollover effect
            //we use the same listener for all buttons
            addMouseListener(buttonMouseListener);
            setRolloverEnabled(true);
            //Close the proper tab by clicking the button
            addActionListener(this);
        }

        @Override
        public void actionPerformed(ActionEvent e) {
            int i = pane.indexOfTabComponent(ButtonTabComponent.this);
            if (i != -1) {
                pane.remove(i);
            }
        }

        //we don't want to update UI for this button
        @Override
        public void updateUI() {
        }

        //paint the cross
        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            Graphics2D g2 = (Graphics2D) g.create();
            //shift the image for pressed buttons
            if (getModel().isPressed()) {
                g2.translate(1, 1);
            }
            g2.setStroke(new BasicStroke(2));
            g2.setColor(Color.BLACK);
            if (getModel().isRollover()) {
                g2.setColor(Color.MAGENTA);
            }
            int delta = 6;
            g2.drawLine(delta, delta, getWidth() - delta - 1, getHeight() - delta - 1);
            g2.drawLine(getWidth() - delta - 1, delta, delta, getHeight() - delta - 1);
            g2.dispose();
        }
    }

    private final static MouseListener buttonMouseListener = new MouseAdapter() {
        @Override
        public void mouseEntered(MouseEvent e) {
            Component component = e.getComponent();
            if (component instanceof AbstractButton) {
                AbstractButton button = (AbstractButton) component;
                button.setBorderPainted(true);
            }
        }

        @Override
        public void mouseExited(MouseEvent e) {
            Component component = e.getComponent();
            if (component instanceof AbstractButton) {
                AbstractButton button = (AbstractButton) component;
                button.setBorderPainted(false);
            }
        }
    };
}

And then when you create your tabe you just have to:

tabbedPane.addTab(myTabTitle, myTable);

tabbedPane.setTabComponentAt(tabIndex, new ButtonTabComponent(tabbedPane));

Answer 2

I wasn't able to test it, but I believe you would just have to tell the box to not be opaque before you add it to the tabComponent:

box.setOpaque(false);

Hopefully, that should work for you.

EDIT

You may be able to set borders around the label and button to accomplish this:

JLabel label = new JLabel(tittle);
tabComponent.add(label);
//add more space between the label and the button
label.setBorder(BorderFactory.createEmptyBorder(0, 0, 0, 5));
tabComponent.add(jButtonClose);

Demo at: http://docs.oracle.com/javase/tutorial/uiswing/components/tabbedpane.html