Create a custom JScrollBar using the image

Question

Therefore, I use Java Swing to create a user interface for my application and use custom images to replace ugly Java applications, user images are styled and integrate very easily into Java Swing.

Currently my problem is that I need to use JScrollBar with JScrollPane in the application, and I really don't want to use the standard Java scroll bar or even my own OS scroll bar.

I just want the custom image to be the background of the scrollbar and the image should be large from the scrollbar.

How to create a custom JScrollBar using an image?

Answer 1

I wrote an example that shows how to set a custom image for the thumb and background (the so-called track) of the scroll bar. You need two thumb.png and track.png for custom images in the same place where your class file is. I also do some scaling of the images to fit the scrollbar. Just experiment with this code. I changed the scrollbar width ( setPreferredSize ) to better see the images.

The essential points are that you need to create your own MyUi class, which extends BasicScrollBarUI and overrides paintThumb and paintTrack , and personalizes your scrollbar with setUI(new MyUI) :

 import java.awt.*; import java.io.FileReader; import java.io.IOException; import javax.swing.*; import javax.swing.plaf.metal.MetalScrollBarUI; import javax.imageio.ImageIO; import java.io.File; import java.awt.geom.AffineTransform; public class CustomScrollbarUIExample { public static void main(String[] args) { JScrollPane before = makeExamplePane(); JScrollPane after = makeExamplePane(); JScrollBar sb=after.getVerticalScrollBar(); sb.setPreferredSize(new Dimension(50, Integer.MAX_VALUE)); sb.setUI(new MyScrollbarUI()); JFrame f = new JFrame(); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Container c = f.getContentPane(); c.setLayout(new GridLayout(2, 1, 0, 1)); c.add(before); c.add(after); f.setSize(450, 400); f.setVisible(true); } private static JScrollPane makeExamplePane() { String exampleText= "Lorem ipsum dolor sit amet,\n consetetur sadipscing elitr,\n sed diam nonumy eirmod \ntempor invidunt ut labore et dolore \nmagna aliquyam erat,\n sed diam voluptua. At vero eos et accusam et \njusto duo dolores et ea rebum. Stet clita\n kasd gubergren, no sea\n takimata sanctus est Lorem ipsum dolor sit amet.\n Lorem ipsum dolor sit amet,\n consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt \nut labore et dolore\n magna aliquyam erat, sed diam voluptua.\n At vero eos et accusam et justo \nduo\n dolores et ea rebum. Stet clita kasd gubergren, no sea\n takimata sanctus est Lorem\n ipsum dolor sit amet. Lorem ipsum dolor\n sit amet, consetetur sadipscing elitr,\n sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos\n et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est \nLorem ipsum dolor sit amet.Duis\n autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel\n illum dolore eu feugiat nulla facilisis at vero eros et \naccumsan et iusto odio \ndignissim qui blandit praesent luptatum zzril delenit augue\n duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer\n adipiscing elit, sed diam nonummy nibh euismod \ntincidunt ut laoreet\n dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,\n quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea\n commodo consequat. Duis autem vel eum iriure \ndolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla \nfacilisis at vero eros et accumsan et iusto odio dignissim qui blandit\n praesent luptatum zzril delenit augue duis dolore \nte feugait nulla facilisi."; JTextArea text = new JTextArea(exampleText); JScrollPane scroll = new JScrollPane(text); return scroll; } static class MyScrollbarUI extends MetalScrollBarUI { private Image imageThumb, imageTrack; MyScrollbarUI() { try { imageThumb = ImageIO.read(new File("thumb.png")); imageTrack = ImageIO.read(new File("track.png")); } catch (IOException e){} } @Override protected void paintThumb(Graphics g, JComponent c, Rectangle thumbBounds) { g.translate(thumbBounds.x, thumbBounds.y); g.setColor( Color.red ); g.drawRect( 0, 0, thumbBounds.width - 2, thumbBounds.height - 1 ); AffineTransform transform = AffineTransform.getScaleInstance((double)thumbBounds.width/imageThumb.getWidth(null),(double)thumbBounds.height/imageThumb.getHeight(null)); ((Graphics2D)g).drawImage(imageThumb, transform, null); g.translate( -thumbBounds.x, -thumbBounds.y ); } @Override protected void paintTrack(Graphics g, JComponent c, Rectangle trackBounds) { g.translate(trackBounds.x, trackBounds.y); ((Graphics2D)g).drawImage(imageTrack,AffineTransform.getScaleInstance(1,(double)trackBounds.height/imageTrack.getHeight(null)),null); g.translate( -trackBounds.x, -trackBounds.y ); } } } 

See the source file MetalScrollBarUI.java for more information.

Answer 2

If the buttons were a small gray area, but I do not know how to remove it.

Here's a variation of the @halex example, which removes buttons and allows the graphics context to scale. I added a fake image to make it self-sufficient.

 import java.awt.*; import java.awt.image.BufferedImage; import javax.swing.*; import javax.swing.plaf.metal.MetalScrollBarUI; /** @see http://stackoverflow.com/a/12270067/230513 */ public class CustomScrollbarUIExample { public static void main(String[] args) { JScrollPane before = makeExamplePane(); JScrollPane after = makeExamplePane(); JScrollBar sb = after.getVerticalScrollBar(); sb.setUI(new MyScrollbarUI()); JFrame f = new JFrame(); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); f.setLayout(new GridLayout(0,1)); f.add(before); f.add(after); f.pack(); f.setSize(320, 240); f.setVisible(true); } private static JScrollPane makeExamplePane() { JTextArea text = new JTextArea(16, 16); text.append("Lorem ipsum dolor sit amet…"); JScrollPane scroll = new JScrollPane(text); return scroll; } static class MyScrollbarUI extends MetalScrollBarUI { private Image imageThumb, imageTrack; private JButton b = new JButton() { @Override public Dimension getPreferredSize() { return new Dimension(0, 0); } }; MyScrollbarUI() { imageThumb = FauxImage.create(32, 32, Color.blue.darker()); imageTrack = FauxImage.create(32, 32, Color.lightGray); } @Override protected void paintThumb(Graphics g, JComponent c, Rectangle r) { g.setColor(Color.blue); ((Graphics2D) g).drawImage(imageThumb, rx, ry, r.width, r.height, null); } @Override protected void paintTrack(Graphics g, JComponent c, Rectangle r) { ((Graphics2D) g).drawImage(imageTrack, rx, ry, r.width, r.height, null); } @Override protected JButton createDecreaseButton(int orientation) { return b; } @Override protected JButton createIncreaseButton(int orientation) { return b; } } private static class FauxImage { static public Image create(int w, int h, Color c) { BufferedImage bi = new BufferedImage( w, h, BufferedImage.TYPE_INT_ARGB); Graphics2D g2d = bi.createGraphics(); g2d.setPaint(c); g2d.fillRect(0, 0, w, h); g2d.dispose(); return bi; } } }