Implement determinate circular progressbar #51

webmaster128 · 2017-03-27T19:21:26Z

This is an implementation of the determinate circular progress bar as shown here: https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B14F_FSUCc01N2kzc1hlaFR5WlU/061101_Circular_Sheet_xhdpi_005.webm

Closes #24

Screenshots of this implementation:
1 2 3 4 5 6 7 8

zhanghai · 2017-03-30T04:38:09Z

Thanks, I'll look into the code later.

Another question remains that whether the circular progress should move its starting point along the circumference. Although the spec presented so, it might be confusing to user (If the progress stalls it looks kind of weird, might seem as if an indeterminate progress just get stuck, and inconsistent compared to the horizontal counterparts) and hard to estimate the progress, plus that the spec has no text specification on this except for that video.

Just did a quick research on this:

Library	Status
Angular Materal (by Google)	Fixed starting point at top
Angular Material 2 (by Google)	Fixed starting point at top
Polymer Elements (by Google)	N/A
Materialize	N/A
Material Components for the web (by Google)	Unknown
Material Design Lite (by Google)	N/A
Material UI	Fixed starting point at 45 deg

webmaster128 · 2017-03-30T20:48:49Z

I personally like the effect of the moving starting point, which is an innovative way to visually fill the square element and provide visual symmetry even for early progress values.

I don't think a circular progress indicator alone can give the user a precise estimate about the progress value. If that is needed, other UI elements must be used anyway. So I think it is good enough if the user can get a rough idea how far the progress is.

Additionally you can see that the length of the coloured arch is linear to the progress, starting from 0°at 0% to 360° at 100%, even if the arch is moving. So if you observed the element a couple of times, you get a good feeling of how far the progress is.

Given that, I'd love to keep the effect as it is shown in the video provided by Google.

zhanghai · 2017-03-31T05:46:28Z

I think a circular progress indicator alone can give the user an easy impression of the progress, e.g. if the progress starts at the top, then users can read a quarter, half, three quarters, it's pretty natural, the same as we read clocks.

However if the starting point is moving around, the same experience can not apply any more. Users will need extra efforts to read it, or get accustomed to a new way of interaction that is not seen elsewhere.

So although I'm somewhat a spec follower and lover, I have my reservation about this particular design, which is also never stated literally but only showcased in a video.

zhanghai · 2017-03-31T05:50:56Z

Other unresolved issues include:

Whether we should provide the starting point as an option.
Whether it should be able to show/hide a track.
Whether it should be able to show/hide a secondary progress.
If we are moving to VectorDrawableCompat (Switch to AnimatedVectorDrawableCompat? #53) how should the implementation be done.

I prefer making a decision upon these design/implementation issues before we merge it into this library.

webmaster128 · 2017-04-01T08:35:04Z

Whether we should provide the starting point as an option.

Sure, that can be done easily

Whether it should be able to show/hide a track.

You mean a background of the circle? Might be possible but I did not see it in a Material example. So I'd rather skip it until there is a good reason to implement it.

Whether it should be able to show/hide a secondary progress.

I almost finished implementing that but then it was a bit buggy so I discarded it because I did not see it in the Materials documentation and I personally do not need it. But yes, that can be done for consistency.

If we are moving to VectorDrawableCompat (#53) how should the implementation be done.

I have no experience with VectorDrawableCompat and I looked how the current implementations work. Moving to VectorDrawableCompat is going to be an entire rewrite of the core library so I'd leave this as a second step. Having a stable set of features is a good base for evaluating if VectorDrawableCompat can replace Canvas throughout the library.

webmaster128 · 2017-04-05T20:43:24Z

Is there anything I can do for the progress of this ticket?

zhanghai · 2017-04-06T03:26:16Z

Still think that the progress should start at top (at least by default), per the two Angular Material versions by Google (see above), and (my own) UX considerations.

If this can be an attribute, I'm wondering what its name should be, app:mpb_???circularIndeterminate???? Really can't think of a good name.

And about the secondary progress -- I think it should better be implemented, but it would be weird if the starting point is moving according to progress -- where should it start if it has a different progress value compared to the primary one?

And I think a track should also be implemented, like the horizontal counterpart.

webmaster128 · 2017-04-07T07:54:52Z

Great, thanks. I'll take care of that.

What about app:mpb_circularDeterminateStyle = "fixedStartTop" (default), "movingStart"? Is it snake_case or camleCase in the values?

webmaster128 · 2017-04-07T15:04:05Z

Okay, done implementing the requred features

zhanghai · 2017-04-08T04:22:06Z

Thanks for your work! I'll review the code later, due to some personal matters.

webmaster128 · 2017-04-08T06:41:27Z

Okay cool, thanks :)

webmaster128 · 2017-04-10T16:59:39Z

So you think it is possible to review and release this within this week? I need the determinate circular progress for an upcoming app release. Otherwise I need to somehow build a fork locally but if that could be avoided would be great.

the PROGRESS_STYLE_CIRCULAR block now works exactly as the PROGRESS_STYLE_HORIZONTAL block

on a 1x device, 16px was larger than the 14dp Small.NoPadding style size

…efactoring.

webmaster128 · 2017-04-11T05:51:53Z

Alright, thanks. Interesting, I did not know that you get the access rights to push to my fork's branch. Otherwise I am familiar with rebasing et cetera, no problem.

…stead.

zhanghai · 2017-04-11T06:31:30Z

...java/me/zhanghai/android/materialprogressbar/sample/DeterminateCircularExamplesActivity.java

+                dcmTintedSecondaryBackground
+        );
+
+        new Thread() {


Shouldn't kick off threads for animation in Android; In most cases one should use ObjectAnimator, and it is much more smoother. I'll refactor this later.

…minate.

zhanghai · 2017-04-11T07:20:51Z

Finished reviewing the library module except the 15 degree problem.

webmaster128 · 2017-04-11T07:49:55Z

What is the "15 degree problem"?

zhanghai · 2017-04-11T08:54:29Z

@webmaster128 https://github.com/DreaminginCodeZH/MaterialProgressBar/pull/51/files/7b6d3d41ae131315032990f49e0975fef23bd0b9#r110824773
It's the only problem left with code now.

webmaster128 · 2017-04-11T09:07:26Z

@DreaminginCodeZH The link does not point me to any specific line or comment

zhanghai · 2017-04-11T09:08:44Z

Strange, perhaps you need to wait till the page load is finished. Anyway you can C-F the string:

How did you get this 15? By estimating from the video, or by stepping to find the first frame and measuring in Photoshop etc? Is it precise, or can it be from the fact the at the beginning the progress is thin but quick in motion? Have you done comparison between 0 and 15, and if so is it that 15 wins?

webmaster128 · 2017-04-11T09:19:41Z

I measured the angle from the first frame that I could capture in the video. I am pretty sure it does not start at 0. Thus I took 15 and was happy with the result. 0 was not tested.

webmaster128 · 2017-04-11T09:20:38Z

Strange, perhaps you need to wait till the page load is finished. Anyway you can C-F the string:

It is not there. Did you write it as a pending review comment?

zhanghai · 2017-04-11T06:41:55Z

...ry/src/main/java/me/zhanghai/android/materialprogressbar/SingleCircularProgressDrawable.java

+                mEndAngleMax = 360;
+                break;
+            case MaterialProgressBar.DETERMINATE_CIRCULAR_STYLE_MOVINSTART:
+                // leading and trailing angles start at 15° or 5 minutes


How did you get this 15? By estimating from the video, or by stepping to find the first frame and measuring in Photoshop etc? Is it precise, or can it be from the fact the at the beginning the progress is thin but quick in motion? Have you done comparison between 0 and 15, and if so is it that 15 wins? (Yes I forgot to submit this review : (

…oring.

zhanghai · 2017-04-11T09:56:31Z

I found a suspicous frame on the second start of the progress:

I have experimented with 0 instead of 15 and they looked the same, and because I see no sensible reason for the animation to start at 15 (so this is very likely a glitch due to high speed and small area), I'm making it 0 now.

zhanghai · 2017-04-11T10:09:50Z

Merged, thanks! Will be released later.

zhanghai · 2017-04-11T14:37:58Z

Released on Maven Central just now, should be available within hours.

webmaster128 · 2017-04-11T14:56:55Z

Cool, thanks!

webmaster128 mentioned this pull request Mar 27, 2017

Determinate circular drawable is not yet supported #24

Closed

webmaster128 force-pushed the determinate-circular branch from be12a2c to f18bf55 Compare March 27, 2017 19:29

zhanghai self-assigned this Mar 29, 2017

webmaster128 force-pushed the determinate-circular branch from 42b29ad to e0f6db8 Compare April 7, 2017 15:02

Simon Warta added 14 commits April 11, 2017 09:35

Make sample labels more explicit

87dae0c

Improve symmetry in progress style cases

f300a5b

the PROGRESS_STYLE_CIRCULAR block now works exactly as the PROGRESS_STYLE_HORIZONTAL block

Implement determinate circular progress bar

965390e

Reduce BaseSingleCircularProgressDrawable's intristic size

61cd230

on a 1x device, 16px was larger than the 14dp Small.NoPadding style size

Add example page for Circular Determinate

b6f3339

Move compositeAlpha to internal helper class Colors

236db13

Add missing @OverRide annotation to getShowBackground()

fe56af0

Implement secondary progress

990d3dc

Document source if max level value

cfe666b

Implement background color

8a782d1

Pass progressDrawable into getTintTargetFromProgressDrawable

2ea1096

Fix issue with setting secondary progress color

d420b2f

f! implement background

4f23fa3

Implement mpb_determinateCircularStyle

528199b

[Refactor] Extract BaseProgressLayerDrawable; Rename classes; Minor r…

f5b8a90

…efactoring.

zhanghai force-pushed the determinate-circular branch from b3c205c to f5b8a90 Compare April 11, 2017 05:23

[Refactor] Refactor theme attribute value retrieval.

84357b1

zhanghai added 2 commits April 11, 2017 14:24

[Fix] Fix secondary progress background emulation by drawing twice in…

1469675

…stead.

[Refactor] Remove unused code.

7b6d3d4

zhanghai reviewed Apr 11, 2017

View reviewed changes

zhanghai added 3 commits April 11, 2017 15:05

[Fix] Use framework indeterminateOnly instead of custom _forceIndeter…

e721358

…minate.

[Feature] Better default value for disabledAlpha.

ee3cba6

[Refactor] Minor refactoring.

8ea4a61

zhanghai force-pushed the determinate-circular branch from dfb4ed5 to 8ea4a61 Compare April 11, 2017 07:18

zhanghai added 3 commits April 11, 2017 15:59

[Refator] Refactor MainActivity for circular determinate progress.

6d9f715

[Refactor] Finish refactoring sample.

ddfaa83

[Refactor] Fix copyright headers.

a02fad7

[Feature] Better layout spacing for determinate circular sample.

743409e

zhanghai reviewed Apr 11, 2017

View reviewed changes

[Feature] Make circular determinate progress start at 0; Minor refact…

313767a

…oring.

zhanghai merged commit 2a841cf into zhanghai:master Apr 11, 2017

zhanghai added the enhancement label Apr 11, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement determinate circular progressbar #51

Implement determinate circular progressbar #51

webmaster128 commented Mar 27, 2017 •

edited

Loading

zhanghai commented Mar 30, 2017 •

edited

Loading

webmaster128 commented Mar 30, 2017 •

edited

Loading

zhanghai commented Mar 31, 2017

zhanghai commented Mar 31, 2017

webmaster128 commented Apr 1, 2017

webmaster128 commented Apr 5, 2017

zhanghai commented Apr 6, 2017

webmaster128 commented Apr 7, 2017 •

edited

Loading

webmaster128 commented Apr 7, 2017

zhanghai commented Apr 8, 2017

webmaster128 commented Apr 8, 2017

webmaster128 commented Apr 10, 2017

webmaster128 commented Apr 11, 2017

zhanghai Apr 11, 2017 •

edited

Loading

zhanghai commented Apr 11, 2017 •

edited

Loading

webmaster128 commented Apr 11, 2017

zhanghai commented Apr 11, 2017 •

edited

Loading

webmaster128 commented Apr 11, 2017

zhanghai commented Apr 11, 2017

webmaster128 commented Apr 11, 2017

webmaster128 commented Apr 11, 2017

zhanghai Apr 11, 2017 •

edited

Loading

zhanghai commented Apr 11, 2017 •

edited

Loading

zhanghai commented Apr 11, 2017

zhanghai commented Apr 11, 2017

webmaster128 commented Apr 11, 2017

Implement determinate circular progressbar #51

Implement determinate circular progressbar #51

Conversation

webmaster128 commented Mar 27, 2017 • edited Loading

zhanghai commented Mar 30, 2017 • edited Loading

webmaster128 commented Mar 30, 2017 • edited Loading

zhanghai commented Mar 31, 2017

zhanghai commented Mar 31, 2017

webmaster128 commented Apr 1, 2017

webmaster128 commented Apr 5, 2017

zhanghai commented Apr 6, 2017

webmaster128 commented Apr 7, 2017 • edited Loading

webmaster128 commented Apr 7, 2017

zhanghai commented Apr 8, 2017

webmaster128 commented Apr 8, 2017

webmaster128 commented Apr 10, 2017

webmaster128 commented Apr 11, 2017

zhanghai Apr 11, 2017 • edited Loading

Choose a reason for hiding this comment

zhanghai commented Apr 11, 2017 • edited Loading

webmaster128 commented Apr 11, 2017

zhanghai commented Apr 11, 2017 • edited Loading

webmaster128 commented Apr 11, 2017

zhanghai commented Apr 11, 2017

webmaster128 commented Apr 11, 2017

webmaster128 commented Apr 11, 2017

zhanghai Apr 11, 2017 • edited Loading

Choose a reason for hiding this comment

zhanghai commented Apr 11, 2017 • edited Loading

zhanghai commented Apr 11, 2017

zhanghai commented Apr 11, 2017

webmaster128 commented Apr 11, 2017

webmaster128 commented Mar 27, 2017 •

edited

Loading

zhanghai commented Mar 30, 2017 •

edited

Loading

webmaster128 commented Mar 30, 2017 •

edited

Loading

webmaster128 commented Apr 7, 2017 •

edited

Loading

zhanghai Apr 11, 2017 •

edited

Loading

zhanghai commented Apr 11, 2017 •

edited

Loading

zhanghai commented Apr 11, 2017 •

edited

Loading

zhanghai Apr 11, 2017 •

edited

Loading

zhanghai commented Apr 11, 2017 •

edited

Loading