Search code examples
javajavafximageviewtextfield

Image Buttons that user can only select one of JavaFX

I'm working on a Mood Journal app and at the moment, it asks the user to rate their mood on a scale of 1-5 before saving their entry as shown on the image below.

I want to replace this with 5 small buttons laid out horizontally with respective emoji images as their background. I already have chosen the images I would like to use, and I looked into implementing a normal FX Button or an ImageView, but with those it appears that clicking the button simply does some action; rather, I want the user to only be able to select one at a time (like a Radio Button). How can I accomplish this?

enter image description here

Solution

  • Suggestion 1:

    You can use ControlsFX SegmentedButton(Set as the graphic of the button you preferred emoji):

    enter image description here

    From the doc:

    The SegmentedButton is a simple control that forces together a group of ToggleButton instances such that they appear as one collective button (with sub-buttons), rather than as individual buttons. This is better clarified with a picture:

    There is very little API on this control, you essentially create ToggleButton instances as per usual (and don't bother putting them into a ToggleGroup, as this is done by the SegmentedButton itself), and then you place these buttons inside the buttons list. The long-hand way to code this is as follows:

     ToggleButton b1 = new ToggleButton("day");
 ToggleButton b2 = new ToggleButton("week");
 ToggleButton b3 = new ToggleButton("month");
 ToggleButton b4 = new ToggleButton("year");  

 SegmentedButton segmentedButton = new SegmentedButton();    
 segmentedButton.getButtons().addAll(b1, b2, b3, b4);

    A slightly shorter way of doing this is to pass the ToggleButton instances into the varargs constructor, as such:

    SegmentedButton segmentedButton = new SegmentedButton(b1, b2, b3, b4);

    Suggestion 2:

    You can use ControlsFX Rating :

    enter image description here

    From the docs:

    A control for allowing users to provide a rating. This control supports partial ratings (i.e. not whole numbers and dependent upon where the user clicks in the control) and updating the rating on hover.

    To create a Rating control that looks like this is simple:

    final Rating rating = new Rating();

    This creates a default horizontal rating control. To create a vertical Rating control, simply change the orientation, as such:

    final Rating rating = new Rating();
 rating.setOrientation(Orientation.VERTICAL);

    You can continue reading from the doc...

    Suggestion 3:(No Third Library Needed)

    You can make a custom ToolBar with 5 Button , each one will have a PseudoClass(selected) and every time one of them is pressed the others will have the Pseudoclass(selected=false) , so the user can see which one is selected.

    So you can make something similar to : enter image description here

    Read this article if you want to implement it -> http://fxexperience.com/2012/02/customized-segmented-toolbar-buttons/