Cool Accordian Outlookbar in Swing

A while back I created a component that is a simple accordian component that can be used in any swing application.

I have massively improved this component. Let’s have a look at it :



Improvements are :

  • Animation! Yes animation in a Swing application! The segments actually slide up and down.
  • Inner accordians. You can imbed an accordian in an accordian.
  • Icon support
  • Look and feel options. Background and arrows.

Here are some more options :

The normal plain look :


Gradient on top level and no icons :


How to use this

Using this component is fairly straight forward. First construct a SideBar object. You define :

  • Button type
  • Text
  • Texture Type
  • Width
  • Animation Mode

Example :


All top level SideBars should have SideBarMode.TOP_LEVEL set. All embedded sidebars should have SideBarMode.INNER_LEVEL set.

Next, add some SidebarSections. These objects define the subsections or segments that make up the accordian component. The SidebarSections need a reference to the parent Sidebar object, a title, and the component that is to be displaed in its expanded state (this might be a JList or a JTree).

Download Now

  • The source code for this component can be found on the Swing Library Github page . Go to the DownloadZIP button and download the library.


  • Run the class SliderTester to see the accordian component in action and see how this component works

Example Configuration Code

This is the code I used for the first screenshot

Icons used in this component example are ‘Must Have Icons’ by VisualPharm. URL :

Posted in Swing Components | Tagged , | 3 Comments

3 Responses to Cool Accordian Outlookbar in Swing

  1. Alain Rapaz says:

    I have downloaded the sources from Github, but it seem not to be the version you describe here.
    No Texture, for example.
    Where could I find the latest code ?


    • felixzacat says:

      Sorry, the code snippet there is a bit out of date. Look at the class in the downloaded ZIP. It should show you how to setup the component.

  2. Juan Fiallo says:

    I have one question, how I know which SideBarSection is selected to return de value of the text.

    Thanks Juan.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">