Trying to use BottomNavigation but it's position does not account for the AppBar height, so it's not visible

Question

I've added a BottomNavigation with a couple of Buttons to my view. However, when I run my application, only the very top part of the navigation bar shows. When I make my window longer I can see the whole bar. When I set the AppBar visibility to 'false', then the navigation bar shows up nicely. How do I have the BottomNavigation show up properly? Am I adding the BottomNavigation object to the right view?

This is most of my class:

    public void initialize() {
        primary.showingProperty().addListener((obs, oldValue, newValue) -> {
            if (newValue) {
                AppBar appBar = getApp().getAppBar();
                appBar.setNavIcon(MaterialDesignIcon.MENU.button(e ->
                        getApp().getDrawer().open()));
                appBar.setTitleText("Gluon App");
            }
        });

        primary.setBottom(createBottomNaviagtion());
    }

    public BottomNavigation createBottomNaviagtion(){
        BottomNavigation bottomNavigation = new BottomNavigation();
        //.. creating BottomNavigationButtons

        bottomNavigation.getActionItems().addAll(/*Buttons here*/);
        return bottomNavigation;
    }

---

I realized that the GlassPane contains a AppBar and a View, and like I've been adding the BottomNavigation to the View, I could also add an AppBar to the View. When making the AppBar of the GlassPane invisible, this results in what I wanted: both the AppBar and the BottomNavigation are showing up nicely. I still wonder if this is the correct approach though, any feedback would be appreciated!

Answer 1

The app seems to come with the AppBar by default. Even though I didn't add it with SceneBuilder into my FXML file, it's available. To see in SceneBuilder the real layout of all the widgets as it will be shown at runtime, I explicitly added an AppBar in SceneBuilder. But then, when I run the app, I get two AppBars; one on top of the other.

My fix was to hide the default one and show the one I can see take up space in the SceneBuilder's visual UI.

@FXML private View view;

@FXML private AppBar appBar; //named in the associated FXML

public void initialize() {

    view.getApplication().getAppBar().setVisible(false);
    appBar.setNavIcon(MaterialDesignIcon.MENU.button(e -> getApp().getDrawer().open()));
}

Now, when I add a BottomNavigation control and other widgets, they all display to me at runtime just like how SceneBuilder showed it to me during the UI's design.