This article originally appeared on Nov. 25, 2014.
Mobile applications typically get data from a mobile device’s network connections. At times, that connection is inconsistent and unreliable. Therefore, most apps have some sort of progress meter. Regardless if the app is sending, receiving or just plain displaying data, we want to inform the user of its progress. In place of the old progress bars, software developers now frequently use a circle indicator.
We were in need of a way to represent a wide range of data being displayed in a cross-platform mobile application. Our different attempts at a solution culminated in a circle progress view — something that allows us to clearly state progress while giving additional information to the user. Naturally, a circle allows us to encompass our progress visually around text data.
Working in unison, our designers and developers created the Circle Progress Indicator (CPI). This version of the CPI was developed for the Android platform. The sample project was developed in Android Studio and can be downloaded from our GitHub:
Curved text label
Note: This section requires a working knowledge of developing for Android.
Working with the CPI is fairly straightforward. The first piece we need to look at is the CurvedTextView object. It’s a custom extension of the Android TextView widget and can be found in the root package of the example app. The big takeaway here is that extending TextView gives us access to the overridden onDraw method. Here’s where we do the calculations to best display the text centered on the ring. Using the screen size, length of the text in the box, offsets and radius of our circle, we create the arc and draw it to the screen:
When you declare your custom text view in your activity’s layout, ensure you call it by the name you gave it, including package. For our example app, that looks like this:
If you’re going to set the text on your new widget dynamically, you’ll need to declare in your activity as well. Make sure you declare your new custom object (not the default TextView):
The foreground and background rings are defined in res/drawable/circle_progress_foreground.xml and res/drawable/circle_progress_background.xml, respectively. The drawables provide the developer the ability to modify the CIP size, color, ring thickness, etc., by tweaking the attributes. For example, the foreground circle looks like this:
The tag is where the magic happens. A brief explanation of each attribute inside that tag:
To add a CPI to your activity, you need to add two ProgressBar widgets to your activity’s layout.xml. Using a relative layout, place the ProgressBar widgets on top of each other:
These are standard ProgressBar widgets with nothing outside the ordinary (refer to the developer site for specifics on ProgressBar). The only customization we do here is using our new res drawable backgrounds on the ProgressBar widgets. The first one is set to background and the second is set to foreground. For the example app, we wanted progress to start at the 0 point on the circle, so the rotation tag is set to -90:
The foreground progress circle needs to be declared in your activity, and then you can set it with whatever value you’d like: