How to progress with Dottedprogressbar in HarmonyOS

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.

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.

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)

• 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.

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.

More info on the dottedprogressbar library can be found here

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.

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.

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

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();
    }

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.

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. Hope you enjoyed it and please post your queries in the comment section and would be glad to answer it.