Search code examples
radio-buttoncodenameone

Codename one Radio Buttons in a ButtonGroup

@Shai According to the image below got from CleanMordern Project. how can I style my radio buttons using CSS to look exactly as Shai did his, and also make actions on each button to show different container when pressed enter image description here

ButtonGroup barGroup = new ButtonGroup();
    RadioButton all = RadioButton.createToggle("All", barGroup);
    all.setUIID("SelectBar");
    RadioButton featured = RadioButton.createToggle("Featured", barGroup);
    featured.setUIID("SelectBar");
    RadioButton popular = RadioButton.createToggle("Popular", barGroup);
    popular.setUIID("SelectBar");
    RadioButton myFavorite = RadioButton.createToggle("My Favorites", barGroup);
    myFavorite.setUIID("SelectBar");
    Label arrow = new Label(res.getImage("news-tab-down-arrow.png"), "Container");

    add(LayeredLayout.encloseIn(
            GridLayout.encloseIn(4, all, featured, popular, myFavorite),
            FlowLayout.encloseBottom(arrow)
    ));
Solution

  • You can open the theme file in the designer tool and just copy the styling from there. I implemented this using image backgrounds to keep some pixels free for the arrow on the bottom.

    If you look at the theme you will see I just placed a background image that's solid red on top and has a white bottom. Then I have a separate "arrow" image which is animated with the code to the selected button on every click. Everything else is just colors and fonts which is trivial.