Customs Toggle buttons

First I will talk about why I ended up creating this customs jtoggle button.

I was asked, what would be the best way to show a choice among 2 available options (option A or option B).

Usually when you want the user to select one option among a few (let’s say less than 5) you can use some JRadioButton/JCheckBox/JToggleButton.
JCombobox/JList are usually used if you have more possible options, doesn’t really make sense (at least for me) to have a JComboBox/JList with only 2 or 3 available options

I had to show the icon corresponding to each of the 2 options.
I could have used JRadioButton + a JLabel (to show the icon) or a JToggleButton.
The image being quiet big (> 100*100 pixels), using a JToggleButton is just wrong and plain ugly for this kind of icon.
So my only option left was to use a JRadioButton with a JLabel to show the icon.

After some tests, I wasn’t really satisfied about how it looked.
I really don’t like the look of the selected/unselected icon sticked to the icon representing the option.

So I though why not use directly the image as component with some kind of visual feedback apply to the image (and not outside like for the JRadioButton)

The visual feedbacks I considered for this are the following:
-translucent if not selected
-smaller image if not selected
-a selection ring
And of course it should have animated transition between selected/unselected state switch


You can find the implementation at: ShrinkingToggleImageButton

Some time later, I needed to have a panel to select among 3 options, but this time there was no icon. So I should have just used 3 JRadioButton and be done with it. But considering the application is running on a device with touch-screen and that selecting an option trigger a big change in the screen, it made more sense to have JToggleButton used there.

As having 3 JToggleButton side by side doesn’t look that great, I decided to see If I could get something that make sense with a better look.


I rapidly decided to try using ShrinkingToggleImageButton, after playing a bit to create the image, I came up with the following result.

I was happy about the result, it looks way better on the screen it’s used on, than some JRadioButton/JToggleButton.





Some time later, I needed a way to select options among 3 again, but this time it had an icon + some text, as I had the same constraints (touch-screen – big buttons needed), I started to play again with ShrinkingToggleImageButton.

This time I created a class to hold this component, instead of just giving the right image to the shrinkingToggleImageButton: ShrinkingToggleImageAndTextButton

Also it can deal with multiple line text, use \n to wrap to the next line