Button with image (styling with FXML/CSS)

Question

I have problem and don't have any idea how to solve it. I have button and I need to add image next to text on right. I did it but after resizing this button, image is always next to text. There is any solution to get text toleft and image to right side of button? (like on screenshot from scenebuilder)

FXML code:

<Button fx:id="btn1" alignment="BASELINE_LEFT" contentDisplay="RIGHT" maxHeight="-Infinity" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="50.0" text="Text">
           <graphic>
              <ImageView fitHeight="24.0" fitWidth="24.0" pickOnBounds="true" preserveRatio="true">
              <image>       
                <Image url="/images/User/user.png" preserveRatio="false" smooth="false" />          
              </image>
              </ImageView>
           </graphic>
</Button>

I can use Graphic text gap, but this is constant. Can i allign image to right side by code? — Thulion
– Thulion, Commented Jan 18, 2016 at 10:47
Did you have a look at the contentDisplay property? It can set where in relation to the text the graphic should be located (left, right, top, bottom) — Itai
– Itai, Commented Jan 18, 2016 at 11:15
Ah, sorry, now I understand better what you mean, and see you already use it! — Itai
– Itai, Commented Jan 18, 2016 at 11:17
Does the button width change dynamically, or is it set? If it's set you can just play around with the Graphic Text Gap until it looks fine. If it changes as the program runs I think you have no choice but to add some code, binding the gap to a value based on the actual width of the button. — Itai
– Itai, Commented Jan 18, 2016 at 11:29

jewelsea · Accepted Answer · 2016-01-18 23:27:16Z

Background

In general, I'd advise, just using the ContentDisplay on buttons and having the button manage the layout of items inside the button on your behalf. But that approach will not work for your particular use-case.

Sample Solution

Put both the text and the image in the graphic inside your own layout manager (for example an HBox). This way you have the flexibility to apply a custom layout to the button, allowing you to situate the text and image exactly as you wish.

In the sample solution I add a Pane between the text and the graphic with a hgrow constraint of always, so that the pane will act as an expandable invisible spacer between the the text and the image, pushing them as far apart from each other horizontally as is possible (within the constraints of the overall button size).

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.text.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="150.0" prefWidth="300.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button contentDisplay="RIGHT" mnemonicParsing="false" prefHeight="98.0" prefWidth="259.0" style="-fx-base: thistle;">
         <graphic>
            <HBox alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mouseTransparent="true">
               <children>
                  <Label text="Nightshade">
                     <font>
                        <Font name="Papyrus" size="24.0" />
                     </font></Label>
                  <Pane HBox.hgrow="ALWAYS" />
                  <ImageView>
                     <image>
                        <Image url="@Potion-icon.png" />
                     </image>
                  </ImageView>
               </children>
            </HBox>
         </graphic>
      </Button>
   </children>
</StackPane>

Yeah - that is what I was looking for :). Thank you very much jewelsea! Now everything adjust automatically.

Collectives™ on Stack Overflow

Button with image (styling with FXML/CSS)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related