Resizing Icons and displaying them on buttons with Swing

Question

I have a JFrame with a JMenuBar, where I want to show some JToggleButton's with lupe icons instead of text (which will be used for the zoom function). When I try to scale down my lupe images, the resulting icons look horrible. However, if I for example, set my mouse-cursor to the very same image I use to create the Icons for the buttons, it looks much nicer.

Here is a minimal example so you know what I mean: Ui_Frame.java

import javax.imageio.ImageIO;
import javax.swing.*;
import java.awt.*;
import java.io.IOException;
import java.net.MalformedURLException;
import java.net.URL;

public class Ui_Frame {
    private static JFrame f;
    private static JToggleButton toggle_zoomIn;
    private static JToggleButton toggle_zoomOut;
    private static JMenu test_item;

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> {
            try {
                createAndShowGUI();
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }

    private static void createAndShowGUI() throws IOException {
        f = new JFrame();
        JMenuBar menubar = new JMenuBar();

        toggle_zoomIn = new JToggleButton();
        ImageIcon plus_icon = new ImageIcon(new URL("https://i.stack.imgur.com/aB5Pp.png"));
        setup_toggleButton(toggle_zoomIn, "Plus Zoom", plus_icon, 25);
        toggle_zoomOut = new JToggleButton();
        ImageIcon minus_icon = new ImageIcon(new URL("https://i.stack.imgur.com/XqjEP.png"));
        setup_toggleButton(toggle_zoomOut, "Minus Zoom",minus_icon, 25);
        test_item = new JMenu("Test");

        menubar.add(test_item);
        menubar.add(Box.createHorizontalStrut(30));
        menubar.add(toggle_zoomIn);
        menubar.add(Box.createHorizontalStrut(3));
        menubar.add(toggle_zoomOut);

        f.setJMenuBar(menubar);
        f.setExtendedState(JFrame.MAXIMIZED_BOTH);
        f.pack();
        f.setVisible(true);

        //set mouse to the same icon as the button, looks much better however
        menubar.setCursor(Toolkit.getDefaultToolkit().createCustomCursor(
                new ImageIcon(new URL("https://i.stack.imgur.com/aB5Pp.png")).getImage(),
                new Point(0,0),"custom cursor"));

    }

    private static void setup_toggleButton(JToggleButton button, String altText,ImageIcon imageIcon, int size){
        Image image = imageIcon.getImage(); // transform it
        Image newimg = image.getScaledInstance(size , size ,  java.awt.Image.SCALE_SMOOTH); // scale it the smooth way
        imageIcon = new ImageIcon(newimg);  // transform it back
        button.setIcon(imageIcon);
        button.setBackground(Color.LIGHT_GRAY);
        button.setToolTipText(altText);
        button.setOpaque(false);
        button.setBorderPainted(false);
        button.setPreferredSize(new java.awt.Dimension(size, size));
        button.setSelected(false);
    }
}

Notice how the button and the mouse-icon are the same image and are scaled down to a very similar size, yet the mouse icon looks much better.

A similar thing happens when I use for example Gimp to manually scale down the image (so not in the code) : The image looks pretty good when I look at it in the preview in Windows Explorer, however, once I display it on the button it becomes ugly.

What could be the cause of this?

Here are the images I used for the lupe icons:

EDIT:

Here is what the result looks like for me :

1) One way to get image(s) for an example is to hot link to images seen in [this Q&A](http://stackoverflow.com/q/19209650/418556). E.G. The code in [this answer](https://stackoverflow.com/a/10862262/418556) hot links to an image embedded in [this question](https://stackoverflow.com/q/10861852/418556). 2) *"..try to scale down .. images.."* It's usually better to scale them before building the app., rather than at run-time. 3) `image.getScaledInstance(size + 2, size..` that `+ 2` seems an odd and arbitrary thing to add while scaling an image. What is the logic? — Andrew Thompson, Dec 14 '20 at 14:41
@AndrewThompson 1) Thanks for the tip, I've updated the code. 2) As I wrote "A similar thing happens when I use for example Gimp to manually scale down the image (so not in the code) ..... " I have already tried that to no avail. 3) That was confusing and served no purpose, I've removed it thanks for pointing it out. — Christian O., Dec 14 '20 at 15:58
Have you tried a different image resampling algorithm? I think the blurring of the plus and minus is just not desired. And I would expect the blur from the SCALE_SMOOTH. — Marcus Bleil, Dec 14 '20 at 16:43

score 0 · Answer 1 · answered Dec 14 '20 at 15:00

0

On Windows 10, the custom cursor look worse to me. In my experience, a custom Windows cursor is 32x32 and does not support translucent pixels (no alpha channel).

answered Dec 14 '20 at 15:00

Reto Höhener

5,419
4
39
79

Thats surprising, I am on windows 10 too, what JDK version do you use? – Christian O. Dec 14 '20 at 15:39
java 8 [filler characters] – Reto Höhener Dec 14 '20 at 16:48

Resizing Icons and displaying them on buttons with Swing

1 Answers1