Rendering an icon inside

Question

I am writing a Java GUI library for practice, and I want to make a password field with a button to toggle that input being visible/invisible. The functionality is all there, but visually there are some problems.

I have a 512x512 icon (biggest size I could find) kept within a res/ folder on the same directory level as the src/ folder. (I am using IntelliJ as my IDE). The times I have gotten the icon to show up, it is FAR larger than the JTextField, and messes with the sizes of all other components on the view.

My question is how do I go about getting the icon to render at the correct size, despite the icon file being somewhat high-res.

package com.carvethsolutions.guilib.fields;

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class ToggleHiddenTextField extends JPanel {

private JButton toggle;

private HiddenTextField htf;

private boolean hidden;

public ToggleHiddenTextField() {
    htf = new HiddenTextField();
    htf.setBorder(null);
    hidden = true;

    toggle = new JButton(new ImageIcon("./visibility-button.png"));
    toggle.addActionListener(new ActionListener() {
        @Override
        public void actionPerformed(ActionEvent e) {
            if (hidden) {
                htf.showInput();
            } else {
                htf.hideInput();
            }
            hidden = !hidden;
        }
    });

    this.setLayout(new GridLayout(1,2));
    this.add(htf);
    this.add(toggle);
    this.setBorder(BorderFactory.createLoweredBevelBorder());
}

}

This is what it currently looks like. How can I ensure the icon appears, and at the correct size?

UPDATE: This code get's a workable result. I can tweak the layout from here to get it perfect. Thank you everyone!

package com.carvethsolutions.guilib.fields;

import javax.imageio.ImageIO;
import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.image.BufferedImage;
import java.io.IOException;

public class ToggleHiddenTextField extends JPanel {

private JButton toggle;

private HiddenTextField htf;

private boolean hidden;

public ToggleHiddenTextField() {
    htf = new HiddenTextField();
    htf.setBorder(null);
    hidden = true;

    try {
        Image image = ImageIO.read(getClass().getResource("/visibility-button.png"));
        image = image.getScaledInstance(htf.getPreferredSize().height, htf.getPreferredSize().height, Image.SCALE_AREA_AVERAGING);
        toggle = new JButton(new ImageIcon(image));
        toggle.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                if (hidden) {
                    htf.showInput();
                } else {
                    htf.hideInput();
                }
                hidden = !hidden;
            }
        });
    } catch (IOException e) {
        System.out.println("IOException : ");
        e.printStackTrace();
    }

    this.setLayout(new GridLayout(1,2));
    this.add(htf);
    this.add(toggle);
    this.setBorder(BorderFactory.createLoweredBevelBorder());
}

}

Answer 1

1. Use ImageIO to read the file as a BufferedImage.
2. Then you can scale the image to whatever size you want. This can be done by using the getScaledInstance() method of the BufferedImage. Or you can create a second BufferedImage at the size you want and then draw the first image to the scaled image.
3. Create the Icon using the scaled image.