cocobeans
cocobeans

Reputation: 101

not enough space between Pane at setBottom and swipe indicator on iPhone

As I am testing my Gluon Mobile app on my phone, I noticed that the HBox at the bottom of my view, which acts as a bottom navigation bar (I can't use the BottomNavigation object because I'm switching between methods within the view, not between views themselves) is too close to the bottom of my iPhone and the swipe indicator. I want it to look more like the attached photo so that users can see the icons. I've been looking at the Gluon docs for setBottom as well as trying to debug myself, but I can't seem to find a way to add some padding at the bottom.

public HBox bottomNav(Sessions sessions, Session session, String uid, String pass) {
        HBox tabBar = new HBox();
        tabBar.setAlignment(Pos.CENTER);
        tabBar.setSpacing(40);
        tabBar.setPrefHeight(50);
        Button home = new Button();
//        HBox.setMargin(home, new Insets(0, 0, 10, 0));
        home.setStyle("-fx-background-radius: 50; -fx-background-color: rgb(0, 0, 0, 0);");
        Icon homeicon = new Icon(MaterialDesignIcon.HOME);
        home.setGraphic(homeicon);
        home.setOnAction(e -> {
            homeScreen(sessions, session, uid, pass);
        });
        Button newSession = new Button();
//        HBox.setMargin(newSession, new Insets(0, 0, 10, 0));
        newSession.setId("newSession");
        //newSession.setStyle("-fx-background-radius: 50;");
        newSession.setPrefSize(50, 50);
        Pane pane = new Pane(newSession);
        // or ADD_CIRCLE
        Icon sessionicon = new Icon(MaterialDesignIcon.ADD_CIRCLE_OUTLINE);
        newSession.setGraphic(sessionicon);
        newSession.setOnAction(e -> {
            sessionicon.setStyle("-fx-background-color: rgb(253, 181, 21);");
            startSession(sessions, session, uid, pass);
        });
        Button settings = new Button();
//        HBox.setMargin(settings, new Insets(0, 0, 10, 0));
        settings.setStyle("-fx-background-radius: 50; -fx-background-color: rgb(0, 0, 0, 0);");
        Icon settingsicon = new Icon(MaterialDesignIcon.SETTINGS);
        settings.setGraphic(settingsicon);
        settings.setOnAction(e -> {
            getApplication().getDrawer().open();
        });
        tabBar.getChildren().addAll(home, pane, settings);
        tabBar.setStyle("-fx-background-color: rgb(253, 181, 21, 0.5);");
        return tabBar;
    }

Picture of ideal Tab Bar in Photos app on iPhone

Picture of the Tab Bar in my app

Upvotes: 1

Views: 35

Answers (0)

Related Questions