How can i make a layout like the attached gif?

Question

My question is about layout in Java Swing.

I want to make a screen like shown below. I saw this video on youtube and made a gif of the part I want.

I want 2 panels and a button like this:

When i clicked the button the JPanel will be hidden and JTable's width will be 100% like html/css like this; (And when button clicked again JPanel will be shown etc..)

How can I do this? Which layout should I use?

Answer 1

There is more than one way to do it, but here's an example that uses BorderLayout as the main layout, and places the button in a left aligning FlowLayout:

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingConstants;
import javax.swing.SwingUtilities;

public class LayoutDemo {
    private LayoutDemo() {
        JFrame frame = new JFrame("Demo");
        frame.setLocationByPlatform(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        JPanel buttonHolder = new JPanel(new FlowLayout(FlowLayout.LEADING));
        frame.add(buttonHolder, BorderLayout.NORTH);
        JButton button = new JButton("Toggle visibility");
        buttonHolder.add(button);

        final JPanel left = new JPanel();
        left.setPreferredSize(new Dimension(100, 200));
        left.setBackground(Color.BLUE);
        frame.add(left, BorderLayout.LINE_START);

        JLabel table = new JLabel("This pretends to be a table", SwingConstants.CENTER);
        table.setPreferredSize(new Dimension(400, 200));
        frame.add(table);

        button.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                left.setVisible(!left.isVisible());
            }
        });

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

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                new LayoutDemo();
            }
        });
    }
}

I used setPreferredSize() to give the components some reasonable default size, but usually it should be automatically calculated by the layout manager from the sizes of the child components, or in case of a custom component, you should override getPreferredSize() return what is appropriate for the component.

The result looks like: