FXML Image Transparency

Question

I am trying to accomplish two goals.

Have the image transparent in regards to the text.

Not have the image squish the text to the right.

  <Button fx:id="btn" layoutX="90.0" layoutY="14.0" mnemonicParsing="false" prefHeight="97.0" prefWidth="320.0" styleClass="root" text="Button">
    <graphic>
        <ImageView fitHeight="87.0" fitWidth="244.0">
            <image>
                <Image url="@image.jpg"/>
            </image>
        </ImageView>
    </graphic>
</Button>

Any help is appreciated greatly.

http://stackoverflow.com/questions/16340269/styling-a-javafx-2-button-using-fxml-only-how-to-add-an-image-to-a-button — David Frick, Nov 30 '16 at 02:35
http://stackoverflow.com/questions/34852751/button-with-image-styling-with-fxml-css — David Frick, Nov 30 '16 at 02:36

score 0 · Answer 1 · answered Nov 30 '16 at 02:26

0

What you could do is make the Stage transparent so that everything on it would be transparent using this method: stage.initStyle(StageStyle.TRANSPARENT) Then you could set the scene to transparent as well scene.setFill(Color.TRANSPARENT). Approve this answer if this solved your issues:)

answered Nov 30 '16 at 02:26

beastlyCoder

2,349
4
25
52

Thanks, but I used Scene Builder, so I am trying to keep the code in FXML. Tried this to no avail. Thanks for the input though. – David Frick Nov 30 '16 at 02:31
So do you just want the image to be a background in your application? – beastlyCoder Nov 30 '16 at 02:33
behind the text, but not necessarily the whole background if that makes sense – David Frick Nov 30 '16 at 03:53
pickOnBounds="true" preserveRatio="true" helps. Are there any FXML atrributes that affect indentation and transparency? – David Frick Nov 30 '16 at 03:57
Not to my knowledge. Your best bet is to just set the background of the GUI to the image, then put text fields and stuff on that image. – beastlyCoder Nov 30 '16 at 04:08

score 0 · Accepted Answer · answered Nov 30 '16 at 08:15

0

Set the contentDisplay property to ContentDisplay.CENTER. This should draw the text on top of the graphic used with the Button:

<Button fx:id="btn" contentDisplay="CENTER" ...>
    ...
</Button>

answered Nov 30 '16 at 08:15

fabian

80,457
12
86
114

This works, but is there anyway to fade out the image using fxml? – David Frick Nov 30 '16 at 09:29
@FamousFrik Fade out like setting the opacity or using a appropriate `ColorAdjust` effect??? – fabian Nov 30 '16 at 09:35
This is a good working point and partial answer. Is there a way to just draw the image to the back, without necessarily making the text move, in this example to the center? So image in back to left, with text in center or right? – David Frick Nov 30 '16 at 09:39

FXML Image Transparency

2 Answers2