Search code examples
imagejavafxtransparencygridpane

Javafx GridPane ColumnConstraints causes clipping where overlap desired

I am making a login screen with a number pad. I have created my own button image for the button backgrounds. This button image has a shadow in it which is really just a semi-transparent dark blur. I have arranged these buttons in a GridPane where I have used ColumnConstraints to pack them in a little tighter than the excess room for the shadow would otherwise default to. I have also used RowConstraints in the same way. The rows seem to fit together as they should, but for the columns, I notice that the shadow on the right side of each button is clipped off giving them one sharp edge.

buttonSize is a variable that is 1/6 of the distance between the shortest dimension of the screen. I did this so the buttons would scale for different screen sizes.

ColumnConstraints col0 = new ColumnConstraints(buttonSize * .95);
ColumnConstraints col1 = new ColumnConstraints(buttonSize * .95);
ColumnConstraints col2 = new ColumnConstraints(buttonSize * .95);
numberPad.getColumnConstraints().addAll(col0, col1, col2);

RowConstraints row0 = new RowConstraints(buttonSize * .95);
RowConstraints row1 = new RowConstraints(buttonSize * .95);
RowConstraints row2 = new RowConstraints(buttonSize * .95);
numberPad.getRowConstraints().addAll(row0, row1, row2);

enter image description here

It may be difficult to see from Stack Overflow's brightly colored page, but the number pad above the gold line uses ColumnConstraints while the number pad below the gold line does not. You can see that the shadow on the right side of the keys exists in the bottom number pad while it is clipped on the top number pad. How can I move the buttons closer together without clipping off their shadows?

If there might be another section of my code which may be of interest, I am able to add anything. I have only kept it short for brevity.

Edit 01:

This is a function I pass a button into to display it with my image.

private void drawButtonImage(Button button){
        FileInputStream button01FileInputStream = null;
        try{
            button01FileInputStream = new FileInputStream("F:\\Programming\\Professional\\Merchant\\Images\\Button01.png");

            Image buttonImage = new Image(button01FileInputStream);
            BackgroundImage backgroundImage = new BackgroundImage(
                    buttonImage,
                    BackgroundRepeat.REPEAT,
                    BackgroundRepeat.NO_REPEAT,
                    BackgroundPosition.DEFAULT,
                    new BackgroundSize(buttonSize, buttonSize, false, false, false, false)
            );

            Background background = new Background(backgroundImage);
            button.setBackground(background);

        } catch (FileNotFoundException | NullPointerException e){
            e.printStackTrace();
        } finally {
            if (button01FileInputStream != null){
                try{
                    button01FileInputStream.close();
                } catch (IOException e){
                    e.printStackTrace();
                }
            }
        }
        button.setTextFill(Color.WHITE);
    }
Solution

  • Inspired by Zephyr's suggestion, I removed the ColumnConstraints and set the hgap to buttonSize * -0.05. The button images now crowd together as I desire while no clipping occurs.