ExpandingProgressBar-android

Basic usage

(ConstraintLayout is recommended)

1. Add expandingprogressbar.megapho.com.expandingprogressbar.ExpandingProgressBar to your layout. Make sure to have width and height equal to match_parent or it's ConstraintLayout equivalent match_constraint(0dp)

    <expandingprogressbar.megapho.com.expandingprogressbar.ExpandingProgressBar android:id="@+id/epb"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/background"
   
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
   

2. Programmatically start ExpandingProgressBar whenever needed, and don't forget to set onExpandedListener if needed!

    final ExpandingProgressBar expandedProgressBar = findViewById(R.id.epb);
    expandedProgressBar.start();
   
    expandedProgressBar.setOnExpandListener(new ExpandingProgressBar.onExpandListener() {
        @Override
        public void preExpand() {
            
        }
   
        @Override
        public void postExpand() {
   
        }
    });
   

3. When the progressBar needs to start the expand animation just call

    expandedProgressBar.expand();
   

4. Extra steps! Customizing view

Customizable attributes:

• radius: ProgressBar circle radius.
• color: Color of progress bar and start of expand.
• color_gradient: Second color of expand animation.
• rotation_speed: Speed of rotation of circular progress bar.
• stroke_width: Width of progress bar arches.
• top_percentage: Sets top percentage from the top of progress bar.
• gravity: Sets horizontal position of progress bar.

Example:

    <expandingprogressbar.megapho.com.expandingprogressbar.ExpandingProgressBar android:id="@+id/epb"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/background"
        android:gravity="start"

        app:radius="50dp"
        app:color="#ffbd5b"
        app:color_gradient="#feab50"
        app:rotation_speed="7"
        app:stroke_width="4dp"
        app:top_percentage="0.4"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

If you want to add a view on top of the progress bar what I recommend is to add a guideline at roughly the same top_percentage as your ExpandingProgressBar, like so

<android.support.constraint.Guideline android:id="@+id/guideline1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"

    app:layout_constraintGuide_percent="0.77" />

<expandingprogressbar.megapho.com.expandingprogressbar.ExpandingProgressBar android:id="@+id/epb"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/background"

    app:top_percentage="0.8"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView android:id="@+id/tv_loading"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20sp"

    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toTopOf="@id/guideline1"

    android:text="@string/loading" />