Android Material Progress Indicator

A quick look at the new material library component for showing progress to the user

Photo by Isaac Smith on Unsplash

The Progress Indicator

This component has been included as one of the material design guidelines a long time ago. Unfortunately, a proper implementation with the mentioned material style never had been published for Android.

Types

The ProgressIndicator comes in two different loading types.

Determinate

Determinate means that you define the progress by yourself programmatically. You should use this type of progress indicator whenever you can calculate your progress and therefore can set a specific value to your ProgressIndicator .

Indeterminate

Indeterminate is equivalent to an infinite loading indicator and is just running forever. You should use this type of the ProgressIndicator whenever you want to let your user know that something is happening in the background, but you don’t know how long it will take.

Shapes

The ProgressIndicator comes in two different shapes.

CircularProgressIndicator

The circular shape of the CircularProgressIndicator

LinearProgressIndicator

The linear shape of the LinearProgressIndicator

Shape Corners

You can set both of these shapes to use round corners with including the app:trackCornerRadius tag in your respective XML component declaration like so:

Changing the Visibility

Changing the visibility is probably the most used function for a progress component whether it is that you want to show your progress indicator because you started loading data from the backend or just finished loading and want to hide it again.

  • setVisibility: You can set the visibility directly to the class. As already stated, watch out at fast loading times that your progress bar doesn’t flicker.
  • isVisible: true sets the ProgressIndicator to view type VISIBLE, false sets the indicator to view type GONE
  • isInvisible: true sets the ProgressIndicator to view type INVISIBLE , false sets the indicator to view type VISIBLE

⭐️ Bonus: Changing visibility with animations

If you want your ProgressIndicator to animate for showing or hiding, you can set the app:showAnimationBehavior and app:hideAnimationBehavior. On default, the value is set to noneand therefore you will see no animation.

Conclusion

As we saw in this article, the ProgressIndicator offers various possibilities for styling and adaptation.

Passionated Mobile & Backend Developer, besides tech I write about fitness, health, and self-development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store