How to use HorizontalProgressBar Library for HarmonyOS: A developer’s Guide

1. Introduction

Horizontal progress bar is library which indictes the progress of an ongoing task. This is useful for the user to estimate the remaining time for the completion of ongoing activities.

To get started right away, head on to Gitee

2. Typical Use Case

This library - me.zhouzhuo.zzhorizontalprogressbar, is very useful in the development of applications which are in our daily use. An example of such case is mentioned below:

Download Status The Progress/percentage of files (of total size) while downloading.	Upload Status The Progress/percentage of files uploaded.

3. Capability

In this section, we can see the list of features which the library provides which makes the use of this library very easy and friendly. Primarily, this library supports customization of component attributes using the below mechanisms.

XML layout inflation
With the help of xml layout inflation, the library is so easy to use such that, we can put the component to action without even writing a single line of code. This will be so useful for quick development, as well as for beginners who are starting with mobile-app development. On how to use the XML Layout Inflation can be seen in the coming sections of the tutorial.
Customization via Java APIs
In case we need to customize the component during run time, we also have the flexibility to do that using the JAVA APIs which the library exposes. The APIs will also help us to utilize the features provided from its parent “ZzHorizontalProgressBar” Class

4. Features

Features supported by this component includes the below:

Setting Progress and background Color
We can configure the progress bar color, background color , border width and overlay parameter using these properties. Often setting the right border properties for a horizontal progress-bar makes a whole lot of difference in the way the progress bar appeals to audience.
Setting custom gradient progress
Using this library, we can customize gradient color of the progress.
Setting second level progress bar and color
Using this library, we can customize second-level progress color and the progress value can also be set.

5. Installation

For using 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: ['*.jar', '*.har'])
    implementation 'dev.applibgroup:zzhorizontalprogressbar:1.0.0'
    testCompile 'junit:junit:4.13'
}

6. Usage

This section will help us to understand the usage of the library as you use it in your Harmony-application developement project.

Step 1: Define layout via XML

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    xmlns:custom="http://schemas.huawei.com/hap/res-auto"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:background_element="#000000">
    <me.zhouzhuo.zzhorizontalprogressbar.ZzHorizontalProgressBar
        ohos:height="60vp"
        ohos:width="match_parent"
        ohos:id="$+id:hpb"
        ohos:left_margin="20vp"
        ohos:top_margin="20vp"
        ohos:right_margin="20vp"
        ohos:padding="20vp"
        custom:zpb_draw_border="true"
        custom:zpb_border_width="10"
        custom:zpb_show_second_point_shape="line"
        custom:zpb_max="60"
        custom:zpb_progress="40"/> 
</DirectionalLayout>

Step 2: Customize programmatically via Java API

@Override
public void onStart(Intent intent) {
    super.onStart(intent);
    super.setUIContent(ResourceTable.Layout_NewSilce);
    ZzHorizontalProgressBar horizontalProgressBar;
    horizontalProgressBar = findComponentById(ResourceTable.Id_hpb);
    horizontalProgressBar.setBgColor(Color.GREEN.getValue());
}

List of XML attributes supported

Below is the list of XML attributes which are supported by the library.

zpb_draw_border
zpb_border_width
zpb_show_second_point_shape
zpb_padding
zpb_second_pb_color
zpb_bg_color
zpb_pb_color
zpb_max
zpb_progress
zpb_second_progress
zpb_open_gradient
zpb_gradient_from
zpb_gradient_to
zpb_show_second_progress
zpb_open_second_gradient
zpb_second_gradient_from
zpb_second_gradient_to
zpb_show_mode
zpb_round_rect_radius
zpb_border_color
civ_color - To specify the border color.
civ_border_width - To specify border width.
civ_bg_color - To specify a background color

List of public APIs for app-developer

st of public APIs for app-developer** The public methods below will help us to operate on the component at runtime.

Setter Methods

setBgColor()
setBorderColor()
setGradientColor()
setGradientColorAndBorderColor()
setMax()
setOnProgressChangedListener()
setOpenGradient()
setOpenSecondGradient()
setPadding()

setProgress()
setProgressColor()
setSecondGradientColor()
setSecondProgress()
setSecondProgressColor()
setSecondProgressShape()
setShowMode()
setShowSecondProgress()

Getter Methods

getBgColor()
getBorderColor()
getGradientFrom()
getGradientTo()
getHandlezpbshowmode()
getHandlezpbshowssecondpointshape()
getMax()
getPercentage()
getPercentageFloat()
getProgress()

getProgressBarPadding()
getProgressColor()
getSecondGradientFrom()
getSecondGradientTo()
getSecondProgress()
getSecondProgressColor()
getSecondProgressShape()
isOpenGradient()
isOpenSecondGradient()
isShowSecondProgress()

7. API usage examples

In this section, we can have a look at some the examples where the APIs of this library is put to use and the results which we can acheive.

Example1: Setting progress and background color

In this example, first the background-color of the bar is set to grey color in layout.xml so that progress color which is set to green is clearly observable. The color code is in RGB-format

Layout.xml:
<me.zhouzhuo.zzhorizontalprogressbar.ZzHorizontalProgressBar
    ohos:id="$+id:hpb"
    ohos:height="290vp"
    ohos:width="290vp"
    ohos:orientation="vertical"
    ohos:layout_alignment="center"
    ohos:top_padding="10"
    custom:zpb_border_width="4vp"
    custom:zpb_bg_color="#d8d8d8"/>


Java Slice:
ZzHorizontalProgressBar horizontalProgressBar;
horizontalProgressBar = findComponentById(ResourceTable.Id_hpb);
horizontalProgressBar.setBgColor(Color.GREEN.getValue());

Example2: Customising border related attributes

Layout.xml:
<me.zhouzhuo.zzhorizontalprogressbar.ZzHorizontalProgressBar
    ohos:id="$+id:hpb"
    ohos:height="290vp"
    ohos:width="290vp"
    ohos:orientation="vertical"
    ohos:layout_alignment="center"
    ohos:top_padding="10vp"
    custom:zpb_border_width="4vp"
    custom:zpb_bg_color="#d8d8d8"
    custom:zpb_pb_color="#FF4CB862"
    custom:zpb_border_color="#85ff00"/>

Java Slice:
ZzHorizontalProgressBar horizontalProgressBar;
horizontalProgressBar = findComponentById(ResourceTable.Id_hpb)
horizontalProgressBar.setBorderColor(Color.BLACK.getValue());

Example3: Setting gradient progress

Layout.xml:
<<me.zhouzhuo.zzhorizontalprogressbar.ZzHorizontalProgressBar
    ohos:id="$+id:hpb"
    ohos:height="290vp"
    ohos:width="290vp"
    ohos:orientation="vertical"
    ohos:layout_alignment="center"
    ohos:top_padding="10"
    custom:zpb_draw_border="true"
    custom:zpb_border_width="10"
    custom:zpb_show_second_point_shape="line"
    

Java Slice:
ZzHorizontalProgressBar horizontalProgressBar;
horizontalProgressBar = findComponentById(ResourceTable.Id_hpb);
horizontalProgressBar.setOpenGradient(true);
horizontalProgressBar.setProgress(30);
horizontalProgressBar.setGradientColor(0xFFFF0000,0xFF00FF00);

Example4: Setting second-level progress

Layout.xml:
<<me.zhouzhuo.zzhorizontalprogressbar.ZzHorizontalProgressBar
    ohos:id="$+id:hpb"
    ohos:height="290vp"
    ohos:width="290vp"
    ohos:orientation="vertical"
    ohos:layout_alignment="center"
    ohos:top_padding="10"
    custom:zpb_draw_border="true"
    custom:zpb_border_width="10"
    custom:zpb_show_second_point_shape="line"
    

Java Slice:
ZzHorizontalProgressBar horizontalProgressBar;
horizontalProgressBar = findComponentById(ResourceTable.Id_hpb);
horizontalProgressBar.setOpenSecondGradient(true);
horizontalProgressBar.setProgress(80);
horizontalProgressBar.setShowSecondProgress(true);
horizontalProgressBar.setSecondProgress(50);
horizontalProgressBar.setSecondProgressColor(Color.GRAY.getValue());
horizontalProgressBar.setProgressColor(Color.YELLOW.getValue());
horizontalProgressBar.setSecondGradientColor(Color.GREEN.getValue(),Color.MAGENTA.getValue());

8. Conclusion

ZzHorizontalProgressBar is a very easy to use and very powerful library.The performance of the library is very good even when it works on one of the latest operating systems in the world, which is HarmonyOS!

For more exciting libraries to develop your app, peep into third-party-components at
OpenHarmony-TPC
To know more about the developement work happening on harmony aaplication layer, and even be part of the exciting stuff, watch this space of ALEG

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HorizontalProgressBar_ExperienceGuide.md

HorizontalProgressBar_ExperienceGuide.md

How to use HorizontalProgressBar Library for HarmonyOS: A developer’s Guide

1. Introduction

2. Typical Use Case

3. Capability

4. Features

5. Installation

6. Usage

Step 1: Define layout via XML

Step 2: Customize programmatically via Java API

List of XML attributes supported

List of public APIs for app-developer

7. API usage examples

8. Conclusion

Files

HorizontalProgressBar_ExperienceGuide.md

Latest commit

History

HorizontalProgressBar_ExperienceGuide.md

File metadata and controls

How to use HorizontalProgressBar Library for HarmonyOS: A developer’s Guide

1. Introduction

2. Typical Use Case

3. Capability

4. Features

5. Installation

6. Usage

Step 1: Define layout via XML

Step 2: Customize programmatically via Java API

List of XML attributes supported

List of public APIs for app-developer

7. API usage examples

8. Conclusion