How to add sexy on/off sliders?

Question

I'd like to add an on/off like toggle switch in a Java app. Do I need to build them up from Swing Sliders or is there something closer already?

http://www.premiumpixels.com/freebies/onoff-switches-and-toggles-psd/

http://modmyi.com/forums/iphone-2g-3g-3gs-ipod-touch-1g-2g-3g-new-skins-themes-launches/447951-release-off-slider-lockscreen.html

Answer 1

Just a little example, perhaps it help you.

public class Popup extends JFrame {

    public Popup() {
        setBounds( 100, 100, 300, 120 );
        setDefaultCloseOperation( 3 );
        getContentPane().setLayout( new FlowLayout( FlowLayout.LEADING, 10, 10 ) );
        getContentPane().add( new JSwitchBox( "on", "off" ));
        getContentPane().add( new JSwitchBox( "yes", "no" ));
        getContentPane().add( new JSwitchBox( "true", "false" ));
        getContentPane().add( new JSwitchBox( "on", "off" ));
        getContentPane().add( new JSwitchBox( "yes", "no" ));
        getContentPane().add( new JSwitchBox( "true", "false" ));
    }

    public static void main( String[] args ) {
        SwingUtilities.invokeLater( new Runnable() {
            @Override
            public void run() {
                new Popup().setVisible( true );
            }
        });
    }

    public class JSwitchBox extends AbstractButton{
        private Color colorBright = new Color(220,220,220);
        private Color colorDark = new Color(150,150,150);
        private Color black  = new Color(0,0,0,100);
        private Color white = new Color(255,255,255,100);
        private Color light = new Color(220,220,220,100);
        private Color red = new Color(160,130,130);
        private Color green = new Color(130,160,130);
        private Font font = new JLabel().getFont();
        private int gap = 5;
        private int globalWitdh = 0;
        private final String trueLabel;
        private final String falseLabel;
        private Dimension thumbBounds;
        private Rectangle2D bounds;
        private int max;


        public JSwitchBox(String trueLabel, String falseLabel) {
            this.trueLabel = trueLabel;
            this.falseLabel = falseLabel;
            double trueLenth = getFontMetrics( getFont() ).getStringBounds( trueLabel, getGraphics() ).getWidth();
            double falseLenght = getFontMetrics( getFont() ).getStringBounds( falseLabel, getGraphics() ).getWidth();
            max = (int)Math.max( trueLenth, falseLenght );
            gap =  Math.max( 5, 5+(int)Math.abs(trueLenth - falseLenght ) ); 
            thumbBounds  = new Dimension(max+gap*2,20);
            globalWitdh =  max + thumbBounds.width+gap*2;
            setModel( new DefaultButtonModel() );
            setSelected( false );
            addMouseListener( new MouseAdapter() {
                @Override
                public void mouseReleased( MouseEvent e ) {
                    if(new Rectangle( getPreferredSize() ).contains( e.getPoint() )) {
                        setSelected( !isSelected() );
                    }
                }
            });
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(globalWitdh, thumbBounds.height);
        }

        @Override
        public void setSelected( boolean b ) {
            if(b){
                setText( trueLabel );
                setBackground( green );
            } else {
                setBackground( red );
                setText( falseLabel );
            }
            super.setSelected( b );
        }
        @Override
        public void setText( String text ) {
            super.setText( text );
        }

        @Override
        public int getHeight() {
            return getPreferredSize().height;
        }

        @Override
        public int getWidth() {
            return getPreferredSize().width;
        }

        @Override
        public Font getFont() {
            return font;
        }

        @Override
        protected void paintComponent( Graphics g ) {
            g.setColor( getBackground() );
            g.fillRoundRect( 1, 1, getWidth()-2 - 1, getHeight()-2 ,2 ,2 );
            Graphics2D g2 = (Graphics2D)g;

            g2.setColor( black );
            g2.drawRoundRect( 1, 1, getWidth()-2 - 1, getHeight()-2 - 1, 2,2 );
            g2.setColor( white );
            g2.drawRoundRect( 1 + 1, 1 + 1, getWidth()-2 - 3, getHeight()-2 - 3, 2,2 );

            int x = 0;
            int lx = 0;
            if(isSelected()) {
                lx = thumbBounds.width;
            } else {
                x = thumbBounds.width;
            }
            int y = 0;
            int w = thumbBounds.width;
            int h = thumbBounds.height;

            g2.setPaint( new GradientPaint(x, (int)(y-0.1*h), colorDark , x, (int)(y+1.2*h), light) );
            g2.fillRect( x, y, w, h );
            g2.setPaint( new GradientPaint(x, (int)(y+.65*h), light , x, (int)(y+1.3*h), colorDark) );
            g2.fillRect( x, (int)(y+.65*h), w, (int)(h-.65*h) );

            if (w>14){
                int size = 10;
                g2.setColor( colorBright );
                g2.fillRect(x+w/2-size/2,y+h/2-size/2, size, size);
                g2.setColor( new Color(120,120,120));
                g2.fillRect(x+w/2-4,h/2-4, 2, 2);
                g2.fillRect(x+w/2-1,h/2-4, 2, 2);
                g2.fillRect(x+w/2+2,h/2-4, 2, 2);
                g2.setColor( colorDark );
                g2.fillRect(x+w/2-4,h/2-2, 2, 6);
                g2.fillRect(x+w/2-1,h/2-2, 2, 6);
                g2.fillRect(x+w/2+2,h/2-2, 2, 6);
                g2.setColor( new Color(170,170,170));
                g2.fillRect(x+w/2-4,h/2+2, 2, 2);
                g2.fillRect(x+w/2-1,h/2+2, 2, 2);
                g2.fillRect(x+w/2+2,h/2+2, 2, 2);
            }

            g2.setColor( black );
            g2.drawRoundRect( x, y, w - 1, h - 1, 2,2 );
            g2.setColor( white );
            g2.drawRoundRect( x + 1, y + 1, w - 3, h - 3, 2,2 );

            g2.setColor( black.darker() );
            g2.setRenderingHint( RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON );
            g2.setFont( getFont() );
            g2.drawString( getText(), lx+gap, y+h/2+h/4 );
        }
    }
}

Answer 2

use built-in component JCheckBox.

JCheckBox cb = new JCheckBox(createImageIcon("off-image.gif", "Click To Turn On"));
cb.setSelectedIcon(createImageIcon("on-image.gif", "Click To Turn Off"));