Changing the barColor for an MX ProgressBar in Flex 4

In Flex 3, which uses the Halo theme, if you wanted to change the color of the bar on a ProgressBar, you would specify a “barColor” style for your ProgressBar. Unfortunately, in Flex 4, the Spark theme that is used by default does not support the barColor style.

To change the color of the bar on a ProgressBar component, you will need to roll a custom skin. Here are the steps:

1. Find the ProgressBarSkin in the SDK: <sdk_home>/frameworks/projects/sparkskins/src/mx/skins/spark and make a copy of it.

2. Rename the new file as something like “CustomProgressBarSkin.mxml”.

3. In CustomProgressBarSkin, find the Rect that represents the fill of the bar:

    <!-- layer 1: fill -->
    <s:Rect left="2" right="2" top="2" bottom="2" >
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                               alpha="1" />
                <s:GradientEntry color="0xCC3399"
                               alpha="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

4. Update the colors in your LinearGradient to your desired colors.

5. In your main application, add the following type selector to your application styles.

        mx|ProgressBar {
            barSkin: ClassReference("CustomProgressBarSkin");
        }

Note: If you want to change the appearance of the ProgressBar track, you’ll need a custom trackSkin. If you want to change the appearance of the indeterminate state of a ProgressBar, you’ll need a custom indeterminateSkin.

Try the sample: ProgressBarExample.swf

Source code: ProgressBarExample.mxml, CustomProgressBarSkin.mxml

2 responses

  1. Nice post .

    Thanks a lot.

  2. Thanks for this post. Saved my time.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: