How to make a custom scrollbar?

Question

I want to make a custom scroll bar that looks like this in my java application:

I found this answer, and it seems to work, but I don't know how to implement graphics.

I've been making some test on my own but none of them seemed to work. Any leads on how to use graphics to make a custom scrollbar?

I tried to implement the following code, but there are 3 problems, the windows scrollbar stills showing up, the graphics that I made are transparent, and the thumb is not moving

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Rectangle;
import javax.swing.JComponent;
import javax.swing.plaf.basic.BasicScrollBarUI;

public class MyScrollBarUI extends BasicScrollBarUI{
    @Override
    protected void paintTrack(Graphics g, JComponent c, Rectangle trackBounds) {
        g.setColor(new Color(33, 31, 32));
        g.drawRoundRect(0, 0, 10, 550, 5, 5);
    }

    @Override
    protected void paintThumb(Graphics g, JComponent c, Rectangle thumbBounds) {
        g.setColor(new Color(237, 24, 33));
        g.drawRoundRect(0, 0, 10, 60, 5, 5);
    }
}

This is the result: scrollbar2

Re `"I found this answer..."` -- what answer? And if you made attempts that aren't working, it's usually best for you to post your best attempt as a [mre] code post in your question. — Hovercraft Full Of Eels, Jun 27 '19 at 13:32
Welcome to SO. Please read [ask] and then [edit] your question to at least add the following: what does "this" refer to? Which answer did you find? What problems do you have with "implementing" the graphics? What "graphics" are you refering to - the `Graphics` or `Graphics2D` object or graphics in general, e.g. images? What else have you tried? — Thomas, Jun 27 '19 at 13:33
Did you have a look at the [Graphics API](https://docs.oracle.com/en/java/javase/12/docs/api/java.desktop/java/awt/Graphics.html)? It's basically the same as drawing an image, i.e. you have methods to draw lines, ovals, polygons or other images into the target canvas/image. One of the simplest ways to draw a scrollbar like yours would be to just draw two images: one for the track and one for the knob. To get better visual results for varying lengths you might want to draw 3 images per item: one for the start and end and one in the center that can be streched. — Thomas, Jun 27 '19 at 13:39
I tried drawing 2 images, but I'm having a few problems. I updated the post. Is there a way to make a dynamic thum? — Wil Fonseca, Jun 27 '19 at 14:17
Tip: Add @Thomas or whoever you're trying to reply to notify them that you've replied to them. The `@` is important — Frakcool, Jun 27 '19 at 20:44
At least for this "problem": *"the graphics that I made are transparent"*: You're using `drawRoundRect`, which draws it, if you want it filled, use `fillRoundRect` instead. For the other 2 problems we cannot provide much help unless you post a proper [mcve] as suggested by @HovercraftFullOfEels in the very first comment to your question — Frakcool, Jun 27 '19 at 20:47
"I tried drawing 2 images, but I'm having a few problems" - if you want us to help you should name them and show what you've tried. "Is there a way to make a dynamic thum?" - what do you mean by "dynamic": dynamic size, animated, dynamic color, something else? — Thomas, Jun 28 '19 at 06:57
As for your problem "the thumb is not moving" - note that the `paintThumb(...)` method gets a parameter called `thumbBounds`. Use that parameter do draw the thumb at the correct position. You get a similar parameter for the track bounds and should use that as well. — Thomas, Jun 28 '19 at 06:59

How to make a custom scrollbar?

0 Answers0