Button Group

[ebourg]

Several UI toolkits have a concept of button groups, where adjacent buttons share their borders, for example:

• https://vuetifyjs.com/en/components/button-groups/
• https://material.angular.io/components/button-toggle/overview

It looks like this:

It would be great to have something similar in FlatLaf. I'm not sure how this could be implemented though. Maybe supporting rounded corners only on the left or on the right would be a first step, and then the layout could be configured such that the inner borders are superposed.

[gk-brown]

Would something like this (using JToggleButton and ButtonGroup) work?

Source code is available here. This example uses a lightweight library I wrote to simplify layout, but that's not strictly necessary. The icons are instances of FlatLaf's FlatSVGIcon class, and the border is an instance of FlatLineBorder. The buttons are styled using the "toolBarButton" client property.

[gk-brown]

It seems that FlatLaf actually supports this natively, at least for toolbars. The following code produces an effect similar to what you describe above:

var toggleButton1 = new JToggleButton("foo");
var toggleButton2 = new JToggleButton("bar");

var buttonGroup = new ButtonGroup();

toolBar.add(toggleButton1);
toolBar.add(toggleButton2);

buttonGroup.add(toggleButton1);
buttonGroup.add(toggleButton2);