Giving a JPanel a percentage-based width

Question

What's the easiest way to make a JPanel that takes up a fixed percentage of its parent container, by width?

Its width should update when that of its parent container changes.

I tried using Box.createHorizontalStrut(), but that doesn't update when the width of the JPanel's parent container changes.

Answer 1

Another option is to use a SpringLayout:

import java.awt.*;
import javax.swing.*;

public class SpringLayoutTest {
  private JComponent makeUI() {
    SpringLayout layout = new SpringLayout();

    JPanel p = new JPanel(layout);
    p.setBorder(BorderFactory.createLineBorder(Color.GREEN, 10));

    Spring pw = layout.getConstraint(SpringLayout.WIDTH,  p);
    Spring ph = layout.getConstraint(SpringLayout.HEIGHT, p);

    JLabel l = new JLabel("label: 5%, 5%, 90%, 55%", SwingConstants.CENTER);
    l.setOpaque(true);
    l.setBackground(Color.ORANGE);
    l.setBorder(BorderFactory.createLineBorder(Color.RED, 1));

    JButton b = new JButton("button: 50%, 65%, 40%, 30%");

    setPercentage(layout.getConstraints(l), pw, ph, .05f, .05f, .90f, .55f);
    setPercentage(layout.getConstraints(b), pw, ph, .50f, .65f, .40f, .30f);

    p.add(l);
    p.add(b);
    return p;
  }

  private static void setPercentage(
      SpringLayout.Constraints c, Spring pw, Spring ph,
      float sx, float sy, float sw, float sh) {
    c.setX(Spring.scale(pw, sx));
    c.setY(Spring.scale(ph, sy));
    c.setWidth(Spring.scale(pw,  sw));
    c.setHeight(Spring.scale(ph, sh));
  }

  public static void main(String... args) {
    EventQueue.invokeLater(new Runnable() {
      @Override public void run() {
        createAndShowGUI();
      }
    });
  }
  public static void createAndShowGUI() {
    JFrame frame = new JFrame();
    frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    frame.getContentPane().add(new SpringLayoutTest().makeUI());
    frame.setSize(320, 240);
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);
  }
}

Answer 2

You could use the Relative Layout. This layout was designed for this purpose since none of the layouts from the JDK support this directly (and easily).

As a simple example you could have 3 panels at 25%, 25% and 50% of the width:

RelativeLayout rl = new RelativeLayout(RelativeLayout.X_AXIS);
rl.setFill( true );
JPanel panel = new JPanel( rl );
panel.add(red, new Float(25);
panel.add(green, new Float(25));
panel.add(blue, new Float(50));

Answer 3

What you want is a GridBagLayout. (How to use?)

Using a GridbagLayout allows you to define GridBagConstraints for each single component you add.

These constraints include weightx which does exactly what it says on the tin. This is a relative value calculated across all components in that "grid-row", similar to distribution parts.

Be aware that the weightx only begins to come into play, when the preferred size of components is exceeded. Be aware that this may lead to interesting bugs, when setting minimumSize(), see also this SO answer.

Anyways: you can get the value you need for weightx by specifying it's percentage across the components in it's current row, or any multiple of that.

This means for a component to take 50% of the available parent container width, use weightx = 0.5. make sure that the row's weightx values add up to 1.0