CODEWITHSUNDEEP
buttonjavafx-2
Jaynti Kanani
Jaynti Kanani

Reputation: 557

Button style with image

I was wondering How one can achieve following button style where text resides underneath of image in JavaFx?

I tried a lot but all in vain. Any help would be appreciated.

enter image description here

Upvotes: 0

Views: 1990

Answers (2)

agonist_
agonist_

Reputation: 5032

You can simply achieve that just by doing 

    Button b = new Button("text", graphics);
    b.setContentDisplay(ContentDisplay.TOP);

And for cool icons, take a look at http://fxexperience.com/controlsfx/features/ it include icone from FontAwesome and IcoMoon

Upvotes: 2

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40296

The key is the contentDisplay property, set it to "TOP".

With fxml:

<Button contentDisplay="TOP" layoutX="101.0" layoutY="51.0" mnemonicParsing="false" text="Button">
  <graphic>
    <ImageView mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
      <image>
        <Image url="@image.png" preserveRatio="false" smooth="false" />
      </image>
    </ImageView>
  </graphic>
</Button>

Or CSS:

.your-selector {
    -fx-content-display: top;
}

Check the CSS reference here.

Upvotes: 5

Related Questions