Home Android Tutorials Android Library A vertical sequence UI progress bar Android in Github

A vertical sequence UI progress bar Android in Github

0
Veritcal Sequence Layout UI Progress Bar
Veritcal Sequence Layout UI Progress Bar

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.

Veritcal Sequence Layout UI Progress Bar

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:

AttributeDescription
progressForegroundColor foreground color of the progress bar
progressBackgroundColor background color of the progress bar

Custom attributes for SequenceStep:

Attribute Description
active boolean type ‘true/false’ to set the step to active or deactive state. There should only be one active step per SequenceLayout.
anchor text for the left side of the step
anchorMinWidth minimum width for the left side of the step
anchorMaxWidth maximum width for the left side of the step
anchorTextAppearance styling for the left side of the step
title title of the step
titleTextAppearance styling for the title of the step
subtitle subtitle of the step
subtitleTextAppearance styling for the subtitle of the step

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

Download from Drive Download from Github

No Comments