How to progress with Dottedprogressbar in HarmonyOS
Tags: progressbar, library, harmonyos, java
Published: 2022-05-11 03:06:31

A progress bar is a graphical control element used to visualize the progression of an extended computer operation. Visualization, indications, representations are the terms used to confirm a action irrespective of whether it is successful or failed.

Now the key factor is how you would like to illustrate the progress bar, whether is it with animations, just text based or shapes, simple indicators etc. Well, it totally depends on the customer requirements or the theme of the app.

The image shown below is one of the most common type of indicator.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zun12qhf0szeyjzcfead.png)
 
Sometime app requires you to indicate the progression level and change based on the status like shown below which is also one of the type.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0xk0m84vxkk8cpc1ae6.png)

Since progress bar is one of the basic and commonly used component in App, then how about making it reusable and defining a library out of it and customize it as when required.

One such library is **dottedprogressbar** library and we will see in this article more about the library, customize it and how to use the library in HarmonyOS application.

In the article our focus is on a particular type of progressbar which is **dottedprogressbar** which consist of custom elements or color to configure dots.

- **Circle Indicator**

Create Circle Indicators for your beautiful application between the two pages (Screen)
 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1aai09pg4qno77f4746.gif)

- **ViewPager with Tab Title Dot Indicators**

ViewPager is common among mobile developers, It is a group of multiple views connecting to each other with swipe effect.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0b32k9v34a5ptjubu9p5.gif)

let's see how to use **dottedprogressbar ** in your HarmonyOS Mobile App and process or the setup required.

If you are new to *HarmonyOS * then do checkout the articles about HarmonyOS [here](https://www.harmonyos.com/en/).

More info on the dottedprogressbar library can be found [here](https://gitee.com/HarmonyOS-tpc/dotted-progress-bar)

Step by Step Implementation

**1. DevEco Studio**

Here we would be using DevEco studio IDE which is designed exclusively to run HarmonyOS applications, if you haven't installed one then you can get it from the official link with the SDK. Also, we have a step by step instructions for the environment setup available [here](https://developer.harmonyos.com/en/develop/deveco-studio).

*2.Project Creation*
Once you have the DevEco Studio up running you can create a select a **"File" -> New -> New Project Option, **then you are presented with multiple templates to choose from, select the template as shown below which is Empty Ability.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85340nr2u415744dkqob.png)

As a next step you will have to "Configure the Project" with the project details, path and ensure to select

- Language as Java and
- API version to 5 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dv06xderiapzvyc0ma1.png)

After the initial setup you are ready to start working on the application.

*3.Dependency *

Next add the dottedprogressbar Dependency, in order to use the library in your HarmonyOS mobile app, you need to first install it by adding the below dependency in your entry/build.gradle file. 

```
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.har'])
    implementation 'io.openharmony.tpc.thirdlib:dotted-progress-bar:1.0.0'
           }
```
**4. Define layout via XML**

Now it is time to add the layout details in **ability_main.xml** as shown below.

```
<com.trncic.library.DottedProgressBar
        ohos:id="$+id:progress"
        ohos:width="match_parent"
        ohos:height="match_parent"
        ohos:padding="30vp"
        app:activeDot="$media:active_dot"
        app:dotSize="29vp"
        app:inactiveDot="$media:inactive_dot"
        app:jumpingSpeed="670"
        app:spacing="15vp" />

```
List of few xml attributes that are supported in DottedProgressBar.

1. activeDot - applies to the image of the dotted progress bar
2. dotSize - size in dp of the dots(by default it is 16dp)
3. inactiveDot - which is of imagetype and it is used to apply the image of the inactive dotted-progress-bar
4. Jumping speed - Indicates speed between the dots.
5. spacing - spacing between dots which is in dp.

Customize programmatically via Java API

```
 @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
   DottedProgressBar progressBar = (DottedProgressBar) findComponentById(ResourceTable.Id_progress);
   progressBar.startProgress();
   progressBar.stopProgress();  

            }
```
Below are some of the support **public API's**  listed below.

- startProgress()
- stopProgress()
- onDraw(Component component, Canvas canvas)

```
private DottedProgressBar bar;
private boolean isInProgress;

 @Override
    protected void onStop() {
        super.onStop();
        stopProgress();
    }

    public void stopProgress() {
        isInProgress = false;
        bar.stopProgress();
    }
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wytze6b4wuoqf2x2yvik.gif)
 
Now let's add some customization to the dottedprogressbar and see that in effect.

```
<com.trncic.library.DottedProgressBar
   ohos:id="$+id:progress"
   ohos:width="match_parent"
   ohos:height="match_parent"
   ohos:padding="30vp"
   app:activeDot="$color:red"
   app:dotSize="25vp"
   app:inactiveDot="$color:black"
   app:jumpingSpeed="670"
   app:spacing="15vp" />

```
In the above code I have changed the active and inactive colors and below is the outcome of it.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtxpm2dtjdx1bpqmxzo7.gif)

In this article you must have got a glimpse of dottedprogressbar library in HarmonyOS, how to customize and implement it. 

The entire code is available here for your reference [here](https://github.com/applibgroup/Dottedprogressbar). Hope you enjoyed it and please post your queries in the comment section and would be glad to answer it.