CODEWITHSUNDEEP
codenameone
Francesco Galgani
Francesco Galgani

Reputation: 6249

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.

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

Upvotes: 2

Views: 63

Answers (2)

Francesco Galgani
Francesco Galgani

Reputation: 6249

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

enter image description here

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

/* 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 */

Upvotes: 1

Shai Almog
Shai Almog

Reputation: 52770

You need to add styles for 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.

Upvotes: 1

Related Questions