Responsive UI design for windows desktop application using JAVA

Question

While designing a UI for web applications, we have CSS and html for responsive design interface.

But when designing desktop application, how can I get responsive design interface. I need to fit my application interface in different size of screens eg desktop, laptop, tabs, etc.

How can I do this, using JAVA?

Answer 1

When building your GUI I would suggest using layout managers such as the Border Layout or Box Layout, they help move around your items when the windows is resized. Play around with them to get to know them and find which one is the best for your needs. Also look into the GridBag Layout, it's a more advanced layout manager but very useful when mastered.

As for fitting the app interface in different screen resolutions/sizes you could set a minimum and maximum window size for the app.

Answer 2

If you're willing to use JavaFX , you can design your app using a WebView . That gives you the ability to use CSS to implement responsiveness in your UI. Then, you can add the ResponsiveFX library, which basically mimics a subset of Bootstrap's responsive API.

Paraphrased from the ResponsiveFX link above, you turn on responsive handling with one line in your Java code:

ResponsiveHandler.addResponsiveToWindow(primaryStage);

Then, you add the appropriate hidden-* or visible-* classes to your elements:

TableView table = new TableView(items);
table.getStyleClass().addAll("visible-lg", "visible-md");

ListView list = new ListView(items);
list.getStyleClass().addAll("visible-xs", "visible-sm");

pane.getChildren().addAll(table, list);

Or more efficiently, you define pseudo-classes for the different screen-sizes you want to support, and use those instead of hiding/showing multiple versions of the same element.

Toolbar example from link (CSS):

#toolbar {
    -fx-background-color: deepskyblue;
}

#toolbar:extreme-small-device {
    -fx-padding: 1 1 0 1;
}

#toolbar:small-device {
    -fx-padding: 2 2 1 2;
}

#toolbar:medium-device {
    -fx-padding: 6 6 1 6;
}

#toolbar:large-device {
    -fx-padding: 6 6 1 6;
    -fx-background-image: url(blue-background.png);
}

Toolbar example from site (Java):

Toolbar myToolbar = new Toolbar(...);
myToolbar.setId(toolbar);
pane.getChildren().add(myToolbar);

(Fair warning, I haven't used ResponsiveFX myself, so can't vouch for its effectiveness)