title: Resizable window with 3 proportional panels
body: <p>I want to have a window containing two panels in proportion 3:1 vertically and have the bigger one contain a square panel inside. Additionally I'd like to draw something in the center of the square panel, say circle.</p>
  
  <p>The behavior of my program suggests there is a conflict between the 3:1 proportion and the squareness. While resizing, the shapes are jumping oddly. The end result is incorrect, the first proportion does not hold. In addition the circle is off the center.</p>
  
  <p>I am new to java, therefore I would appreciate any remarks on both what is wrong and how to implement this the correct way.</p>
  
  <p>The result looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/RJFtu.png" alt="enter image description here"></p>
  
  <p>I wanted to have: (1) red panel as a square (2) blue panel to be strictly 3 times higher than the green one (3) to have circle in the middle of the red box.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>import java.awt.Color;
  import java.awt.Container;
  import java.awt.Dimension;
  import java.awt.Graphics;
  import java.awt.GridBagConstraints;
  import java.awt.GridBagLayout;
  
  import javax.swing.JFrame;
  import javax.swing.JPanel;
  import javax.swing.SwingUtilities;
  
  
  public class ProportionalPanels
  {
      private JFrame window = new JFrame("Proportional resizable panels");
      private JPanel allContaining = new JPanel( new GridBagLayout() );
      private JPanel upper = new JPanel( new GridBagLayout() );
      private JPanel lower = new JPanel();
      private JPanel square = new JPanel()
      { 
          @Override
          public Dimension getPreferredSize() {
              Dimension d = super.getPreferredSize();
              Container c = getParent();
              if (c != null) {
                  d = c.getSize();
              } else {
                  return new Dimension(10, 10);
              }
              int w = (int) d.getWidth();
              int h = (int) d.getHeight();
              int s = (w &lt; h ? w : h);
              return new Dimension(s, s);
          }
  
          @Override
          protected void paintComponent(Graphics g)
          {
              super.paintComponent(g);
              g.setColor(Color.GRAY);
              int x = this.getWidth(), y = this.getHeight(); 
              g.fillOval(x/2,y/2,x/4,y/4);
          }
      };
  
      public ProportionalPanels()
      {
          // setting colors
          allContaining.setBackground(Color.WHITE);       
          square.setBackground(Color.RED);
          upper.setBackground(Color.BLUE);
          lower.setBackground(Color.GREEN);
  
          // setting upper
          upper.add(square);
  
          // setting allContaining
          GridBagConstraints g = new GridBagConstraints();
          g.gridx = g.gridy = 0;
          g.weightx = 1; g.weighty = 0.75;
          g.fill = GridBagConstraints.BOTH;
          allContaining.add(upper,g);
          g.gridy += 1;
          g.weighty = 0.25;
          g.fill = GridBagConstraints.BOTH;
          allContaining.add(lower,g);
  
  
          window.add(allContaining);
  
          // setting window
          window.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
          window.setLocationByPlatform(true);
          window.pack();
          window.setSize(400,200);
          window.setVisible(true);
      }
  
      public static void main(String[] args)
      {
          SwingUtilities.invokeLater( new Runnable()
          {
              public void run()
              {
                  new ProportionalPanels();
              }
          });
      }
  }
  </code></pre>
  
  <h2>EDIT</h2>
  
  <p>Imagine a simple gui for chess, only for the sake of analogy. A window is spit into two panels, upper one (blue) is to contain the chessboard, the lower one (green) some buttons. The only constraint for these panels is to keep the vertical proportion - the upper one is to be 3x higher than the lower one. Then, going deeper into panel hierarchy, the upper panel contains <code>square</code> panel (red), which is a square, has the height of the upper panel and is horizontally placed in the middle of the upper panel. Extra space is on the left and right of the square panel, adjusts accordingly to keep red panel square and green's height 3 times smaller than the red's. Red panel holds some drawings at its center, here a gray circle, but to keep the chess analogy it can be an image of chessboard or anything else.</p>