Codename one Layout issue

Question

I want to display images in the following manner

But its display like this

How can I achieve output like the main image... And also how can I make image responsive?

Below is my code:

public void Fair(){
        Form hi = new Form(new BoxLayout(BoxLayout.Y_AXIS));
        hi.setTitle("Fair");

       hi.getToolbar().addCommandToLeftBar("", theme.getImage("BlackBack.png"), (evt) -> {
       });

        hi.getToolbar().addCommandToRightBar("", theme.getImage("BlackMenu.png"), (evt) -> {
        });

        Image men = theme.getImage("men.png");
        Button menButton = new Button(men);

        Image women = theme.getImage("women.png");
        Button womenButton = new Button(women);

        Container container1 = BoxLayout.encloseX(menButton,womenButton);



        hi.add(container1);
        hi.show();

    }

Answer 1

Change your code to below, the BoxLayout-X doesn't fill the screen width but could keep growing. So, change it to GridLayout with 2 columns.

public void Fair() {
    Form hi = new Form(new BoxLayout(BoxLayout.Y_AXIS));
    hi.setTitle("Fair");

    hi.getToolbar().addCommandToLeftBar("", theme.getImage("BlackBack.png"), (evt) -> {
    });

    hi.getToolbar().addCommandToRightBar("", theme.getImage("BlackMenu.png"), (evt) -> {
    });

    Image men = theme.getImage("men.png").scaledWidth(Display.getInstance().getDisplayWidth() / 2);
    Button menButton = new Button(men);

    Image women = theme.getImage("women.png").scaledWidth(Display.getInstance().getDisplayWidth() / 2);
    Button womenButton = new Button(women);

    Container container1 = GridLayout.encloseIn(2, menButton, womenButton);

    hi.add(container1);
    hi.show();
}

To create the original design:

public void Fair() {
    Form hi = new Form(BoxLayout.y());
    hi.setTitle("Fair");
    hi.setScrollableY(true);

    hi.getToolbar().addCommandToLeftBar("", RES.getImage("BlackBack.png"), (evt) -> {
    });

    hi.getToolbar().addCommandToRightBar("", RES.getImage("BlackMenu.png"), (evt) -> {
    });

    Image men = RES.getImage("men.png").scaledWidth(Display.getInstance().getDisplayWidth() / 2);
    Image women = RES.getImage("women.png").scaledWidth(Display.getInstance().getDisplayWidth() / 2);
    Image accessories = RES.getImage("accessories.png").scaledWidth(Display.getInstance().getDisplayWidth());
    Image brands = RES.getImage("brands.png").scaledWidth(Display.getInstance().getDisplayWidth());

    Container containerWomen = LayeredLayout.encloseIn(new Label(women),
            FlowLayout.encloseCenterMiddle(BoxLayout.encloseY(new Label("for", "SmallLabelUiid"), new Label("Men", "LargeBoldLabelUiid"))));
    Button womenButton = new Button();
    womenButton.addActionListener(ev -> {
    });
    containerWomen.setLeadComponent(womenButton);

    Container containerMen = LayeredLayout.encloseIn(new Label(men),
            FlowLayout.encloseCenterMiddle(BoxLayout.encloseY(new Label("for", "SmallLabelUiid"), new Label("Women", "LargeBoldLabelUiid"))));
    Button menButton = new Button();
    menButton.addActionListener(ev -> {
    });
    containerMen.setLeadComponent(menButton);

    Container containerMenAndWomen = GridLayout.encloseIn(2, containerMen, containerWomen);

    Container containerAccessories = LayeredLayout.encloseIn(new Label(accessories),
            FlowLayout.encloseCenterMiddle(BoxLayout.encloseY(new Label("Accessories", "LargeBoldLabelUiid"))));
    Button accessoriesButton = new Button();
    accessoriesButton.addActionListener(ev -> {
    });
    containerAccessories.setLeadComponent(accessoriesButton);

    Container containerBrands = LayeredLayout.encloseIn(new Label(brands),
            FlowLayout.encloseCenterMiddle(BoxLayout.encloseY(new Label("Brands", "LargeBoldLabelUiid"), new SpanLabel("A man's worth is no greater than his ambitions", "SmallLabelUiid"))));
    Button brandsButton = new Button();
    brandsButton.addActionListener(ev -> {
    });
    containerBrands.setLeadComponent(brandsButton);

    hi.add(containerMenAndWomen).add(containerAccessories).add(containerBrands);
    hi.show();
}

Answer 2

Here use this layout, modifiy it as you need

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="3"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:weightSum="2"
        android:layout_weight="1">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent" >

            <ImageView
                android:layout_width="match_parent"
                android:background="#7e3c3c"
                android:layout_height="match_parent" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="For Boys"
                android:textColor="#fff"
                android:gravity="center"
                android:layout_centerVertical="true"
                android:layout_alignParentStart="true"
                android:id="@+id/textView" />


        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent" >

            <ImageView
                android:layout_width="match_parent"
                android:background="#0f94ce"
                android:layout_height="match_parent" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="For Girls"
                android:textColor="#fff"
                android:gravity="center"
                android:layout_centerVertical="true"
                android:layout_alignParentStart="true" />


        </RelativeLayout>

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp" >

        <ImageView
            android:layout_width="match_parent"
            android:background="#eccf15"
            android:layout_height="match_parent" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Accessories"
            android:layout_marginTop="20dp"
            android:textColor="#000"
            android:gravity="center"/>


    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp" >

        <ImageView
            android:layout_width="match_parent"
            android:background="#15ec4e"
            android:layout_height="match_parent" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Brands"
            android:layout_marginTop="20dp"
            android:textColor="#d60707"
            android:gravity="center"/>
    </RelativeLayout>

</LinearLayout>