Scrollable Toolbar | Tech Tips & Tricks

Create A Sideway Scrolling Toolbar Using Java

Posted by admin on

December 5, 2009

Suppose you have a toolbar (of JPanel type) with so many icons embedded in it and when you resize your JFrame to a smaller size, not all the icons in your toolbar get displayed. What should you do? The solution I did was to add a left and right button as shown in the above toolbar image so that when you click either the left or right button, it will scroll sideways to display the next and/or previous icon of the toolbar (whichever button is pressed).

The toolbar container is placed within a scrollable pane while the scrollable pane is placed insider another JPanel class I created called ToolbarScroolablePanel wherein the left and right buttons are also added. I used a BorderLayout to place the toolbar in the center while the 2 buttons would be on the east and west position respectively.

If you look at the code closely, you may notice I used an Observer class called MyObserver. This is a pretty handy class for calling code found in other classes so you are spared the tedious task of calling deep level getParent() methods just to gain access to the container class. Now, this code only contains the panel class for the scrollable toolbar. When you use this class, just create an observer object in a static class and place it in the ToolbarScrollablePanel constructor which the syntax in the code means.

And in your JFrame class, you create a variable and instantiate the observer class like this:

MyObserver obs = new MyObserver();

Then from within the JFrame class, you add a ComponentListener and override the componentResized() method so that whenever the JFrame window gets resized, it will check if the toolbar’s visible area can or cannot display all toolbar icons to the screen which will be the basis to display the left and right buttons to scroll your toolbar icons.

jFrame1.addComponentListener(new ComponentListener() {
    @Override
    public void componentResized(ComponentEvent e) {
       obs.setControlName("RESIZE_TOLLBAR");
    }
});

Here are the source codes for both the ToolbarScrollablePanel and MyObserver class

public class ToolbarScrollablePanel extends JPanel implements Observer {
 
    private int x;
    private int totalwidth; // total width of the toolbar menu
    private Point point;
    private final int MOVEX = 30;
    private JPanel toolbar;
 
    public ToolbarScrollablePanel(JPanel toolbar) {
        super();
        initComponents();
 
        this.toolbar = toolbar;
        CurrentTransaction.processingObservable.addObserver(this);
        point = new Point(0, 0);
 
        jPanel1.add(toolbar, BorderLayout.NORTH);
        CurrentTransaction.processingObservable.setControlName("RESIZE_TOOLBAR");
    }
 
    @SuppressWarnings("unchecked")
    private void initComponents() {
 
        jButton1 = new javax.swing.JButton();
        jButton2 = new javax.swing.JButton();
        jScrollPane1 = new javax.swing.JScrollPane();
        jPanel1 = new javax.swing.JPanel();
 
        setLayout(new java.awt.BorderLayout());
 
        jButton1.setText("<");
        jButton1.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButton1ActionPerformed(evt);
            }
        });
        add(jButton1, java.awt.BorderLayout.LINE_START);
 
        jButton2.setText(">");
        jButton2.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButton2ActionPerformed(evt);
            }
        });
        add(jButton2, java.awt.BorderLayout.LINE_END);
 
        jScrollPane1.setHorizontalScrollBarPolicy(javax.swing.ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER);
        jScrollPane1.setVerticalScrollBarPolicy(javax.swing.ScrollPaneConstants.VERTICAL_SCROLLBAR_NEVER);
 
        jPanel1.setLayout(new java.awt.BorderLayout());
        jScrollPane1.setViewportView(jPanel1);
 
        add(jScrollPane1, java.awt.BorderLayout.CENTER);
    }//                         
 
    private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) {
        // TODO add your handling code here:
        if (totalwidth >= (x + jScrollPane1.getVisibleRect().width)) {
            // do nothing
        } else {
            x += MOVEX;
            point.x = x;
            jScrollPane1.getViewport().setViewPosition(point);
        }
    }                                        
 
    private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
        // TODO add your handling code here:
        if (x != 0) {
            x -= MOVEX;
            point.x = x;
            jScrollPane1.getViewport().setViewPosition(point);
        }
    }                                        
 
    // Variables declaration - do not modify
    private javax.swing.JButton jButton1;
    private javax.swing.JButton jButton2;
    private javax.swing.JPanel jPanel1;
    private javax.swing.JScrollPane jScrollPane1;
    // End of variables declaration                   
 
    @Override
    public void update(Observable o, Object arg) {
        if (arg.toString().equalsIgnoreCase("RESIZE_TOOLBAR")) {
            totalwidth = toolbar.getBounds().width;
            if (getBounds().width > totalwidth) {
                // added left/right buttons for side scrolling
                jButton1.setVisible(true);
                jButton2.setVisible(true);
            } else {
                jButton1.setVisible(false);
                jButton2.setVisible(false);
                x = 0;
            }
            validate();
        }
    }
}
 
public class MyObserver extends Observable {
    private String controlName = "";
 
    public void setControlName(String c) {
        this.controlName = c;
        setChanged();
        notifyObservers(this.controlName);
    }
 
    public String getControlName() {
        return this.controlName;
    }
}