CODEWITHSUNDEEP
codenameone
Amrita Stha
Amrita Stha

Reputation: 3327

LayerLayout in cn1

I need to keep an image on top of component with background color so that half of the component is covered with image. Hence I used layerlayout but Its not working. Plz hav a look at the codes and images below.

Code:

super(new BoxLayout(BoxLayout.Y_AXIS));
Container servicestatContainer = BoxLayout.encloseY();
servicestatContainer.getAllStyles().setBgColor(0x01579b);
servicestatContainer.getAllStyles().setBgTransparency(255);
servicestatContainer.getAllStyles().setPadding(5, 5, 5, 5);
servicestatContainer.getAllStyles().setMarginTop(0);
servicestatContainer.getAllStyles().setMarginBottom(0);

Label imageLabel = new Label(res.getImage("home_car.png").scaledWidth(Display.getInstance().getDisplayWidth()-50),"Button");
add(LayeredLayout.encloseIn(
        servicestatContainer,
        BorderLayout.south(FlowLayout.encloseCenterBottom(imageLabel))
));
//this doesn't work
servicestatContainer.setHeight(imageLabel.getPreferredH()/2);
System.out.println("carHeight " + imageLabel.getPreferredH()/2);

What I'm trying to do:

enter image description here

What it seems now from the code above

enter image description here

Upvotes: 0

Views: 56

Answers (2)

Shai Almog
Shai Almog

Reputation: 52760

This should work:

Container servicestatContainer = BoxLayout.encloseY();
Style s = servicestatContainer.getAllStyles();
s.setBgColor(0x01579b);
s.setBgTransparency(255);
s.setPadding(5, 5, 5, 5);
s.setMarginUnit(Style.UNIT_TYPE_DIP);
s.setMarginTop(0);
s.setMarginBottom(12);

This assumes the background of the parent is white.

The reason this didn't work for you previously is that you placed the blue container below the image and they both have the same size due to layered layout.

Upvotes: 0

Carlos Verdier
Carlos Verdier

Reputation: 245

This is the closets I've been able to do:

    super(new BoxLayout(BoxLayout.Y_AXIS));
    Label imageLabel = new Label(res.getImage("home_car.png").scaledWidth(Display.getInstance().getDisplayWidth()-50),"Button");
    Image background = Image.createImage(Display.getInstance().getDisplayWidth(), imageLabel.getPreferredH(), 0xff01579b);
    Container servicestatContainer = BoxLayout.encloseY();
    servicestatContainer.getAllStyles().setPadding(5, 5, 5, 5);
    servicestatContainer.getAllStyles().setMarginTop(0);
    servicestatContainer.getAllStyles().setMarginBottom(0);
    servicestatContainer.add(new Label(background));        
    LayeredLayout ll = new LayeredLayout();        
    Container contLayered = new Container(ll);
    contLayered.addAll(servicestatContainer, imageLabel);
    ll.setInsetTop(imageLabel, imageLabel.getPreferredH() / 2 + "px");
    ll.setReferenceComponentTop(imageLabel, servicestatContainer);
    add(contLayered);

The key is playing with LayeredLayout insets. Hope it's useful.

Upvotes: 2

Related Questions