How do I make a JSlider background transparent? or How do I properly overlay JComponents in JLayeredPane?

Question

I am trying to overlay a JSlider on top of a JProgressBar. I am using a JLayeredPane to hold the two components. I am adding the JProgressBar to the JLayeredPane and then adding the JSlider. So far, I have attempted to make the JSlider transparent by setting opaque to false and overriding the paintComponent method. What I end up with is that the slider handle is the only part that becomes transparent while the background stays opaque. It is possible that I am not using the JLayeredPane correctly, but my tests with JLabels seemed to work. How do I get the background of the JSlider to be transparent?

JSlider slider = new JSlider()
{

    @Override
    public void paintComponent(java.awt.Graphics g)
    {
        java.awt.Graphics2D g2 = (java.awt.Graphics2D) g;
        g2.setComposite(AlphaComposite.getInstance(
                AlphaComposite.SRC_OVER, (float) 0.5));

        super.paintComponent(g2);
    }

};

Thank you all for your help. Through your examples, I have discovered that my issue is with the JLayeredPane that I am using. I recognize that the JSlider background can be made transparent, however, I still cannot get the components on layers beneath to show through. This is my example:

public class SliderTest extends JFrame
{

private JPanel contentPane;

/**
 * Launch the application.
 */
public static void main(String[] args)
{
    EventQueue.invokeLater(new Runnable()
    {
        public void run()
        {
            try
            {
                SliderTest frame = new SliderTest();
                frame.setVisible(true);
            } catch (Exception e)
            {
                e.printStackTrace();
            }
        }
    });
}

/**
 * Create the frame.
 */
public SliderTest()
{
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setBounds(100, 100, 450, 300);
    contentPane = new JPanel();
    contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
    contentPane.setLayout(new BorderLayout(0, 0));
    setContentPane(contentPane);

    JPanel panel = new JPanel();
    contentPane.add(panel, BorderLayout.CENTER);
    panel.setLayout(new BorderLayout(0, 0));

    JLayeredPane layeredPane = new JLayeredPane();

    panel.add(layeredPane, BorderLayout.CENTER);
    layeredPane.setLayout(new BorderLayout(0, 0));

    JProgressBar progressBar = new JProgressBar();
    progressBar.setValue(50);
    layeredPane.add(progressBar);
    layeredPane.setLayer(progressBar, 0);

    JSlider slider = new JSlider()
    {
        @Override
        protected void paintComponent(Graphics g)
        {
            Graphics2D g2d = (Graphics2D) g.create();
            g2d.setColor(getBackground());
            g2d.setComposite(AlphaComposite.SrcOver.derive(0.5f));
            g2d.fillRect(0, 0, getWidth(), getHeight());
            g2d.dispose();

            super.paintComponent(g);
        }

    };
    layeredPane.setLayer(slider, 1);
    slider.setOpaque(false);

    // layeredPane.setLayer(slider, 1);
    layeredPane.add(slider, BorderLayout.CENTER);

}

}

My JSlider works just fine.Show us the code to find out the fault. — joey rohan, Jan 26 '13 at 08:21
Using `setOpaque(false)` on the JSlider works like a charm for me. No need to override anything — Guillaume Polet, Jan 26 '13 at 08:46

MadProgrammer · Accepted Answer · 2013-01-26T21:00:23.960

This will depend upon what it is you want to achieve. By default JSlider is transparent.

What's important here is that the opaque property MUST be false, otherwise the repaint manager will not paint behind the components...

enter image description here

Top slider, transparent background (blue), opaque control
Middle slider, transparent background (green), transparent control

Bottom slider, normal JSlider

public class TestSlider {

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

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

            JFrame frame = new JFrame("Test");
            frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            frame.setLayout(new BorderLayout());
            frame.add(new TestPane());
            frame.pack();
            frame.setLocationRelativeTo(null);
            frame.setVisible(true);
        }

    });
}

public class TestPane extends JPanel {

    public TestPane() {
        setBackground(Color.RED);

        setLayout(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.gridwidth = GridBagConstraints.REMAINDER;
        gbc.fill = GridBagConstraints.HORIZONTAL;

        add(new TransparentBackgroundSlider(), gbc);
        add(new TransparentSlider(), gbc);
        add(new JSlider(), gbc);

    }

}

public class TransparentBackgroundSlider extends JSlider {

    public TransparentBackgroundSlider() {
        // Important, we taking over the filling of the
        // component...
        setOpaque(false);
        setBackground(Color.BLUE);
    }

    @Override
    protected void paintComponent(Graphics g) {
        Graphics2D g2d = (Graphics2D) g.create();
        g2d.setColor(getBackground());
        g2d.setComposite(AlphaComposite.SrcOver.derive(0.5f));
        g2d.fillRect(0, 0, getWidth(), getHeight());
        g2d.dispose();

        super.paintComponent(g);
    }

}

public class TransparentSlider extends JSlider {

    public TransparentSlider() {
        // Important, we taking over the filling of the
        // component...
        setOpaque(false);
        setBackground(Color.GREEN);
    }

    @Override
    public void paint(Graphics g) {
        Graphics2D g2d = (Graphics2D) g.create();
        g2d.setComposite(AlphaComposite.SrcOver.derive(0.5f));
        super.paint(g2d);
        g2d.dispose();
    }

    @Override
    protected void paintComponent(Graphics g) {
        // We need this because we've taken over the painting of the component
        Graphics2D g2d = (Graphics2D) g.create();
        g2d.setColor(getBackground());
        g2d.fillRect(0, 0, getWidth(), getHeight());
        g2d.dispose();

        super.paintComponent(g);
    }

}

}

Update with layer example

enter image description here

public class TestSlider {

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

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

                JFrame frame = new JFrame("Test");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setLayout(new BorderLayout());
                frame.add(new TestPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }

        });
    }

    public class TestPane extends JLayeredPane {

        private JProgressBar pb;
        private JSlider slider;

        public TestPane() {

            pb = new JProgressBar();
            slider = new JSlider();

            add(pb, new Integer(0));
            add(slider, new Integer(1));

        }

        @Override
        public Dimension getPreferredSize() {
            Dimension size = pb.getPreferredSize();
            size.height *= 4;
            size.width = Math.max(size.width, slider.getPreferredSize().width);
            return size;
        }

        @Override
        public void doLayout() {
            super.doLayout();

            int width = getWidth();
            int height = getHeight();

            Dimension size = pb.getPreferredSize();

            int x = 10;
            int y = (getHeight() - size.height) / 2;

            pb.setLocation(x, y);
            size.width = getWidth() - 21;
            pb.setSize(size);

            size = slider.getPreferredSize();
            x = (getWidth() - size.width) / 2;
            y = (getHeight() - size.height) / 2;
            slider.setBounds(x, y, size.width, size.height);

        }

    }

}

+1, nice example. Just as a tiny improvements, you could replace all your `gridx/gridy` with a single `gridwidth = GridBagConstraints.REMAINDER;` (which basically lays out all components vertically). — Guillaume Polet, Jan 26 '13 at 08:57
Thank you. This proves to me that the JSlider can be made transparent. However, I am still having difficulty overlaying a JSlider on top of a JProgressBar using the JLayeredPane. Do you know how to use JLayeredPane to do this? — Justin Wiseman, Jan 26 '13 at 16:09
Thanks. I was able to get the result I wanted using that. Why do you have to override the layout and assign positions manually? If possible I would prefer using a BorderLayout and setting the JLayeredPane in the center so that all resizing is done automatically. — Justin Wiseman, Jan 26 '13 at 21:35
@JustinWiseman To my understanding, JLayeredPane does not support layout managers as it has it own for mangling the layers, hence the reason I did my positioning manually — MadProgrammer, Jan 26 '13 at 21:58

How do I make a JSlider background transparent? or How do I properly overlay JComponents in JLayeredPane?

1 Answers1

Linked