My Jbuttons randomly grab bits of the frame and added it to the button background when clicked

Question

I am making a little tick tac toe game to get the hang of gui in java.

It was going very well till I ran into the problem I mentioned in the title. My Jbuttons have a transparent background. However, when my mouse entered the button, the button's background became little pieces of the background that last had focus. For Example, if my frame had the focus it would take a little bit of that and set it as the background.

By adding this.setRolloverEnabled(false) to the code it no longer had this weird bug when I hovered over it, but the bug still occurs when I click the button.

When the button is clicked it changes it icon to either an x or an o image but the problem still occurs

Here is my code for my buttons

public class Tile extends JButton implements ActionListener  
{
    private Board myBoard;

    private int ID;
    private int state; //0 = blank, 1 = x, 2 = O

    private Icon x;
    private Icon o;

    private Icon blank;

    public Tile()
    {

        blank = new ImageIcon(getClass().getResource("/Resources/Tiles/blank.png"));

        x = new ImageIcon(getClass().getResource("/Resources/Tiles/x.png"));
        o = new ImageIcon(getClass().getResource("/Resources/Tiles/o.png"));

                state = 0;

        setIcon(blank);
        addActionListener(this);

        this.setBorder(new BorderUIResource.EmptyBorderUIResource(0,0,0,0));
        this.setBorderPainted(false);

        this.setContentAreaFilled(false);
        this.setFocusPainted(false);

        this.setRolloverEnabled(false);

    }

    public Tile(int ID)
    {
        this();
        this.ID = ID;
    }

    public Tile(int ID, Board myBoard)
    {
        this(ID);
        this.myBoard = myBoard;
    }

    public void updateState(EnumTileState newState)
    {
        switch(newState)
        {
            case BLANK :    state = 0;
                            break;

            case X_STATE :  state = 1;
                            break;

            case O_STATE :  state = 2;
                            break;
            default: return;
        }

        update();
    }

    private void update()
    {
        switch(state)
        {
            case 1: this.setIcon(x);
                    break;

            case 2: setIcon(o);
                    break;

            default:    setIcon(blank);
                        break;
        }
    }

    public int getID()
    {
        return ID;
    }

    public int getState()
    {
        return state;
    }


    public void actionPerformed(ActionEvent event)
    {
        Tile clickedTile  = (Tile) event.getSource();   

        if(myBoard !=  null) 
        {
            myBoard.clickReceived(clickedTile.getID());
        }
    }
}

I would attach images but I don't have a high enough reputation so here is a link to an Imgur album

Hope I didn't make any silly mistakes when posting this. Its my first question. Anyway thanks in advance for any help you are able to provide

Answer 1

This has to how the paint engine deals of opaque components. Basically, when dealing with opaque components, the paint engine doesn't prepare the background the component (that is, it won't paint what is actually behind the component). Instead, it leaves it up to the component at hand to "clear" the Graphics context as is needed.

Try making the button transparent by using setOpaque(false)

Updated

The major problem is you're supply alpha based colors (new Color(0, 0, 0, 0)) to opaque components. This means that the paint engine does not consider the components it is painting to be transparent, so it makes no special effort to prepare the Graphics context, but when the component tries to fill it's content (with the background color), it is filling it with a transparent color, which is pretty much the same as not calling super.paintComponent.

Make ALL your JPanel based components transparent except the base panel.