Design Button in Java (like in CSS)

Question

For my project, I need to create customizable buttons. Except that I have a problem and I do not know how to solve it. I have a background image for my button and I would like it to be extensible in X and Y according to the text there will be over without loss of quality. Do you have any ideas?

Solution 1

Swing has a pluggable Look&Feel which allows to alter the appearance of its widgets by means of a ComponentUI (in this case: a ButtonUI).

Example for your buttons:

class StyledButtonUI extends BasicButtonUI {

    @Override
    public void installUI (JComponent c) {
        super.installUI(c);
        AbstractButton button = (AbstractButton) c;
        button.setOpaque(false);
        button.setBorder(new EmptyBorder(5, 15, 5, 15));
    }

    @Override
    public void paint (Graphics g, JComponent c) {
        AbstractButton b = (AbstractButton) c;
        paintBackground(g, b, b.getModel().isPressed() ? 2 : 0);
        super.paint(g, c);
    }

    private void paintBackground (Graphics g, JComponent c, int yOffset) {
        Dimension size = c.getSize();
        Graphics2D g2 = (Graphics2D) g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        g.setColor(c.getBackground().darker());
        g.fillRoundRect(0, yOffset, size.width, size.height - yOffset, 10, 10);
        g.setColor(c.getBackground());
        g.fillRoundRect(0, yOffset, size.width, size.height + yOffset - 5, 10, 10);
    }
}

Main method for testing:

public static void main (String[] args) {
    JFrame f = new JFrame("Button UI Test");
    f.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
    JPanel p = new JPanel();
    p.setBackground(Color.white);
    f.setContentPane(p);
    p.setLayout(new FlowLayout(5, 5));
    p.setBorder(new EmptyBorder(10, 10, 10, 10));

    for (int i = 1; i <= 5; i++) {
        final JButton button = new JButton("Button #" + i);
        button.setFont(new Font("Calibri", Font.PLAIN, 14));
        button.setBackground(new Color(0x2dce98));
        button.setForeground(Color.white);
        // customize the button with your own look
        button.setUI(new StyledButtonUI());
        p.add(button);
    }

    f.pack();
    f.setLocation(500, 500);
    f.setVisible(true);
}

Solution 2

You can scale the image and create an ImageIcon. Something like this:

ImageIcon icon = new ImageIcon("img.png");
Image scaledImg = icon.getImage().getScaledInstance(newWidth, newHeight,  java.awt.Image.SCALE_SMOOTH);  
icon = new ImageIcon(scaledImg);
JButton button = new JButton(icon);
button.setHorizontalTextPosition(JButton.CENTER);
button.setVerticalTextPosition(JButton.CENTER);