How to create tabs with icons in JavaFX

Question

I want to create tabs panel with icons similar to the Firefox configuration panel with JavaFX:

enter image description here

Is there any example which I can use to see how to implement this?

setGraphic(Node yourNode) of Tab class is a good way to add any node to your tabs. But if you want to make your application looks same as you have shown in image, then try it with ToolBar instead of TabPane (My Suggestion). — Shreyas Dave, Jun 14 '13 at 09:52

score 18 · Answer 1 · answered Jun 10 '13 at 07:42

Tabs, like many other elements in JavaFX, have a method called setGraphic(Node value), in which you can put any JavaFX node. Example:

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class TabPaneTest extends Application {
  public static void main(String[] args) {
    Application.launch(args);
  }
  @Override
  public void start(Stage primaryStage) {
    primaryStage.setTitle("Tabs");
    Group root = new Group();
    Scene scene = new Scene(root, 400, 250, Color.WHITE);
    TabPane tabPane = new TabPane();
    BorderPane borderPane = new BorderPane();
    for (int i = 0; i < 5; i++) {
      Tab tab = new Tab();
      tab.setGraphic(new Circle(0, 0, 10));
      HBox hbox = new HBox();
      hbox.getChildren().add(new Label("Tab" + i));
      hbox.setAlignment(Pos.CENTER);
      tab.setContent(hbox);
      tabPane.getTabs().add(tab);
    }
    // bind to take available space
    borderPane.prefHeightProperty().bind(scene.heightProperty());
    borderPane.prefWidthProperty().bind(scene.widthProperty());

    borderPane.setCenter(tabPane);
    root.getChildren().add(borderPane);
    primaryStage.setScene(scene);
    primaryStage.show();
  }
}

Result:

tabs in a TabPane

score 4 · Answer 2 · answered Feb 19 '14 at 14:27

I know its an old thread, but i didnt find a direct answer anywhere. So i thought of posting it some that it will be helpfull for some searching for it.

This is what i did to get a tab like firefox preferences screen.

Add the image to the tab with setGraphics and add the following code to the application css file. My image size was 48x48. So i went for height as 70.

.tab-label {
    -fx-content-display: top;
}
.tab-pane {
    -fx-tab-min-height: 70;
    -fx-tab-max-height: 70;
}

For reference, here's an example for setting the fxml. http://stackoverflow.com/a/9930822/652696 — dejuknow, Sep 19 '14 at 01:27

RichardK · Answer 3 · 2016-02-16T19:30:34.497

How to add image directly from image url:

          Tab tab = new Tab();
          tab.setGraphic(buildImage("patch/to/image");

    // Helper method to create image from image patch
    private static ImageView buildImage(String imgPatch) {
            Image i = new Image(imgPatch);
            ImageView imageView = new ImageView();
            //You can set width and height
            imageView.setFitHeight(16);
            imageView.setFitWidth(16);
            imageView.setImage(i);
            return imageView;
        }

How to create tabs with icons in JavaFX

3 Answers3

Linked