Circular Progress Extension (Preview)

extension

(Carlos Pedroza) #1

CIRCULAR PROGRESS EXTENSION PREVIEW

Description

Very simple extension based on Tim Qi’s library, to create a circular ring progress or sector progress view.

Methods

  • CreateRing: Method for creating a Circular Ring Progress View. Parameters: Arrangement input: Arrangement where the Circular Ring will be displayed. Number percent: Number with the percent of completion (from 0 to 100) of the task. Note: The size of the circular progress will be the same as the arrangement where it will be displayed.
    image

  • CreateSector: Method for creating a Circular Ring Progress View. Parameters: Arrangement input: Arrangement where the Circular Sector will be displayed. Number percent: Number with the percent of completion (from 0 to 100) of the task. Note: The size of the circular progress will be the same as the arrangement where it will be displayed.
    image

Properties

Circular Ring Progress

  • RingBgColor: Specifies and returns the color of the circular ring background. Also available in Designer Properties. Default: Light Gray.
    image
    image

  • RingFgColorStart: Specifies and returns the color of the circular ring stroke’ start. Also available in Designer Properties. Default: Orange.
    image
    image

  • RingFgColorEnd: Specifies and returns the color of the circular ring stroke’s end. Also available in Designer Properties. Default: Red.
    image
    image

  • RingPercent: Specifies and returns the percent of completion (from 0 to 100) of the task. Also available in Designer Properties. Default: 0.
    image
    image

  • RingStartAngle: Specifies and returns the start angle of the ring’s stroke (from 0 to 360). Also available in Designer Properties. Default: 0.
    image
    image

  • RingStrokeWidth: Specifies and returns the width of the ring’s stroke. Also available in Designer Properties. Default: 15.
    image
    image

Circular Sector Progress

  • SectorBgColor: Specifies and returns the color of the circular sector background. Also available in Designer Properties. Default: Light Gray.
    image
    image

  • SectorFgColor: Specifies and returns the color of the sector indicator. Also available in Designer Properties. Default: Orange.
    image
    image

  • SectorPercent: Specifies and returns the percent of completion (from 0 to 100) of the task. Also available in Designer Properties. Default: 0.
    image
    image

  • SectorStartAngle: Specifies and returns the start angle of the sector start (from 0 to 360). Also available in Designer Properties. Default: 0.
    image
    image

Known issues

  • In the sector progress, when the percent is set to zero (0), and the start angle is different from zero (0), the background is set to the same color than the sector indicator.
  • Setting a different background or foreground color during runtime won’t update the already created sector view. To update it, it is necessary to run the CreateSector method again.

Example

Downloads

.AIX: com.pedroza.CircularProgress.aix (17,6 KB)
.APK: CircularProgressExtension.apk (2,2 MB)

Price

This extension will be free and liberated for this community when this post reaches 30 likes.
For more features or customization, send a PM for princing information.

Upcoming SneakPeek


Semi round seek bar
#2

Wow! :heart_eyes:
That’s amazing!


(KaFa) #3

@CarlosPedroza27 minAPI?


(Carlos Pedroza) #4

Minimum Api Level 11 (HONEYCOMB)


(KaFa) #5

Can you share the APK, so we can look into it? :smile:


(Carlos Pedroza) #6

I’m afraid not, some people like to decompile the apk to get the source code even when the library used is open source.
I will do it when the post reaches 30 likes.


(Pme) #7

Is it possible add text to middle of the ring progress?
So we can use it for countdown


(Carlos Pedroza) #8

Yes, it is possible. If anyone wants to sponsor this feature, send me a PM. I can also make that when the count goes up to 1000, appears 1K


(The Grif Channel) #9

you have 30 likes go url download pls


(Kleyber Derick) #10

Are you sure? I saw 25 likes until now…


(Marggx) #11

@CarlosPedroza27 can you do a horizontal progress aswell?


(Carlos Pedroza) #12

I’m working on that :smile:

We are almost there! Only 3 missing!


(The Grif Channel) #13

Now 30)
This extension is very nice, pls give me download)


(Carlos Pedroza) #14

In few minutes I will upload the extension


(Arda Çebi) #15

Makeroid is crashing when I insert the extension as a component. What is the problem?

(Internal Bug)


#16

This is the errorcode for chrome:

notes = Browser: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36
foundIn = v2.2.0
faultData = com.google.gwt.event.shared.UmbrellaException: Exception caught: (TypeError) : Cannot set property 'leftPosition' of null
projectId = 5132934541475840

Error occurs in Firefox and Opera also.


(KaFa) #17

It’s working on App Inventor 2 fine.

But this can not be “none”, it has to have a background color…

@CarlosPedroza27 can you look into it and make a solution for the transparent bg color?


(Arda Çebi) #18

With App Inventor it’s working, but Makeroid doesn’t work. Can anyone confirm this?


(Carlos Pedroza) #19

I will take a look into that


(Arda Çebi) #20

Wait, the whole extension doesn’t work are you going to find a solution for that??