Skinning a Slider with Nimbus
Wednesday, August 20th, 2008So time for a example of how to skin a Swing JSlider using the Nimbus Look and Feel and some simple painting code. So this is what we get with the standard Nimbus look slider on a dark grey background.
All of the Nimbus skin comes from a set of properties in the UIManager defaults table. The keys we will be changing for this example are:
- “Slider.thumbWidth”
- “Slider.thumbHeight”
- “Slider:SliderThumb.backgroundPainter”
- “Slider:SliderTrack.backgroundPainter”
You can customize the look for a Component either globally for all instances of the component or locally for a single component instance. To change all sliders globally you can set these properties using UIManager.put(key,value) but in this example I will just set them locally for a single slider. To set UI defaults localy for a single component instance you need to create a UIDefaults map, insert you properties and then set it as a client property on the component:
JSlider slider = new JSlider(0, 100, 50);
UIDefaults sliderDefaults = new UIDefaults();
....
sliderDefaults.put(<<key>>,<<value>>)
....
slider.putClientProperty("Nimbus.Overrides",sliderDefaults);
slider.putClientProperty("Nimbus.Overrides.InheritDefaults",false);
The “Nimbus.Overrides.InheritDefaults” key states if the values in “Nimbus.Overrides” should be merged with the defaults(false) or replace them(true). So next some examples for what properties we should set to skin the slider:
sliderDefaults.put("Slider.thumbWidth", 20);
sliderDefaults.put("Slider.thumbHeight", 20);
sliderDefaults.put("Slider:SliderThumb.backgroundPainter", new Painter() {
public void paint(Graphics2D g, JComponent c, int w, int h) {
g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g.setStroke(new BasicStroke(2f));
g.setColor(Color.RED);
g.fillOval(1, 1, w-3, h-3);
g.setColor(Color.WHITE);
g.drawOval(1, 1, w-3, h-3);
}
});
sliderDefaults.put("Slider:SliderTrack.backgroundPainter", new Painter() {
public void paint(Graphics2D g, JComponent c, int w, int h) {
g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g.setStroke(new BasicStroke(2f));
g.setColor(Color.GRAY);
g.fillRoundRect(0, 6, w-1, 8, 8, 8);
g.setColor(Color.WHITE);
g.drawRoundRect(0, 6, w-1, 8, 8, 8);
}
});
The lets pop that code into a sample app and run it and see what it looks like.
The original Nimbus slider on the bottom and the skinned one on top, both running in the same application. Here is the source so you can try it your self. Let me know if this was useful and what other examples you would like to see.
 SliderSkinDemo.java |
Email Me