javaswinguser-interfaceawt

How do I resize a JButton to fit an icon?

I was trying to make the UI of my college website and I am running into an issue, the buttons have a weird border around them

This is what it looks like now:

https://i.sstatic.net/Q1neJ.png

This is what it should look like:

https://i.sstatic.net/Ir0De.png

public static void middleBar(JFrame frame){
        JPanel middle = new JPanel();
        middle.setLayout(new GridLayout(4,6,20,20));
        String[] items = {"UniversityERP","Award","Blackboard","CCT","CertificateIssuance","CourseEvaluationSurvey","DoctoralPortal",
        "Fastrack","HostelManagement","IDCardManagement","MobileAppCMS","OnCampusJob","StudentOutboundMobility","StudentAttendanceRecording","StudentAttendanceManagement",
        "StudentClearance","StudentPaymentCenter"};
        for(String item:items){
            ImageIcon icon = new ImageIcon("Images/"+item+".png");
            JButton button = new JButton(icon);
            Dimension d = new Dimension(icon.getIconWidth(),icon.getIconHeight());
            button.setPreferredSize(d);
            middle.add(button);
        }
        JPanel middleBar = new JPanel(new BorderLayout());
        middleBar.add(middle,BorderLayout.NORTH);
        frame.add(middleBar,BorderLayout.CENTER);
    }

How do I remove it?

I tried using the setPreferedSize method but that didn't work

Solution

  • As mentioned by gthanop, use should set the margin to zeros.

    But just fyi what is a margin? A margin can be understood easily, but it is the gap between the content (of anything) from the border. You can set a margin using button.setMargin(new Insets(top, left, bottom, right)) it takes in Insets which defines this offset. Here's how its given in the docs

    java.awt.Insets.Insets(int top, int left, int bottom, int right)


Creates and initializes a new Insets object with the specified top, left, bottom, and right insets.
Parameters:
top - the inset from the top.
left - the inset from the left.
bottom - the inset from the bottom.
right - the inset from the right.

    Let's see it in an example

    cool lil button

    I have my cool little button here. I have not modified the margins just yet.

    cool lil button num 2

    Here I have modified the margin insets to be top = 1, bottom = 10, right = 10 and left = 10.

    cool lil buttons lil bro

    And here's what it looks like with all insets zero, it's more obvious when you use an image like

    surprised bro

    However this does not fully remove the border and leaves a lil' line on the outside, this is the border of the button, what we had removed with button.setMargin(...); was the gap and not the border. Since we don't need it we can go ahead and remove it.

    button.setBorder(null);

    or use the alternative

    Border emptyBorder = BorderFactory.createEmptyBorder();
button.setBorder(emptyBorder);

    cool shi6

    And it should end up like this.

    This is going to remove the border and make the image cover the whole button and the button will work perfectly fine.

    However, I would recommend you to create a custom button or at least button UI, it would be more easier and reliable to create new buttons compared to pasting a screenshot of the button especially animating the button and all would take more effort. But if it works you leave it as it is (trust me i know from my past experiences ;)) nothings gonna go wrong