Circular Fillable Loader in Android with Seekbar

Last Updated : 20 Aug, 2024

Circular Fillable Loader is an outstanding way of showing the ProgressBar in any Android app while loading. Display ProgressBar in another form is one of the best ways to increase the user experience. You can get to see these customize loaders in most of the apps. In this article, we are going to see how to implement Circular Fillable Loader in Android. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.

Applications of Circular Fillable Loader

A unique way of representing a ProgressBar in Android.
Using a Circular Fillable Loader increases the user experience.
Gives an animated look to our progress bar.

Attributes of Circular Fillable Loader

Attributes	Description
cfl_border	Use to give Border.
cfl_border_width	Use to give width to the border.
cfl_progress	Use to display the progress of the Circular Fillable Loader.
cfl_wave_amplitude	Use to give amplitude to wave.
cfl_wave_color	Use to give wave Color.

Method 1

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add dependency in build.gradle(Module:app) file

Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.

implementation 'com.mikhaellopez:circularfillableloaders:1.3.2'

Step 3: Create a new State Progress Bar in your activity_main.xml file

Navigate to the app > res > layout to open the activity_main.xml file. Below is the code for the activity_main.xml file.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp"
    tools:context=".MainActivity">

    <!--Circular Fallible Loader-->
    <com.mikhaellopez.circularfillableloaders.CircularFillableLoaders
        android:id="@+id/circularFillableLoaders"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:src="@drawable/ic_baseline_android_24"
        app:cfl_border="true"
        app:cfl_border_width="12dp"
        app:cfl_progress="80"
        app:cfl_wave_amplitude="0.06"
        app:cfl_wave_color="@color/purple_200" />

    <!--Seek bar to increase fallible part-->
    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/circularFillableLoaders"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp" />

</RelativeLayout>

Step 4: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

MainActivity.java

import android.os.Bundle;
import android.widget.SeekBar;

import androidx.appcompat.app.AppCompatActivity;

import com.mikhaellopez.circularfillableloaders.CircularFillableLoaders;

public class MainActivity extends AppCompatActivity {

    // Variables Declared
    CircularFillableLoaders circularFillableLoaders;
    SeekBar seekBar;

    int progress = 80;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Code for implementing Circular Fallible Loader
        circularFillableLoaders = (CircularFillableLoaders) findViewById(R.id.circularFillableLoaders);
        
        // Set Progress
        circularFillableLoaders.setProgress(progress);

        seekBar = findViewById(R.id.seekBar);
        seekBar.setProgress(progress);
        seekBar.setMax(100);
        
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean b) {
                // Set Progress
                circularFillableLoaders.setProgress(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
}

Now click on the run option it will take some time to build Gradle. After that, you will get output on your device as given below.

Output:

Method 2

Here we are going to implement the wave loading view. Here we are manually increasing the value of progress and the wave height is increasing. But It can also be used as a timer to set.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add dependency

Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.

implementation 'me.itangqi.waveloadingview:library:0.3.5'

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="20dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <me.itangqi.waveloadingview.WaveLoadingView
        android:id="@+id/waveLoadingView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:wlv_borderColor="@color/colorAccent"
        app:wlv_borderWidth="3dp"
        app:wlv_progressValue="40"
        app:wlv_round_rectangle="true"
        app:wlv_shapeType="circle"
        app:wlv_titleCenter="Center Title"
        app:wlv_titleCenterColor="@android:color/white"
        app:wlv_titleCenterSize="24sp"
        app:wlv_titleCenterStrokeColor="@android:color/holo_blue_dark"
        app:wlv_titleCenterStrokeWidth="3dp"
        app:wlv_triangle_direction="north"
        app:wlv_waveAmplitude="70"
        app:wlv_waveColor="@color/colorAccent" />

    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100" />
    
</LinearLayout>

Step 4: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

MainActivity.java

import android.os.Bundle;
import android.widget.SeekBar;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    me.itangqi.waveloadingview.WaveLoadingView loadingView;
    SeekBar seekBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // initializing the layout
        seekBar = findViewById(R.id.seekbar);
        loadingView = findViewById(R.id.waveLoadingView);
        
        // changing the progress value according the value changed in seekbar
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                loadingView.setProgressValue(progress);
                String title = String.valueOf(progress);
                loadingView.setBottomTitle("");
                loadingView.setCenterTitle("");
                loadingView.setTopTitle("");
                if (progress < 50) {
                    // if progress is 50 then set bottom
                    // title as progress value
                    loadingView.setBottomTitle(title);
                } else if (progress == 50) {
                    // if progress is 50 then set center 
                    // title as progress value
                    loadingView.setCenterTitle(title);
                } else {
                    // if progress is 50 then set top 
                    // title as progress value
                    loadingView.setTopTitle(title);
                }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
}

Output:

Discrete Seekbar in Android

chinmaymunje96

Improve

Article Tags :

Practice Tags :

Java

Circular Fillable Loader in Android with Seekbar

Applications of Circular Fillable Loader

Attributes of Circular Fillable Loader

Method 1

Step by Step Implementation

Method 2

Step by Step Implementation

Similar Reads

Thank You!

What kind of Experience do you want to share?