How to implement a material design circular progress bar in android

Question

I want to make a material design circular progress bar like the one in Inbox by Gmail android app  How do I achieve this  in pre-lollipop devices   Am trying to achieve a similar effect like this  Inbox by Gmail material design circular progress bar

User · Accepted Answer

Update

As of 2019 this can be easily achieved using ProgressIndicator, in Material Components library, used with the Widget.MaterialComponents.ProgressIndicator.Circular.Indeterminate style.

For more details please check Gabriele Mariotti's answer below.

Old implementation

Here is an awesome implementation of the material design circular intermediate progress bar https://gist.github.com/castorflex/4e46a9dc2c3a4245a28e. The implementation only lacks the ability add various colors like in inbox by android app but this does a pretty great job.

User · Answer

Nice implementation for material design circular progress bar  from rahatarmanahmed CircularProgressView     lt com github rahatarmanahmed cpv CircularProgressView     xmlns app  http   schemas android com apk res-auto      android id    id progress view      android layout width  40dp      android layout height  40dp      app cpv indeterminate  true   gt

User · Answer

I ve backported the three Material Design progress drawables to Android 4 0  which can be used as a drop-in replacement for regular ProgressBar  with exactly the same appearance   These drawables also backported the tinting APIs  and RTL support   and uses  colorControlActivated as the default tint  A MaterialProgressBar widget which extends ProgressBar has also been introduced for convenience   DreaminginCodeZH MaterialProgressBar  This project has also been adopted by afollestad material-dialogs for progress dialog   On Android 4 4 4     On Android 5 1 1

User · Answer

The platform uses a vector drawable  so you can t reuse it as in in older versions  However  the support lib v4 contains a backport of this drawable    http   androidxref com 5 1 0 r1 xref frameworks support v4 java android support v4 widget MaterialProgressDrawable java It has a  hide annotation  it is here for the SwipeRefreshLayout   but nothing prevents you from copying this class in your codebase

User · Answer

lt ProgressBar android id    id loading spinner  android layout width  wrap content  android layout height  wrap content  android indeterminateTintMode  src atop  android indeterminateTint   color your customized color  android layout gravity  center    gt    The effect looks like this

User · Answer

With the Material Components library you can use the CircularProgressIndicator  Something like   lt com google android material progressindicator CircularProgressIndicator       android indeterminate  quot true quot                  android layout width  quot wrap content quot        android layout height  quot wrap content quot        app indicatorColor  quot  array progress colors quot        app indicatorSize  quot xxdp quot        app showAnimationBehavior  quot inward quot   gt   where array progress colors is an array with the colors     lt integer-array name  quot progress colors quot  gt       lt item gt  color yellow 500 lt  item gt       lt item gt  color blue 700 lt  item gt       lt item gt  color red 500 lt  item gt     lt  integer-array gt    Note  it requires at least the version 1 3 0

User · Answer

Was looking for a way to do this using simple xml  but couldn t find any helpful answers  so came up with this   This works on pre-lollipop versions too  and is pretty close to the material design progress bar  You just need to use this drawable as the indeterminate drawable in the ProgressBar layout    lt  xml version  1 0  encoding  utf-8   gt  lt  -- lt layer-list gt -- gt   lt rotate xmlns android  http   schemas android com apk res android      android fromDegrees  0      android toDegrees  360  gt       lt layer-list gt           lt item gt               lt rotate xmlns android  http   schemas android com apk res android                  android fromDegrees  -90                  android toDegrees  -90  gt                   lt shape                     android innerRadiusRatio  2 5                      android shape  ring                      android thickness  2dp                      android useLevel  true  gt  lt  -- this line fixes the issue for lollipop api 21 -- gt                        lt gradient                         android angle  0                          android endColor   007DD6                          android startColor   007DD6                          android type  sweep                          android useLevel  false    gt                   lt  shape gt               lt  rotate gt           lt  item gt           lt item gt               lt rotate xmlns android  http   schemas android com apk res android                  android fromDegrees  0                  android toDegrees  270  gt                   lt shape                     android innerRadiusRatio  2 6                      android shape  ring                      android thickness  4dp                      android useLevel  true  gt  lt  -- this line fixes the issue for lollipop api 21 -- gt                       lt gradient                         android angle  0                          android centerColor   FFF                          android endColor   FFF                          android startColor   FFF                          android useLevel  false    gt                   lt  shape gt               lt  rotate gt           lt  item gt       lt  layer-list gt   lt  rotate gt    set the above drawable in ProgressBar as follows     android indeterminatedrawable   drawable above drawable

User · Answer

In addition to cozeJ4 s answer  here s updated version of that gist  Original one lacked imports and contained some errors  This one is ready to use

[android] How to implement a material design circular progress bar in android

Examples related to android

Examples related to material-design

Examples related to android-progressbar