CircularProgresview.md

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

1. Introduction

This CircularProgressView is a (surprisingly) circular progress bar openharmony View that is designed to imitate the Material versions of ProgressBar. These versions can be seen on this page of the Material design spec under Circular indicators.

2. Typical Use Cases

This library - com.github.rahatarmanahmed.cpv, is very useful in the development of applications which are in our daily use. Some of such examples mentioned below:

News News app that presents the latest news in crisp format from trusted national and international publishers	FileDownload FileDownload App is Download All Files is a powerful download manager. It helps you download files quickly

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

• Java APIs
  CircularProgressView uses a simple fluent java API's that allows users to make most requests in a single line:

4. Features

Features supported by this component includes the below:

• Indeterminate CircularProgressView:
  CircularProgressView should be On the screen you can see the CircularProgressView starts rotation animation and will not stop, rotates indefinitely
• Determinate CircularProgressView:
  CircularProgressView should be On the screen you can see the Animation start automatically

5. Installation

For using the library in your HarmonyOS mobile app, you need to first install it by following below methods.

• Method 1:
  Generate the .har package through the library and add the .har package to the libs folder.Add the following code to the entry level build.gradle:

    implementation fileTree  (dir: 'libs', include: ['* .jar', '* .har'])

• Method 2 :
  Copy the dependency from the gitee and add it to the entry level build.gradle:

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.har'])
    implementation 'io.openharmony.tpc.thirdlib:CircularProgressView:1.0.1'
           }

6. Usage

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

Step 1: Define layout via XML

We are going to load list into CircularProgressView component using This Library. So, add CircularProgressView component into resource_file.xml file.

    <?xml version="1.0" encoding="utf-8"?>
    <DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        xmlns:app="http://schemas.huawei.com/hap/res-auto"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="vertical"
        ohos:background_element="#000000">
            
      <com.github.rahatarmanahmed.cpv.CircularProgressView
      ohos:id="$+id:progress_view"
      ohos:height="50vp"
      ohos:width="50vp"
      ohos:layout_alignment="horizontal_center"
      ohos:padding="0vp"
      ohos:top_margin="50vp"
      app:cpv_animAutostart="false"
      app:cpv_indeterminate="true"
      app:cpv_thickness="8"/>

    </DirectionalLayout>

Step 2: Customize programmatically via Java API

   @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        progressView = (CircularProgressView) findComponentById(ResourceTable.Id_progress_view);

        // Test the listener with logcat messages
        progressView.addListener(new CircularProgressViewAdapter() {
            @Override
            public void onProgressUpdate(float currentProgress) {
                LogUtil.debug(TAG, "onProgressUpdate: " + currentProgress);
            }

            @Override
            public void onProgressUpdateEnd(float currentProgress) {
                LogUtil.debug(TAG, "onProgressUpdateEnd: " + currentProgress);
            }

            @Override
            public void onAnimationReset() {
                LogUtil.debug(TAG, "onAnimationReset");
            }

            @Override
            public void onModeChanged(boolean isIndeterminate) {
                LogUtil.debug(TAG, "onModeChanged: " + (isIndeterminate ? "indeterminate" : "determinate"));
            }
        });

    }

List of XML attributes supported for Floating action Button

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

Name	Type	Info
cpv_progress	float	The current progress of the progress bar.
cpv_maxProgress	float	The maximum progress of the progress bar; what's considered as 100% of the bar
cpv_thickness	dimension	The thickness of the progress bar
cpv_color	Color	The color of the progress bar.
cpv_indeterminate	boolean	Whether this progress bar is indeterminate or not. If indeterminate, the progress set on this view will not have any effect.
cpv_animDuration	integer	The duration of the indeterminate progress bar animation in milliseconds. It is the duration of all "steps" of the indeterminate animation. (Indeterminate only
cpv_animSwoopDuration	integer	The duration of the initial swoop of the determinate animation. (Determinate only)
cpv_animSyncDuration	integer	The duration of the determinate progress update animation. When you use setUpdate(int), this is how long it takes for the view to finish animating to that progress. (Determinate only)
cpv_animSteps	integer	The number of "steps" in the indeterminate animation
cpv_animAutostart	Boolean	Whether this progress bar should automatically start animating once it is initialized.
cpv_startAngle	float	The starting angle for progress bar. (Determinate only)

List of public APIs for app-developer

The public methods below will help us to operate on the component at runtime.

CircularProgressView Methods

isIndeterminate() setIndeterminate() getThickness() setThickness(int value)) getColor() setColor(int color) getMaxProgress() setMaxProgress(float value))

getProgress() setProgress(float value) startAnimation() resetAnimation() stopAnimation() addListener(CircularProgressViewListener) removeListener(CircularProgressViewListener) onComponentBoundToWindow(Component component) onComponentUnboundFromWindow(Component var1) ()

8. 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: CircularProgressView with Indeterminate Mode

Layout.xml: <com.github.rahatarmanahmed.cpv.CircularProgressView ohos:id="$+id:progress_view" ohos:height="50vp" ohos:width="50vp" ohos:layout_alignment="horizontal_center" ohos:padding="0vp" ohos:top_margin="50vp" app:cpv_animAutostart="false" app:cpv_indeterminate="true" app:cpv_thickness="8"> Java Slice: progressView = (CircularProgressView) findComponentById(ResourceTable.Id_progress_view); progressView.setIndeterminate(true);

Example2: CircularProgressView With Determinate Modee

Layout.xml: <com.github.rahatarmanahmed.cpv.CircularProgressView ohos:id="$+id:progress_view" ohos:height="50vp" ohos:width="50vp" ohos:layout_alignment="horizontal_center" ohos:padding="0vp" ohos:top_margin="50vp" app:cpv_animAutostart="false" app:cpv_indeterminate="true" app:cpv_thickness="8"> Java Slice: progressView = (CircularProgressView) findComponentById(ResourceTable.Id_progress_view); if (progressView.isIndeterminate()) { progressView.setIndeterminate(false); button.setText("Switch to indeterminate"); } else { progressView.setIndeterminate(true); button.setText("Switch to determinate"); } startAnimationThreadStuff(0); progressView.setIndeterminate(false);

9. Conclusion

CircularProgressView 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 Application Library Engineering Group