Android Material Progress Indicator
A quick look at the new material library component for showing progress to the user
MaterialTickePicker was not the only new component that has been included in this update. We also got the new
ProgressIndicator that we want to talk about in this article.
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.
Therefore you always had to stick to the Androids’ native
ProgressBar and use it with various styles (or another external library) to imitate the material style. Especially the Indeterminate loading style was always quite difficult to implement to look exactly like the guidelines with the native component. But now the official
ProgressIndicatormaterial component comes to the rescue and finally lets us properly implement the proposed guidelines.
ProgressIndicator comes in two different loading types.
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
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.
To bridge the time in which the user may look at a screen that is not loaded, you can simply use this type.
One very nice feature of the
ProgressIndicator is that you can easily switch between these two types. For example, if you declare your
ProgressIndicator to be of the indeterminate type you can just call
setProgressCompat like so to automatically switch to the determinate style:
If you then want to switch back, you first have to make sure that you set the
ProgressIndicator to either
GONE before calling
progressIndidcator.setIndeterminate(false) to set it back to indeterminate. The reason behind that is that you would otherwise get a broken animation between these two states.
ProgressIndicator comes in two different shapes.
Different to the
CircularProgressIndicator , the
LinearProgressIndicator offers two extra animation types for the indeterminate mode. The first one is contiguous which switches between two colors with every animation iteration.
The second one is disjoint. It cycles between three different color segments that are all adjacent to another while the contiguous one always shows only one color per iteration while the background is empty.
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:
This would give your
LinearProgressIndicatorrounded corners with a size of 2dp.
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.
- show/hide: with these two methods the indicator will only be shown after a delay that you can set with
app:showDelay. If you call hide while the delay has not been finished, the view will never be shown. This can be especially beneficial when you know that you only sometimes have longer loading times and otherwise don’t want to show progress to the user because it could cause UI flicker.
- 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
ProgressIndicatorto view type
VISIBLE, false sets the indicator to view type
- isInvisible: true sets the
ProgressIndicatorto view type
INVISIBLE, false sets the indicator to view type
⭐️ Bonus: Changing visibility with animations
If you want your
ProgressIndicator to animate for showing or hiding, you can set the
app:hideAnimationBehavior. On default, the value is set to
noneand therefore you will see no animation.
You can use either
inward as a parameter to let the indicator animate in the respective direction.
Note: The visibility for the
ProgressIndicator will remain unchanged until the animation finishes if you use an animation type other than
setVisibilityAfterHide to set the visibility the
ProgressIndicator should have after finishing the hide animation.
As we saw in this article, the
ProgressIndicator offers various possibilities for styling and adaptation.
To check out further capabilities and settings go and check out the full documentation if you want to have some deeper insights.
Android Material Date Picker and Material Time Picker in practice
A quick overview on how to use the material components for picking date and time
Android Kotlin resolve Custom Views attributes with style
A quick hint on how to safely resolve attributes in your custom views