PaintCode Tutorial: Custom Progress Bar

Welcome back to our PaintCode tutorial series!

PaintCode is a neat app where you can draw user interfaces like in Photoshop – but instead of generating an image, it generates Core Graphics code.

In the first part of the series, we showed you how you could use PaintCode to create beautiful resizable and recolorable buttons.

In this tutorial, you’ll create your own custom progress bar design using PaintCode, and then integrate it into your app.

It helps if you complete part 1 first, but if you would rather just skip that one and focus on progress bars, that is OK. This tutorial works fine standalone – just make sure you have PaintCode installed, and download this starter project I’ve created for you.

Without further ado, open up PaintCode to get started on your next dynamic UI control!

Getting Started

Open a new document in PaintCode, click File\Rename…, name it DynamicProgressIndicator, and hit return.

In this tutorial, you’ll be working on the non-retina version of the control. If you’d like to see the retina version at any time, click the Retina button, next to the Canvas button, at the bottom right corner of the PaintCode window.

If you have the code view open, the buttons will be above the white panel at the bottom, as shown in the screenshot below:

Next, you’re going to change the canvas size to a smaller size more appropriate for the progress bar you’re creating, and also change the background color to a nice dark color that the control you’re about to make would look especially nice on.

To do this, click the Canvas button to make the canvas 320 pixels by 70 pixels.Change the Underlay color to a dark grey as shown in the screenshot below. If you want the exact color, set R=45, G=45, B=45, and A=255.

Now that the canvas is ready, you’re all set to create the basic shapes, gradients, and colors of your progress bar.

Select the Round Rect tool from the toolbar and draw a rounded rectangle on your canvas to represent the outside box of your control. With the rounded rectangle shape selected, set the shape’s properties to the following values:

• X : 2
• Y : 1
• Width : 316
• Height : 34
• Radius : 4

Your shape’s properties panel should look like the following:

With the rectangle still selected, find the Stroke section in the sidebar, and set it to No Stroke. Also, click the box next to Fill, choose Add New Gradient…, and click the left hand color stop. Double click the color, and set the RGB values to 82 82 82. Now click the right hand color stop and set the RGB values to 106 106 106. Rename the gradient Outer Rect Gradient.

Note: If you ever need to edit your PaintCode gradients, colors, or shadows, you can find them at the bottom of the left panel under the appropriately named tabs. Simply double click the name of an item to bring up the edit dialog for that particular element.

Close that dialog, and back in the rectangle settings look for the Outer Shadow section. Add a dark Outer Shadow with RGB values of 51 51 51. Name the shadow DarkShadow, as shown below:

Next, add a light Inner Shadow with RGB values of 171 171 171. Name it LightShadow, as demonstrated in the following screenshot:

Change the name of the Rounded Rectangle to Border. It’s always a good idea to give each element of your control a descriptive name so that you can easily identify each part later when you hook up the control in your app.

Now that the basic outline of your progress bar is done, you’ll need to add the outline of the progress track.

Drawing the Track and Track Background

Click the Round Rect tool again and draw another rounded rectangle on your canvas. Set the new shape’s properties as follows:

• X : 12
• Y : 10
• Width : 292
• Height : 14
• Radius : 7

Set the Fill of your shape as a new gradient with a left color stop of RGB 48 48 48 and a right color stop of RGB 63 63 63, as shown below:

Set the Outer Shadow to LightShadow, the Inner Shadow to DarkShadow, and finally rename the shape to ProgressTrack.

At this point, your control should look like the following:

The final visual component to add is the active progress track.

Choose the Round Rect tool again, drag out a rectangle and set its properties as follows:

• X : 14
• Y : 12
• Width : 288
• Height : 10
• Radius : 5

This final shape will be 2 pixels in from the left edge of ProgressTrack and centered vertically.

Note: If you were to try to draw this shape out manually instead of typing in the numbers like you did here, you might find it hard to do because the progress track is so similar in size to the track background.

However, there are two things you could do in this situation (besides modifying the numbers like you did here): 1) Select the track background, copy it and paste it and modify the copy to be a bit smaller, or 2) Pinch-zoom on your trackpad to zoom in on the shape you’re working with so drawing is easier.

To make the active progress track stand out, change the Fill to a green color — RGB 0 226 0. Or if you prefer another color, feel free to choose your own!

Finally, change the Outer Shadow and Inner Shadow of your shape to No Shadow, remove the Stroke and name your shape ProgressTrackActive. Your control should now look like the following:

It looks great — but to make it come alive, you need to add some components that will make your control respond dynamically.