Automatically resizing JButton, with aspect ratio

Question

I'd like to have a JButton which just shows an icon (or image, really). I do like to have the normal button borders so that a user does recognize it's a button that he can click. This button should have a fixed height but resize its width according to the aspect ratio of the its icon.

• Assuming the button insets the image to be drawn by 5px from each edge
• Let's say I've set the preferred and maximum height of the button to 50px.
• Any image that I assign to the button should thus be drawn with a height of 40px and a width that is dependent on the aspect ratio of the image.
• For example, if I assign an image of size 200x100 the result should be that the button should have the size 90x50 (image gets drawn as 80x40, plus 5px border).

Is there a custom JButton class available that can do this? If not, how would I go about implementing this?

Edit: BTW, I could just rescale the icon from the outside, but I'd prefer the button to do it.

Edit 2: So to me, the biggest issue is: when and how do I determine and set the required button size? Scaling the image for drawing is not a problem.

Answer 1

Is there a custom JButton class available that can do this?

Not that I know of.

If not, how would I go about implementing this?

I'd approach it by extending ImageIcon to scale the image.

EG

import java.awt.*;
import java.awt.event.*;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.*;

class ScaledImageIcon extends ImageIcon {
    ScaledImageIcon(Image image, int height) {
        super(image.getScaledInstance(-1, height, Image.SCALE_SMOOTH));
    }
}

public class ScalableIcons {

    public static void main(String[] args) throws Exception {
        final Image img1 = ImageIO.read(
                new URL("http://i.stack.imgur.com/gJmeJ.png"));
        final Image img2 = ImageIO.read(
                new URL("http://i.stack.imgur.com/ET1EH.png"));
        Runnable r = new Runnable() {

            @Override
            public void run() {
                JPanel gui = new JPanel(new BorderLayout(5,5));

                final JLabel display = new JLabel();
                display.setPreferredSize(new Dimension(410,200));

                ActionListener al = new ActionListener() {

                    @Override
                    public void actionPerformed(ActionEvent e) {
                        String s = e.getActionCommand();
                        switch (s) {
                            case "1":
                                display.setIcon(new ImageIcon(img1));
                                break;
                            case "2":
                                display.setIcon(new ImageIcon(img2));
                                break;
                        }
                    }
                };

                JPanel imageButtons = new JPanel(
                        new FlowLayout(FlowLayout.CENTER,5,5));

                JButton b1 = new JButton( "1", new ScaledImageIcon(img1,40));
                b1.addActionListener(al);
                imageButtons.add(b1);

                JButton b2 = new JButton( "2", new ScaledImageIcon(img2,40));
                b2.addActionListener(al);
                imageButtons.add(b2);

                gui.add(imageButtons, BorderLayout.NORTH);
                gui.add(display, BorderLayout.CENTER);

                JOptionPane.showMessageDialog(null, gui);
            }
        };
        // Swing GUIs should be created and updated on the EDT
        // http://docs.oracle.com/javase/tutorial/uiswing/concurrency
        SwingUtilities.invokeLater(r);
    }
}

Answer 2

Not sure I totally understand the UI or the requirement but maybe Darryl's Stretch Icon will help you out. It automatically resizes the icon based on the components size and has the option to keep the aspect ratio.