Scott Violet's Blog

Customizing Ocean Gradients

In my last blog I went over how we were able to make Ocean perform as well, and in some cases better than Steel. In this blog I'm going to cover how you can change the gradients that Ocean draws.

For a quick refresher the gradients in Ocean consist of 4 distinct regions as shown here:

As with other visual properties Ocean determines how to draw this gradient from the defaults table. JButton uses the defaults key "Button.gradient" to get the value that dictates what to draw. The value is a java.util.List consisting of five values. The first value is the percentage (as a Number) of the width (or height) for the first gradient. The second number gives the percentage (again as a Number) of the the width (or height) for the solid region. The remaining three values are the colors: start color for gradient 1, end color for gradient 1 and end color for gradient 2.

The algorithm for drawing a vertical gradient is roughly like:

  List values = ...;
  int gradient1Height = ((Number)values.get(0)).floatValue() * h;
  int solidHeight = ((Number)values.get(1)).floatValue() * h;
  Color c1 = (Color)values.get(2);
  Color c2 = (Color)values.get(3);
  Color c2 = (Color)values.get(4);
  // First gradient
  // Fictional method that draws a gradient of the specified size.
  drawGradient(0, 0, width, gradient1Height, c1, c2);
  // Solid rectangle
  g.setColor(c2);
  fillRect(0, gradient1Height, width, solidHeight);
  // First gradient inverted
  drawGradient(0, gradient1Height + solidHeight, width, gradient1Height, c2, c1);
  // Last gradient
  drawGradient(0, gradient1Height * 2 + solidHeight, width, h - (gradient1Height * 2 + solidHeight), c1, c3);

And the code to initialize the value is roughly like:

  java.util.List buttonGradient = Arrays.asList(
                 new Object[] {new Float(.3f), new Float(0f),
                 new ColorUIResource(0xDDE8F3), getWhite(), getSecondary2() });

Because the colors are not hard coded, you can change the way Ocean looks by changing the value in the defaults table. For example, you can go for the garish:

To the minimalist:

Or a slightly brighter Ocean look:

You can even get a look similar to that used by Incor's Alloy Look and Feel:

Or an XP like gradient:

Ocean Gradient Customizer

If you have 1.5 you can try your hand at a good combination using the Ocean Gradient Customizer. Post your favorite combinations and I'll do a future blog on the various combinations people have come up with.

Comments

• I kind of like these:

  List gradients = new ArrayList(5);
  gradients.add(0.31f);
  gradients.add(0.27f);
  gradients.add(new Color(0xCCFFFF));
  gradients.add(new Color(0x99CCFF));
  gradients.add(new Color(0x99FFCC));

  List gradients = new ArrayList(5);
  gradients.add(0.18f);
  gradients.add(0.17f);
  gradients.add(new Color(0xCCFFFF));
  gradients.add(new Color(0x9999FF));
  gradients.add(new Color(0x6600CC));

  Thanks for the blog.
  Erik

  Posted by: evickroy on September 26, 2005 at 10:57 PM

• Let me try it again...

  
  List gradients = new ArrayList(5);
  gradients.add(0.31f);
  gradients.add(0.27f);
  gradients.add(new Color(0xCCFFFF));
  gradients.add(new Color(0x99CCFF));
  gradients.add(new Color(0x99FFCC));

  List gradients = new ArrayList(5);
  gradients.add(0.18f);
  gradients.add(0.17f);
  gradients.add(new Color(0xCCFFFF));
  gradients.add(new Color(0x9999FF));
  gradients.add(new Color(0x6600CC));

  
  Erik

  Posted by: evickroy on September 26, 2005 at 11:04 PM

• Thanks for the Ocean Gradient Customizer :)
  I've found a little bug. On my system (pl_PL locale) the float value is formatted as "1,00f" (note the comma character), so the automatically generated code is invalid (it calls add(int index, E element) instead of add(E e) :)

  Posted by: kdt on September 28, 2005 at 12:49 PM

• kdt,
  D'OH! I'll fix that in an update shortly. Sorry!
    -Scott

  Posted by: zixle on September 28, 2005 at 04:38 PM

• The Ocean Gradient Customizer is very cool. I do have one question. Is there way to flatten the Ocean theme? Our product needs to run through VNC/RDP/X11 using a limited color pallet. Ocean sees to use more colors then the old Metal. Can I turn off all the gradients somehow?

  Thanks :)
  

  Posted by: aberrant on March 06, 2006 at 02:52 PM

• Hi aberrant,

  A big part of what differentiates Ocean from Steel (code name for previous style) is the gradients. If you don't want the gradients, do you really want ocean? You can switch back to steel by way of setting the system property swing.metalTheme to steel.

  If you want to use Ocean, but disable the gradients, try the following:

  UIManager.getLookAndFeelDefaults().put("Button.gradient", null);

      -Scott

  Posted by: zixle on March 06, 2006 at 04:33 PM

• Thanks Scott :) that works great. I think Ocean is superior to metal, but sometimes people have situations where colors are at a premium. This I can hook to a preference and everyone is happy.

  Posted by: aberrant on March 07, 2006 at 02:36 PM

• aberrant,

  All true. Glad to hear it worked for you!

      -Scott

  Posted by: zixle on March 07, 2006 at 03:01 PM

• Both need a white text color.

  Orange bliss
  List gradients = new ArrayList(5);
  gradients.add(0.63f);
  gradients.add(0.12f);
  gradients.add(new Color(0xFF6600));
  gradients.add(new Color(0xFFCC33));
  gradients.add(new Color(0xFF9933));

  Olive Start Button
  List gradients = new ArrayList(5);
  gradients.add(0.21f);
  gradients.add(0.03f);
  gradients.add(new Color(0x8EA970));
  gradients.add(new Color(0xEDF1C0));
  gradients.add(new Color(0x527D43));
  

  Posted by: aberrant on March 07, 2006 at 03:28 PM

This work is licensed under a Creative Commons License.