Java JButton styling

Question

Has anyone tried to style JButton to look like NetBeans toolbar buttons? That would be showing just a picture and when you hover over it, a 1px rounded correner gray border shows and a background different on top and on the bottom of the button... Can't seem to be able to style a JButton like that.... any suggestions? Thanks!

enter image description here
Left: normal
Middle: hover
Right: focus

I don't even need that half-half background really, just can't even get borders to paint on hover...

"*any suggestions?"* Post a screen-shot (***cropped*** to just one or two buttons, not the entire size of the editor on your high res. screen). — Andrew Thompson, Feb 15 '12 at 23:49
This is a question for people who develop in netbeans, therefore they can see how toolbar buttons look like in there. I have no screenshot of my button as I can't get anywhere near to the style of these buttons... — Daniel Gruszczyk, Feb 15 '12 at 23:51
If you can bring Netbeans to the screen, get a screen-shot of its buttons! — Andrew Thompson, Feb 15 '12 at 23:54
there you go... don't hurt your self hitting your head on the desk... ;) — Daniel Gruszczyk, Feb 16 '12 at 00:01
Do they also behave that way when focused using the key-board? — Andrew Thompson, Feb 16 '12 at 00:07
updated image, forgot abt focus... Also, I have managed to get it to the 'normal' state, without borders etc, but when I paint the porder and set it on mouseEnter event, the button won't repaint, even if i call repaint() on it... — Daniel Gruszczyk, Feb 16 '12 at 00:12
that nothing about NetBeans, but about JButton, its Icon or UI, finally about used Look and Feel — mKorbel, Feb 16 '12 at 07:48

score 2 · Answer 1 · answered Feb 16 '12 at 10:16

2

JButton.setRolloverEnabled(true);

should do what you want.

If you want a different icon for the "rollover", you can assign that using the setRolloverIcon() and setRolloverSelectedIcon() methods.

answered Feb 16 '12 at 10:16

score 1 · Accepted Answer · edited May 23 '17 at 12:07

How about this implementation? I reference another question and added a small green triangle called netbeans.png where I found from the google. However, there is a small TODO part for you ;-) where to paint the border with a different background once the button get the focus. I hope you like this answer.

import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.Shape;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.geom.Area;
import java.awt.geom.RoundRectangle2D;
import java.net.URL;

import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;

public class StylistButton extends JButton implements MouseListener
{
    boolean mouseIn = false;

    public StylistButton(String s)
    {
        addMouseListener(this);
        setBorderPainted(false);
        setContentAreaFilled(false);        
    }

    protected static ImageIcon createImageIcon(String path)
    {
        URL imgURL = TextSamplerDemo.class.getResource(path);
        if (imgURL != null)
        {
            return new ImageIcon(imgURL);
        }
        else
        {
            System.err.println("Couldn't find file: " + path);
            return null;
        }
    }   


    protected void paintComponent(Graphics g)
    {
        // set button big enough so we can see the rounding curve.
        setSize(60, 40);
        ImageIcon netbeans = createImageIcon("netbeans.png");

        if (netbeans != null)
        {
            setIcon(netbeans);
        }

        setIcon(netbeans);
        Color[] gradients;
        Graphics2D g2 = (Graphics2D) g;
        super.paintComponent(g2);

        if(getModel().isRollover())
        {
            g2.setRenderingHints(new RenderingHints(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON));
            Shape firstClip = g.getClip();
            RoundRectangle2D rect = new RoundRectangle2D.Double();
            double arc = Math.ceil(getSize().getHeight() / 3);
            rect.setRoundRect(0, 0, Math.ceil(getSize().getWidth()), Math.ceil(getSize().getHeight()), arc, arc);
            Area secondClip = new Area(getBounds());
            secondClip.subtract(new Area(rect));
            Area finalClip = new Area(firstClip);
            finalClip.subtract(secondClip);
            g2.setClip(finalClip);
            super.paintComponent(g2);           

            gradients = new Color[] { new Color(184, 207, 229), new Color(122, 138, 153), new Color(184, 207, 229) };

            for(int i = 0; i < gradients.length; i++)
            {
                arc -= 2;
                g2.setColor(gradients[i]);          
                g2.drawRoundRect(i+1, i+1, (int)Math.ceil(getSize().getWidth()-2)-(i*2), (int)Math.ceil(getSize().getHeight()-2)-(i*2), (int)arc, (int)arc);
            }
        }
        else if (getModel().isSelected())
        {
            // TODO, leave a permanent focus mark here.
        }
    }

    public static void main(String[] args)
    {
        JFrame frame = new JFrame();
        frame.getContentPane().setLayout(new FlowLayout());

        StylistButton sButton = new StylistButton("stylistButton");

        frame.getContentPane().add(sButton);

        frame.setSize(250, 250);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }


    @Override
    public void mouseClicked(MouseEvent e)
    {

    }

    @Override
    public void mousePressed(MouseEvent e)
    {

    }

    @Override
    public void mouseReleased(MouseEvent e)
    {

    }

    @Override
    public void mouseEntered(MouseEvent e)
    {

    }

    @Override
    public void mouseExited(MouseEvent e)
    {

    }

}

Java JButton styling

2 Answers2