How to achieve the desired layout?

Question

I am trying to create this layout

for a project using Swing in Java 8, but since Swing is something I have never learned I am really struggling with trying to get the layout set up. I've tried my best but I just do not understand this. I don't think I will have any trouble with the backend functionality of the window I just can't get it to look the way I need it.

Welcome to Stack Overflow. Please take the [tour] to learn how Stack Overflow works and read [ask] on how to improve the quality of your question. You are currently not asking any question. Please [edit] your post to include a question and a detailed description of your problem. You might want to add a [mcve] to show the problem you have. — Progman, Dec 04 '19 at 20:41
I recommend [Laying Out Components Within a Container](https://docs.oracle.com/javase/tutorial/uiswing/layout/index.html) — Abra, Dec 04 '19 at 20:41
you can use WindowBuilder or any other GUI based software to just drag and drop the elements of ui you need to. It will speed up your project and you can focus more on backend — Zbigniew Malcherczyk, Dec 04 '19 at 20:58
Don't use an IDE for drag and drop. You end up spending time learning the IDE and not learning Java/Swing and the code will not be maintainable if you ever move to another IDE. Learn how to use layout mangers and then logically break down your layout into different panels with different layout managers. — camickr, Dec 04 '19 at 20:59
That's what I'm trying to do but I can't get anything to look the way it needs to and I'm running out of time to finish this. — jhessong, Dec 04 '19 at 21:14
Well, you haven't posted an code showing what you have tried. So first simplify the program and try to create a frame with the first panel. I would suggest you can easily use a GridBagLayout. Post the [mre] showing what you tried and maybe someone will help with corrections. We are not going to write the code for you. — camickr, Dec 04 '19 at 21:19
A common strategy to solve complex computing tasks, is to break them into small, well defined manageable tasks. Divide and conquer. See examples [1](https://stackoverflow.com/a/52462976/3992939) [2](https://stackoverflow.com/a/47368681/3992939) [3](https://stackoverflow.com/a/54006862/3992939) [4](https://stackoverflow.com/a/55511724/3992939) — c0der, Dec 05 '19 at 12:55

c0der · Answer 1 · 2019-12-06T05:16:47.693

A common strategy to solve complex computing tasks, is to break them into small, well defined manageable tasks. Divide and conquer.
This also applies to gui: break the design into small, easy to layout containers. In this case, consider dividing the design into 4 areas (JPanels) nested in a main JPanel:

This basic layout, that can get you started, can be achieved like so:

import java.awt.Color;
import java.awt.Dimension;
import javax.swing.BoxLayout;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class Gui {

    private final String text ="Growing ";
    private JPanel grid;
    private JFrame f;

    Gui() {
        creategui();
    }

    void creategui(){

        f = new JFrame("Hexagon Cross For Less");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setLocationRelativeTo(null);
        f.setLayout(new BoxLayout(f.getContentPane(),BoxLayout.Y_AXIS));

        JPanel primes = new JPanel();
        primes.setPreferredSize(new Dimension(1000,120));
        primes.setBackground(Color.CYAN);
        f.add(primes);

        JPanel xFiles = new JPanel();
        xFiles.setPreferredSize(new Dimension(1000,120));
        xFiles.setBackground(Color.YELLOW);
        f.add(xFiles);

        JPanel actions = new JPanel();
        actions.setPreferredSize(new Dimension(1000,120));
        actions.setBackground(Color.GREEN);
        f.add(actions);

        JPanel status = new JPanel();
        status.setPreferredSize(new Dimension(1000,40));
        status.setBackground(Color.LIGHT_GRAY);
        f.add(status);

        f.pack();
        f.setVisible(true);
    }

    public static void main(String[] args) {
        new Gui();
    }
}

it produces the following layout:

It can be better structured by representing each such distinct area (JPanel) in a separate class.
The following code produces exactly the same layout (it is a single-file mre. Copy past it to Gui.java and run):

import java.awt.Color;
import java.awt.Dimension;
import javax.swing.BoxLayout;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class Gui {

    private final String text ="Growing ";
    private JPanel grid;
    private JFrame f;

    Gui() {
        creategui();
    }

    void creategui(){

        f = new JFrame("Hexagon Cross For Less");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setLocationRelativeTo(null);
        f.add(new MainPane());
        f.pack();
        f.setVisible(true);
    }

    public static void main(String[] args) {
        new Gui();
    }
}

class MainPane extends JPanel{

    MainPane() {
        setLayout(new BoxLayout(this,BoxLayout.Y_AXIS));
        add(new Primes());
        add(new CrossFiles());
        add(new Actions());
        add(new Status());
    }
}

class Primes extends JPanel{
    Primes() {
        setPreferredSize(new Dimension(1000,120));
        setBackground(Color.CYAN);
    }
}

class CrossFiles extends JPanel{
    CrossFiles() {
        setPreferredSize(new Dimension(1000,120));
        setBackground(Color.YELLOW);
    }
}

class Actions extends JPanel{
    Actions() {
        setPreferredSize(new Dimension(1000,120));
        setBackground(Color.GREEN);
    }
}

class Status extends JPanel{
    Status() {
        setPreferredSize(new Dimension(1000,40));
        setBackground(Color.LIGHT_GRAY);
    }
}

To continue, apply the same technique and define the layout of each of the 4 sub panels.

The design of Actions could be :

Hint: Primes and CrossFiles have exactly the same layout.

How to achieve the desired layout?

1 Answers1