Aaron Ebinezer
Aaron Ebinezer

Reputation: 139

How to design circular step progress indicator in native android

Please help me to achieve step progress indicator as shown below in android. I could not find any relevant library to achieve this.

Text

Upvotes: 2

Views: 726

Answers (2)

Ummer Siddique
Ummer Siddique

Reputation: 395

Added following dependency in project level build.gradle

allprojects {
    repositories {
        // ...
        maven { url "https://jitpack.io" }
    }
}

Add following in app module build.gradle

dependencies {
    // ...
        implementation 'com.github.jakob-grabner:Circle-Progress-View:1.4'
}

How to use :

<com.ttv.facerecog.view.progress.CircleProgressView
        android:id="@+id/circleView"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:cpv_barColor="#519d35"
        app:cpv_barWidth="@dimen/__20sdp"
        app:cpv_blockCount="8"
        app:cpv_blockScale="0.96"
        app:cpv_direction="CW"
        app:cpv_innerContourSize="0dp"
        app:cpv_text="1 of 7"
        app:cpv_textSize="46sp"
        app:cpv_textColor="#000000"
        app:cpv_textScale="3"
        app:cpv_textMode="Text"
        app:cpv_textTypeface="bold"
        app:cpv_maxValue="12"
        app:cpv_outerContourSize="0dp"
        app:cpv_rimColor="#D6D6D6"
        app:cpv_rimWidth="@dimen/__20sdp"
        app:cpv_seekMode="true"
        app:cpv_showUnit="false"
        app:cpv_spinColor="#D6D6D6"
        app:cpv_unit="%"
        app:cpv_unitScale="1"
        app:cpv_value="0"
        tools:cpv_value="6" />

Result

enter image description here

For more information Click Here

Upvotes: -1

user16238776
user16238776

Reputation:

Create 7 different vector graphics and update them one at a time

Simplest method I know of

Use this link animated vector

Upvotes: -1

Related Questions