How to Show Download Progress With Circular Progress | Guide

Guides Resources
#1

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

ezgif.com-optimize
ezgif.com-optimize600Ă—514 304 KB

  • Import Two Extensions

  1. image

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

  • 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

    image
    image695Ă—133 13.8 KB

  • Properties of Components

image
image248Ă—510 15.4 KB

image
image
image241Ă—637 17.6 KB

Video:

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.

https://community.appybuilder.com/t/circular-progress-extension-preview/2756/8

Try it and give suggestion and Report Bug If found.

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

18 Likes
Circular Progress Extension (Preview)
how to show circular progress when loading a radio stream
How to show circular progress when loading an image from URL
Tutorial Writer badge
How to do circular countdown
Loading animation around text
Upload multiple images at once to the server using FTP
Show downloads within the app instead of the notification bar
How To Create This Type Of Percentage UI Circle Progress
#2

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!
:hugs:

Yoshi

1 Like
#3

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

#4

very good… :hugs:

#5

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

Screenshot_2020-05-29-19-02-01-721_com.kiranmadde.Mission_gpat
Screenshot_2020-05-29-19-02-01-721_com.kiranmadde.Mission_gpat1080Ă—2160 216 KB

Such a nice extension by @CarlosPedroza27

Nice tutorial @themaayur Good work.

3 Likes
#6

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

#7

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

#8

Multiple choice questions quiz from my educational app.

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

2 Likes
#9

Oh, that one! Done, now saw it…

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

2 Likes
#10

Are you using translator to post here?

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

What does this means?

#11

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:

#12

But I understand

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

1 Like
#13

#Offtopic

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
#14

Hi,
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.

#15

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

1 Like
#16

Show what you want and what have you tried.

#17

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…

#18

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

#19

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

#20

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