A vertical sequence UI progress bar Android in Github

A vertical step progress bar sequence layout UI component for Android.

The Vertical sequence layout UI android Library is used to Animates a progress bar to the first active step in the sequence and then periodically runs a pulse animation on that step.

How to setup Sequence layout progress bar UI in android Studio?

Add the JitPack maven repository to your root build.gradle:

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

And then the actual library dependency to your module’s build.gradle:

dependencies {
    implementation 'com.github.transferwise:sequence-layout:... // use latest version'
}

The latest version of Sequence Layout UI You can found in Github Current latest version is 1.0.11 may change.

How to Implement a vertical sequence progress bar in android.

In XML layout UI of the Sequence progress bar

You can define n number of steps in your XML layout:

<com.transferwise.sequencelayout.SequenceLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.transferwise.sequencelayout.SequenceStep
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:anchor="30 Nov"
        app:title="First step"/>

    <com.transferwise.sequencelayout.SequenceStep
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:title="Second step"/>

    <com.transferwise.sequencelayout.SequenceStep
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:active="true"
        app:anchor="Today"
        app:subtitle="Subtitle of this step."
        app:title="Third step"
        app:titleTextAppearance="@style/TextAppearance.AppCompat.Title"/>

    <com.transferwise.sequencelayout.SequenceStep
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:title="Fourth step"/>

    <com.transferwise.sequencelayout.SequenceStep
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:anchor="2 Dec"
        app:title="Fifth step"/>
</com.transferwise.sequencelayout.SequenceLayout>

Here com.transferwise.sequencelayout.SequenceLayout is the main Sequence Layout within which we can describe n number of Sequence Steps with com.transferwise.sequencelayout.SequenceStep.

Custom attributes for SequenceLayout:

Custom attributes for SequenceStep:

Programmatically using Java code for Sequence UI Layout progress bar

MainActivity.java to handle sequence Layout Vertical progress bar.

package shri.ab.sequenceprogressbar;

import android.os.Bundle;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import com.transferwise.sequencelayout.SequenceStep;

public class MainActivity extends AppCompatActivity {

    SequenceStep step1,step2,step3,step4,step5;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        step1=(SequenceStep)findViewById(R.id.step1);
        step3=(SequenceStep)findViewById(R.id.step3);

        //programatically activating
        step3.setActive(true);
        step3.setTitle("Active Step");
        step3.setAnchor("Date...");
        step3.setSubtitle("Subtitle of this step third.");

        //programatically seting style to Title
        step3.setTitleTextAppearance(R.style.TextAppearance_AppCompat_Title);
    }
}

OR

Programmatically using Kotlin code for Sequence UI Layout progress bar.

MainActivity.kt to handle sequence Layout Vertical progress bar.

package shri.ab.sequenceprogressbar

import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import com.transferwise.sequencelayout.SequenceStep

class MainActivity : AppCompatActivity() {

    internal var step1: SequenceStep? = null
    internal var step2: SequenceStep? = null
    internal var step3: SequenceStep? = null
    internal var step4: SequenceStep? = null
    internal var step5: SequenceStep? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        step1 = findViewById<View>(R.id.step1) as SequenceStep
        step3 = findViewById<View>(R.id.step3) as SequenceStep

        //programatically activating
        step3!!.setActive(true)
        step3!!.setTitle("Active Step")
        step3!!.setAnchor("Date...")
        step3!!.setSubtitle("Subtitle of this step third.")

        //programatically seting style to Title
        step3!!.setTitleTextAppearance(R.style.TextAppearance_AppCompat_Title)
    }
}

Download Project