1. AWT Scrollbar Component
Java AWT Scrollbar Component allows the user to pick a value which will fall under specific range. Many of us already seen Scrollbar UI and below screenshot shows its parts:

A Scrollbar can set up with minimum and maximum values and these sets the range. The user can pick a value from this range by adjusting the Scrollbar Thumb. One can adjust this component value by using any of the below method:
- Increment value by clicking Scroll Arrow in the bottom.
- Decrement value by clicking Scroll Arrow in the Top.
- Block increment or decrement by clicking area as shown in the picture. These Block can be configurable, which we will see soon.
- Hold and Drag the Scroll Thumb.
2. About AWT Scrollbar Example
The screenshot of the example we are going to create is below:

In our example, we will have three panels and the AWT Frame hosts them via BorderLayout
manger. The top panel hosts three AWT Scrollbar controls to denote red, blue, green color values. Middle panel will live in the centre part of the Frame Window. Gray Scale check box will sit in the South part of the Frame window’s border layout.
All three AWT Scrollbar together represent an RGB color value. So, each Scroll can produce a range of values which falls between 0 to 255. When the user adjusts the Scrollbar, we will create RGB Color and apply that to the panel in the middle of the Frame. When Gray Scale is in checked state, we produce the grey-scaled color and apply that to the middle panel. This example helps you to learn how to use AWT Scrollbar and how to handle the AdjustmentEvent raised by it.
3. AdjustmentListener & AdjustmentEvent
We will create a class called FrameWindow
, which will derive from AWT Frame
. The AWT Scrollbar triggers AdjustmentEvent when the user changes the scroll value via the methods described in Section 1. The AdjustmentListener
will provide interface methods to respond to this event. So, we implement this interface for our Frame class:
1 2 3 4 |
//Sample 01: Get Adjustment Listener Support //To Handle AdjustmentEvent public class AWTScrollbarExample extends Frame implements WindowListener, AdjustmentListener{ |
4. Class Members
We declare three Scrollbar as class members, and we refer these in the handler function of the AdjustmentListener. The Panel reference MidPanel
is to change the background color based on the RGB Scrollbar values. The Checkbox instance will supply to show whether or not we need grey-scale colour value.
1 2 3 4 5 6 |
//Sample 02: Class Members Checkbox chkGrayScale; Panel MidPanel; Scrollbar RedBar; Scrollbar BlueBar; Scrollbar GreenBar; |
5. Create AWT Scrollbar Component
We construct the AWT Scrollbar after creating the Panels for top and middle portion of the Frame. Have a look at the below picture:

The above picture shows constructor parameters of the AWT Scrollbar component. The first param tells the orientation of the Scrollbar. In our case, we need all scroll bars laid out horizontally and hence we pass Scrollbar.HORIZONTAL. The second param decides where we want to set the initial position of Scroll thumb. Say, for example, if the Scrollbar is for specifying the sound volume which is ranging from 1 to 50, the value 10 passed here will set the initial sound volume to 10.
Third param is to set the Thumb Size part of the scroll bar. In the above screenshot, we set the thumb size with 55 value-part which is bigger than the standard size. The last two params sets the range of value. In our case, we want to use the Scrollbar for denoting the RGB component values and these color intensities takes value from 0 to 255. The initial value which we pass as second param should fall within this range.
We use the above constructor to create our three AWT Scrollbar components. Since our scroll bars are to pick RGB color component value, while we code, we will set matching background color for the scroll bars via setBackground method call. Also, we call the method setBlockIncrement for all three scroll controls to set a block increment/decrement of 5. How to perform Block Increment or Decrement was shown in the very first picture.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//Sample 03: Create Two Panels Panel TopPanel = new Panel(); MidPanel = new Panel(); //Sample 04: Create Scroll Bars RedBar = new Scrollbar(Scrollbar.HORIZONTAL, 0, 5, 0, 255); RedBar.setBackground(Color.RED); BlueBar = new Scrollbar(Scrollbar.HORIZONTAL, 0, 5, 0, 255); BlueBar.setBackground(Color.BLUE); GreenBar = new Scrollbar(Scrollbar.HORIZONTAL, 0, 5, 0, 255); GreenBar.setBackground(Color.GREEN); RedBar.setBlockIncrement(5); BlueBar.setBlockIncrement(5); GreenBar.setBlockIncrement(5); |
6. Add Three Scrollbars
Now all three AWT Scrollbars are ready. We create a panel with 3 rows, 1 column grid, and add all our three scroll controls to it. Later, we will add this panel to the North part of our frame window. Code snippet is below:
1 2 3 4 5 |
//Sample 04: Add Scrollbars to Top Panel TopPanel.setLayout(new GridLayout(3, 1)); TopPanel.add(RedBar); TopPanel.add(BlueBar); TopPanel.add(GreenBar); |
7. Add Components to Frame
Have a look at the example UI in picture in section 2. We have all the UI components except the checkbox. Now we will finish the user interface by adding all the components to the AWT Frame Window. Note, we add the check box towards the south which performs Gray-Scale coloring.
1 2 3 4 5 |
//Sample 05: Add Controls to Frame Window chkGrayScale = new Checkbox("Gray Scale"); add(BorderLayout.SOUTH, chkGrayScale); add(BorderLayout.NORTH, TopPanel); add(MidPanel); |
8. Register AWT Scrollbar For AdjustmentEvent
We make call to addAdjustmentListener method of the Scrollbar to sign up with the Listener. Our AWT Frame derived class implements AdjustmentListener and hence we pass ‘this’ reference to deal with the AdjustmentEvent in our Frame class itself.
1 2 3 4 |
//Sample 06: Register to get adjustment event RedBar.addAdjustmentListener(this); BlueBar.addAdjustmentListener(this); GreenBar.addAdjustmentListener(this); |
9. Greyscale Color Value
The Grey-Scale intensity will range from 0 to 255. The value 0 denotes Black and 255 denotes pure white. And the value between this range tells the grey-scale intensity. The below picture shows it:

For a grey-scale value, the RGB (Red-Green-Blue) component should have same values and it will fit inside the range 0-255. The function setGrayScale
custom function accepts an integer param and sets that to all three Scrollbar controls by calling the
setValue method. Below is the custom function:
1 2 3 4 5 6 7 |
//Sample 07: Method to Set GrayScale Color Value //For Grayscale RGB Component will hold same value private void setGrayScale(int GrayScaleValue) { GreenBar.setValue(GrayScaleValue); RedBar.setValue(GrayScaleValue); BlueBar.setValue(GrayScaleValue); } |
10. Read AWT Scrollbar Values
In the
adjustmentValueChanged handler function, we retrieve the value from all three AWT Scrollbars by calling the
getValue function. The function will return a value between 0-255 as this is what the range we fixed while constructing the Scrollbars. For example, to get the red component value, we call red = RedBar.getValue();
The same way, we get other color component values from other two Scroll bars.
The handler function receives an
AdjustmentEvent and we can get the owner of the event by calling the
getAdjustable method. Once we know the event source, we make call to the specific Scrollbar component. In the below code, after line 33, we will have red, green, blue component values in the integer variables. We use these values to construct the AWT Color
object (Line 35) and assign it as a background color for the Middle panel (Line 36).
At line 8, we ensure Gray-scale is not turned ON and then read all three Red, Green, Blue component values. Remember, JAVA AWT calls the
adjustmentValueChanged for all three Scrollbars as all are registered with the Frame Window. Say, for example, let us say user dragged the Red Scrollbar; here we read the value from all three RGB Scrollbars not just the Red one. This way, we will not disturb the existing position of other two Scrollbar and construct correct AWT Color
object.
Line 16-31 is for setting the Grey-Scale value. It does not matter what AWT Scrollbar user drags; we maintain all three Scrollbar at the same level by calling the custom function setGrayScale
. This function takes an integer values and keeps thumb position of all three RGB Scrollbars at the same level. Below is the code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
//Sample 07: Method to Set GrayScale Color Value //For Grayscale RGB Component will hold same value private void setGrayScale(int GrayScaleValue) { GreenBar.setValue(GrayScaleValue); RedBar.setValue(GrayScaleValue); BlueBar.setValue(GrayScaleValue); } //Sample 08: Change Panel Background public void adjustmentValueChanged(AdjustmentEvent e) { //8.1: Initialize RGB Components int red, blue, green; red = green = blue = 0; //8.2: When Grey Scale is not set if (chkGrayScale.getState() != true) { red = RedBar.getValue(); blue = BlueBar.getValue(); green = GreenBar.getValue(); } else { //8.3: For Gray scale Maintain All RGB @ same value if (e.getAdjustable() == RedBar) { red = blue = green = RedBar.getValue(); setGrayScale(red); } if (e.getAdjustable() == BlueBar) { blue = green = red = BlueBar.getValue(); setGrayScale(blue); } if (e.getAdjustable() == GreenBar) { green = red = blue = GreenBar.getValue(); setGrayScale(green); } } //8.4: Create Color Component and Set it to MidPanel Color rgbColor = new Color(red, green, blue); MidPanel.setBackground(rgbColor); } |
11. Code Reference
11.1 MainEntryAWT.java
1 2 3 4 5 6 7 8 9 10 11 12 |
package AwtDemoPkg; import java.awt.Frame; public class MainEntryAwt { public static void main(String[] args) { //Sample 03: Make the FrameWindow Visible AWTScrollbarExample fw = new AWTScrollbarExample("JSplitPane Example"); fw.setVisible(true); } } |
11.2 AWTScrollbarExample.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
package AwtDemoPkg; import java.awt.BorderLayout; import java.awt.Checkbox; import java.awt.Color; import java.awt.Frame; import java.awt.GridLayout; import java.awt.Panel; import java.awt.Scrollbar; import java.awt.event.AdjustmentEvent; import java.awt.event.AdjustmentListener; import java.awt.event.WindowEvent; import java.awt.event.WindowListener; //Sample 01: Get Adjustment Listener Support //To Handle AdjustmentEvent public class AWTScrollbarExample extends Frame implements WindowListener, AdjustmentListener { //Sample 02: Class Members Checkbox chkGrayScale; Panel MidPanel; Scrollbar RedBar; Scrollbar BlueBar; Scrollbar GreenBar; public AWTScrollbarExample(String FrameTitle) { //Display the Frame Window super(FrameTitle); setSize(500, 250); setLocation(100,100); addWindowListener(this); //Sample 03: Create Two Panels Panel TopPanel = new Panel(); MidPanel = new Panel(); //Sample 04: Create Scroll Bars RedBar = new Scrollbar(Scrollbar.HORIZONTAL, 0, 5, 0, 255); RedBar.setBackground(Color.RED); BlueBar = new Scrollbar(Scrollbar.HORIZONTAL, 0, 5, 0, 255); BlueBar.setBackground(Color.BLUE); GreenBar = new Scrollbar(Scrollbar.HORIZONTAL, 0, 5, 0, 255); GreenBar.setBackground(Color.GREEN); RedBar.setBlockIncrement(5); BlueBar.setBlockIncrement(5); GreenBar.setBlockIncrement(5); //Sample 04: Add Scrollbars to Top Panel TopPanel.setLayout(new GridLayout(3, 1)); TopPanel.add(RedBar); TopPanel.add(BlueBar); TopPanel.add(GreenBar); //Sample 05: Add Controls to Frame Window chkGrayScale = new Checkbox("Gray Scale"); add(BorderLayout.SOUTH, chkGrayScale); add(BorderLayout.NORTH, TopPanel); add(MidPanel); //Sample 06: Register to get adjustment event RedBar.addAdjustmentListener(this); BlueBar.addAdjustmentListener(this); GreenBar.addAdjustmentListener(this); } //Sample 07: Method to Set GrayScale Color Value //For Grayscale RGB Component will hold same value private void setGrayScale(int GrayScaleValue) { GreenBar.setValue(GrayScaleValue); RedBar.setValue(GrayScaleValue); BlueBar.setValue(GrayScaleValue); } public void windowOpened(WindowEvent e) {} public void windowClosed(WindowEvent e) {} public void windowIconified(WindowEvent e) {} public void windowDeiconified(WindowEvent e) {} public void windowActivated(WindowEvent e) {} public void windowDeactivated(WindowEvent e) {} public void windowClosing(WindowEvent e) { this.dispose(); } //Sample 08: Change Panel Background public void adjustmentValueChanged(AdjustmentEvent e) { //8.1: Initialize RGB Components int red, blue, green; red = green = blue = 0; //8.2: When Grey Scale is not set if (chkGrayScale.getState() != true) { red = RedBar.getValue(); blue = BlueBar.getValue(); green = GreenBar.getValue(); } else { //8.3: For Gray scale Maintain All RGB @ same value if (e.getAdjustable() == RedBar) { red = blue = green = RedBar.getValue(); setGrayScale(red); } if (e.getAdjustable() == BlueBar) { blue = green = red = BlueBar.getValue(); setGrayScale(blue); } if (e.getAdjustable() == GreenBar) { green = red = blue = GreenBar.getValue(); setGrayScale(green); } } //8.4: Create Color Component and Set it to MidPanel Color rgbColor = new Color(red, green, blue); MidPanel.setBackground(rgbColor); } } |
12. AWT Scrollbar Component – Youtube Demo
Note: The you tube video contains older version of this example which has bug. The above sample code has the fix.
Categories: AWT
Tags: AdjustmentEvent, AdjustmentListener, Scrollbar.HORIZONTAL, Scrollbar::getValue, Scrollbar::setValue, setBackground, setBlockIncrement