Codename One: ComponentGroupBool on Android by CSS

Note for the readers: this question is specific for Codename One only.

The following code works perfectly on iOS:

ComponentGroup cmpGroup = ComponentGroup.enclose(camera, gallery);
cmpGroup.getComponentAt(0).getAllStyles().setAlignment(Component.LEFT);
cmpGroup.getComponentAt(1).getAllStyles().setAlignment(Component.LEFT);


with this CSS:

#Constants
ComponentGroupBool: true;
includeNativeBool: true;
[...]



The problem is that there is no effect on Android.
So, I understood that the CompontGroup UIIDs are implemented in the iOS native theme, but they are not in the Android native theme.

CompontGroup

My question is how to make the CompontGroup working in the same way on iOS and Android, using CSS.

CompontGroup

2 Answers
2

You need to add styles for GroupElementFirst, GroupElementLast, GroupElement, GroupElementOnly, ButtonGroupFirst, ButtonGroupLast, ButtonGroup, ButtonGroupOnly.

GroupElementFirst

GroupElementLast

GroupElement

GroupElementOnly

ButtonGroupFirst

ButtonGroupLast

ButtonGroup

ButtonGroupOnly

Styling ButtonGroup* would let you avoid the alignment left styling you have in your code.

We designed the round rect borders top/bottom only modes exactly for this purpose but I'm not sure if they are implemented in CSS. I'll have to check on that.

RoundRectBorder

A possible (not pixel-perfect) solution based on the Shai's answer, that produces an acceptable result like this:

It's not pixel-perfect because between the GroupElementFirst and the GroupElementLast there is a small space.

GroupElementFirst

GroupElementLast

/* Start of ComponentGroup CSS */

GroupElementFirst
border-width: 0.3mm;
border-color: gray;
border-style: solid;
border-top-right-radius: 3mm;
border-top-left-radius: 3mm;
margin: 2mm;
margin-bottom: 0px;
padding: 2mm;


GroupElementLast
border-width: 0.3mm;
border-color: gray;
border-style: solid;
border-bottom-right-radius: 3mm;
border-bottom-left-radius: 3mm;
margin: 2mm;
margin-top: 0px;
padding: 2mm;


GroupElement
border-width: 0.3mm;
border-color: gray;
border-style: solid;
margin: 2mm;
margin-top: 0px;
margin-bottom: 0px;
padding: 2mm;


GroupElementOnly
border-width: 0.3mm;
border-color: gray;
border-style: solid;
border-radius: 3mm;
margin: 2mm;
padding: 2mm;


ButtonGroupFirst
cn1-derive: GroupElementFirst;


ButtonGroupLast
cn1-derive: GroupElementLast;


ButtonGroup
cn1-derive: GroupElement;


ButtonGroupOnly
cn1-derive: GroupElementOnly;


/* End of ComponentGroup */


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.