How to reduce opacity of a JFrame's background color

Question

I would like to create a frame like this. Where the is a main frame with 0.9 opacity and holds two JPanels. One of the panels is black and the other does not have any background colour e:g setOpaque(false);.

Here is what I tried but did not work:

JFRAME

public class STBG {
    JFrame frame = new JFrame("Panel");
    BorderLayout bl = new BorderLayout();

    public STBG(){
        frame.setLayout(bl);
        frame.setSize(800, 600);
        frame.add(new LeftBar(), BorderLayout.WEST);
        frame.add(new MainPanel(), BorderLayout.CENTER);

       //frame.setUndecorated(true);
       frame.setBackground(new Color(0, 255, 0, 1));

        frame.setLocationRelativeTo(null);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }

    public static void main(String[] args) throws IOException {
        // TODO code application logic here
        new STBG();
    }
}

LEFT PANEL

public class LeftBar extends JPanel{
    JPanel menuPanel;
    JLabel schedule, history, settings, aboutApp;
    public LeftBar(){
        setBackground(Color.BLACK);
        setPreferredSize(new Dimension(100, 20));
        setLayout(new BorderLayout());
        menuPanel = new JPanel(new GridLayout(5,0));
        menuPanel.setBackground(Color.black);


        settings = new JLabel("Settings");
        schedule = new JLabel("Schedule");
        history = new JLabel("History");
        menuPanel.add(settings);
        menuPanel.add(schedule);
        menuPanel.add(history);

        aboutApp = new JLabel("About App");
        add(menuPanel, BorderLayout.CENTER);
        add(aboutApp, BorderLayout.SOUTH);
    }
}

MAIN PANEL

public class MainPanel extends JPanel{
    public MainPanel(){
        setLayout(new GridLayout(0,1));
        add(new JLabel("TEXT"));

        setOpaque(false);
        setBackground(new Color(0, 0, 0, 1));
    }
}

Any idea how to make something similar to the image?

Answer 1

I just modified one of the example from the Swing tutorial on How to Create Translucent Windows. It seems to work for the Metal LAF so at least you will have buttons.

import java.awt.*;
import javax.swing.*;
import static java.awt.GraphicsDevice.WindowTranslucency.*;

public class FrameTranslucent extends JFrame {
    public FrameTranslucent() {
        super("Frame Translucent");

        setBackground(new Color(0,0,0,0));
        setSize(new Dimension(300,200));
        setLocationRelativeTo(null);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        JPanel panel = new JPanel(new BorderLayout()) {
            @Override
            protected void paintComponent(Graphics g) {
                if (g instanceof Graphics2D) {
                    final int R = 240;
                    final int G = 240;
                    final int B = 240;

                    Paint p =
                        new GradientPaint(0.0f, 0.0f, new Color(R, G, B, 0),
                            0.0f, getHeight(), new Color(R, G, B, 255), true);
                    Graphics2D g2d = (Graphics2D)g;
                    g2d.setPaint(p);
                    g2d.fillRect(0, 0, getWidth(), getHeight());
                }
            }
        };
        setContentPane(panel);

        JPanel left = new JPanel( new BorderLayout() );
        left.setBackground( Color.BLACK );
        left.add(new JLabel("Left Label Text"), BorderLayout.NORTH);
        add(left, BorderLayout.WEST);

        JPanel center = new JPanel( new BorderLayout() );
        center.setBackground( new Color(0, 0, 0, 128) );
        JLabel label = new JLabel("Center Label Text");
        label.setForeground(Color.RED);
        center.add(label, BorderLayout.NORTH);
        add(center, BorderLayout.CENTER);
    }

    public static void main(String[] args) {
        // Determine what the GraphicsDevice can support.
        GraphicsEnvironment ge =
            GraphicsEnvironment.getLocalGraphicsEnvironment();
        GraphicsDevice gd = ge.getDefaultScreenDevice();
        boolean isPerPixelTranslucencySupported =
            gd.isWindowTranslucencySupported(PERPIXEL_TRANSLUCENT);

        //If translucent windows aren't supported, exit.
        if (!isPerPixelTranslucencySupported) {
            System.out.println(
                "Per-pixel translucency is not supported");
                System.exit(0);
        }

        JFrame.setDefaultLookAndFeelDecorated(true);

        // Create the GUI on the event-dispatching thread
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                FrameTranslucent gtw = new FrameTranslucent();

                // Display the window.
                gtw.setVisible(true);
            }
        });
    }
}

I don't notice any problems, but I'm sure exactly what you want.

I also have noticed problems when using backgrounds with transparency which is why I created the Alpha Container to make sure the background is painted properly. If this example doesn't work, then maybe the AlphaContainer will help.

Answer 2

Despite what the tutorials seem to say, there doesn't appear to be anyway to make a frames content area transparent without making the frame undercoated.

Swing components (apart from JFrame) don't render transparent background colors well, the process results in no end of painting artifacts and other related issues.

However, you can "fake" it. You start by making the JPanel transparent (setOpaque(false)) and then override it's paintComponent method and paint what ever filling color you want, for example...

import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridLayout;
import java.awt.LinearGradientPaint;
import java.awt.Point;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class JavaApplication1048 {

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

    public JavaApplication1048() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                System.out.println("Blah");

                JFrame frame = new JFrame("Testing");
                frame.setLayout(new GridLayout(1, 2));
                frame.setUndecorated(true);
                frame.setBackground(new Color(0, 255, 0, 0));
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new LeftPane());
                frame.add(new RightPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class LeftPane extends JPanel {

        public LeftPane() {
            JLabel label = new JLabel("Left");
            label.setForeground(Color.WHITE);
            setBackground(Color.BLACK);
            add(label);
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(100, 100);
        }

    }

    public class RightPane extends JPanel {

        public RightPane() {
            JLabel label = new JLabel("Right");
            label.setForeground(Color.WHITE);
            setBackground(Color.BLACK);
            add(label);
            setOpaque(false);
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(100, 100);
        }

        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            Graphics2D g2d = (Graphics2D) g.create();
            LinearGradientPaint lgp = new LinearGradientPaint(
                            new Point(0, 0),
                            new Point(getWidth(), 0),
                            new float[]{0f, 1f},
                            new Color[]{getBackground(), applyAlpha(getBackground(), 0.5f)}
            );
            g2d.setPaint(lgp);
            g2d.fillRect(0, 0, getWidth(), getHeight());
            g2d.dispose();
        }

        protected Color applyAlpha(Color color, float alpha) {

            return new Color(color.getRed(), color.getGreen(), color.getBlue(), Math.round(255 * alpha));

        }

    }

}