Sexy Swing App – The Bottom Bar

In the last installment of “Sexy Swing App”, I’ll show you how to create a bottom bar component as defined by Apple in their Human Interface Guidelines here.

There’s not much to this component, just a gradient and a compound line border that changes based on the focus state of the parent window. Below I’ve provided only the code related to the rendering of the bottom bar (i.e. not the code that lays out the bottom bar’s components). Here’s the custom JPanel that handles this rendering:

public class BottomBarPanel extends JPanel {

        private static final Color OS_X_BOTTOM_BAR_ACTIVE_TOP_COLOR =
                new Color(0xbbbbbb);
        private static final Color OS_X_BOTTOM_BAR_ACTIVE_BOTTOM_COLOR =
                new Color(0x969696);
        private static final Color OS_X_BOTTOM_BAR_INACTIVE_TOP_COLOR =
                new Color(0xe3e3e3);
        private static final Color OS_X_BOTTOM_BAR_INACTIVE_BOTTOM_COLOR =
                new Color(0xcfcfcf);
        private static final Color OS_X_BOTTOM_BAR_BORDER_HIGHLIGHT_COLOR =
                new Color(0xd8d8d8);
        private static final Color OS_X_UNIFIED_TOOLBAR_FOCUSED_BOTTOM_COLOR =
                new Color(64, 64, 64);
        private static final Color OS_X_UNIFIED_TOOLBAR_UNFOCUSED_BORDER_COLOR =
                new Color(135, 135, 135);

        public BottomBarPanel() {
            setBorder(BorderFactory.createMatteBorder(1,0,0,0,
                   OS_X_UNIFIED_TOOLBAR_FOCUSED_BOTTOM_COLOR));
        }

        @Override
        protected void paintComponent(Graphics g) {
            Graphics2D graphics = (Graphics2D) g.create();

            Window window = SwingUtilities.getWindowAncestor(this);
            boolean hasFoucs = window != null && window.isFocused();

            Color topColor = hasFoucs
                    ? OS_X_BOTTOM_BAR_ACTIVE_TOP_COLOR
                    : OS_X_BOTTOM_BAR_INACTIVE_TOP_COLOR;
            Color bottomColor = hasFoucs
                    ? OS_X_BOTTOM_BAR_ACTIVE_BOTTOM_COLOR
                    : OS_X_BOTTOM_BAR_INACTIVE_BOTTOM_COLOR;

            Paint paint = new GradientPaint(0, 0, topColor,
                    0, getHeight(), bottomColor);

            graphics.setPaint(paint);
            graphics.fillRect(0,0,getWidth(),getHeight());

            graphics.dispose();
        }

        @Override
        public Border getBorder() {
            Window window = SwingUtilities.getWindowAncestor(this);
            Border outterBorder = window != null && window.isFocused()
                    ? BorderFactory.createMatteBorder(1,0,0,0,
                          OS_X_UNIFIED_TOOLBAR_FOCUSED_BOTTOM_COLOR)
                    : BorderFactory.createMatteBorder(1,0,0,0,
                          OS_X_UNIFIED_TOOLBAR_UNFOCUSED_BORDER_COLOR);
            Border innerBorder = BorderFactory.createMatteBorder(1,0,0,0,
                   OS_X_BOTTOM_BAR_BORDER_HIGHLIGHT_COLOR);
            return BorderFactory.createCompoundBorder(outterBorder, innerBorder);
        }

    }

    public enum Size {

        SMALL(22), LARGE(32);

        private int fHeight;

        Size(int height) {
            fHeight = height;
        }

        public int getHeight() {
            return fHeight;
        }
    }

Notice the top border is actually two single pixel lines – the bottom line acts as an inverse shadow, providing a slight etched look. As I’ve said before, it’s these subtle details that make or break the believability of your user interface.

Also notice that I’ve encapsulated the two size variants of a bottom bar in an enum, which isn’t yet used here. Ideally the bottom bar’s preferred height would be derived from the fHeight property of Size enum.

One parting note – if you prefer, as I do, to reduce the amount of extending your code does, I’d recommend using SwingX. Much of the extending I’ve done in this series can be reduced to Painters in SwingX.

Advertisements