issue on setting shadow in the container using nine piece border wizard

1
votes

I need to create a shadow effect at the bottom of each containers whose parent container is set to boxlayout Y. I tried 9 piece image border for that but it is not working perfectly. I have some issues here. I have added the empty label in the end of each container and set uiid named shadow where i use 9 piece image border from theme. But the problem is that i need single shadow or border. There seems to appear multiple lines of shadow.if i set preferred height in the shadow label, i cannot determine the exact height where single border will appear.(eg. shadow.setPreferredH(20);). I havent used 9 piece border in image before and didnot find anything that solves my problem in the discussion forum. PS i have watched the tutorial in it. How can i solve it?

code:

Container wrapContainerSingleTable = new Container(new BoxLayout(BoxLayout.Y_AXIS));
for (Map<String, Object> element : connectionGroup.responses) {
    singleRowContainerr = new Container(new BoxLayout(BoxLayout.Y_AXIS));
    Container childContainer = new Container(new BorderLayout());
    singleRowContainerr.add(childContainer);
    _ _ _ _ _ _ _ _ _ 
    _ _ _ _ __ _ _ _
    childContainer.setUIID("ButtonTest");
    childContainer.getAllStyles().setMargin(Component.BOTTOM, 0);
    childContainer.getAllStyles().setBgColor(0xf4f4f4);

    Label shadow = new Label(" ");
    singleRowContainerr.add(shadow);
    shadow.setUIID("shadow");
    shadow.getAllStyles().setPadding(0, 0, 0, 0);
    shadow.getAllStyles().setMargin(0, 0, 0, 0);
    shadow.getAllStyles().setBgTransparency(0);
    //if i set preferred height in the shadow label, i cannot determine the exact height where single border will appear. 
    //shadow.setPreferredH(20);
    wrapContainerSingleTable.add(singleRowContainerr);
}

shadow img

enter image description here

the look i want to achieve (only the bottom horizontal shadow of each row) enter image description here

9 piece border screenshots

i tried border type as line instead of round as well, but the same outcome enter image description here

enter image description here

enter image description here

2
codenameone

2 Answers

0
votes

Your approach for shadow seems flawed as the image indicates a shadow on the right side as well so a label below to indicate a shadow is probably not the right approach.

I would also not take that direction as it mixes concerns. The design of the button should match the button and it's look seems to fit perfectly to the 9-piece border structure. If you add the right amount of padding it should be perfect.

If you insist on doing it in this way (with the labels) you should not use a 9 piece border as it doesn't make sense for your case. You should tile the shadow on the top of the label.

0
votes

I have used this approach successfully for setting shadows on containers and buttons. rounded-corners-shadows-and-gradients-with-css

I essentially copied the Outer Shadow CSS in the page into the CN1 Settings Page > CSS option. Once loaded i then used CssMatic to get the shadow/spread etc just right, and then referenced the names in the CSS file as UIIDs against my objects. It's nice that you can adjust the CSS and the simulator changes immediately without a reload.

I ended up with this CSS and the output below:

BottomShadow {
box-shadow: 2pt 22pt 22pt 0px rgba(61,59,61,0.48);
padding-bottom: 2mm;
padding-top: 1mm;

}

BottomRightShadowForButton {
box-shadow: 20px 20px 35px -5px rgba(204,202,204,1);

border: 1pt solid #ccc;
padding-bottom: 2mm;
padding-left: 1mm;
padding-right: 2mm;
padding-top: 2mm;

}

BottomRightShadow {
box-shadow: 20px 20px 35px -5px rgba(204,202,204,1);

padding-bottom: 1.5mm;
padding-left: 0mm;
padding-right: 1.5mm;
padding-top: 1mm;

}

enter image description here