How to Show Download Progress With Circular Progress | Guide

Welcome, This is my First Guide and I was to Curoius to Publish it.

I saw many user requesting for an method to do use Circular progress to Show Download Progress

  • Import Two Extensions
  1. image

  2. image
    If Anyone Dont Want to use Use the Download Component Provided By Kodular.

  • Designer
  1. image for creating the ring.
  2. image As your Requirement for Start, Stop & Resume, Etc.
  3. image
  4. image

Design As per Your requirement.

  • Blocks
    On Screen Initialize image
  1. Set an Arrangement Where the Ring will be Created.image

  2. Set the Download Link. image

  3. Set the RingBgColour,RingFgColourEnd,RingFgColourStart image

  4. On Start Button Click start download image and Set clock to enable image

  5. while file is Downloading set progress to Ring Percent image

  6. On timer Start

  • Properties of Components



Apk: DPWCP_Maayur.apk (5.2 MB)

Aia:DPWCP_Maayur.aia (119.0 KB)

Credits: Thanks @CarlosPedroza27 for Circular Progress Extension Deephost for custom Download Extension & :kodular: for Such a Great Platform.

I have used a Circular Progress Extension for this guide.

The Download link is not working here so I found a working link in AppyBuilder Community.

Try it and give suggestion and Report Bug If found.

If you like this guide you can support by donating :upside_down_face:


Well, nice first tutorial… but one thing: isn’t this extension from @Deep_Host so there may be some issues? Idk really but there are plenty mentions about him…

Anyway, looks nice! Keep it up, my friend!


1 Like

I am Using This extension For my Another Project to and till Now I Don’t have Any issue.
If Anyone Dont Want to use that extension. Use the Download Component Provided By Kodular. image

very good… :hugs:

I have already implemented this logic in my app to show user, result of the quiz.

Such a nice extension by @CarlosPedroza27

Nice tutorial @themaayur Good work.


Thanks for Appreciation @The_K_Studio
Yes this extension is too good it can be used in many different ways.

Which quiz? Are you currently working or did I pass over a new app from yours?

Multiple choice questions quiz from my educational app.

I have made this design with my logic and it is live in my app.


Oh, that one! Done, now saw it…

:+1: :+1: :+1:


Are you using translator to post here?

I was confused with your some words and i didn’t get it?

What does this means?

Err… no? My second language is english and I’m learning it since 4 years… but it can be that I wrote somewhat… german-like in my sentences… :alien: :de: :confounded:
:smile: :face_with_hand_over_mouth:

But I understand

Because English is my second language too?? :joy:

1 Like


Hello, Koders hope you all are fine. This is off topic but I don’t want to create a new topic so I am posting it here. So don’t flag it as it’s my topic. :grin::grin::sweat_smile:

Now coming to the point, I am working on a project since last 3 weeks. So I need beta testers for testing my app. If any is Interested then they can PM me with the following Information.

Device Name

Android Version

If you have multiple devices than give the above information for each device.

Regards, Maayur

1 Like

actually i’ve tried this extension (Circular Progress Bar) and I found something that is not very rigth…
The FgColorEnd is not the corresponding to the 100% :face_with_raised_eyebrow:
This color should be related to propertie like “FgColorMiddle”. In fact, here start color is the same as the end color…
And for exemple if you want to set the start color to red and end color to green, it is not working correctly. 100% is showing a ring with red top and green bottom.

What u actually want to create? … Have u tried this provided aia and apk!?

1 Like

Show what you want and what have you tried.

I mean that a sector progress bar with red color for start and end color as green should be displayed like this :
Sector progress bar

Sorry for my poor gradient quality (specially the “middle” color which is not really the good one), i’m not a professionnal :sweat_smile:

With the actual behaviour of the extension, start color is the same as the end color and EndColor is in fact the “middle 50%” color.
Hope you will understand…

I think you have some misconception
Start/End colour means the colour of ring and not of that progress.

This can be easily accomplished with canvas If you are unable to work with extension.

Otherwise read and check carefully the logic @themaayur has used in his guide… U will not be disappointed

ok my bad, I tried the aia file and now I understand the behaviour, thanks for help…
I tested with a big file and at the end the ring seems complete but actually not. It would be avoid if there were a propertie for ring to set the cut as rounded or squared :wink:

1 Like