Circular Fillable Loader And SeekBar Using Android Application

Introduction

 
This article demonstrates how to create a circular fill loader to an android application using the Android studio. This is an Android project allowing us to realize a beautiful circular fillable loader to be used for splash screen.
 
Let's start
 
Step 1
 
Open, Android studio creates a new project in Android studio. When it prompts you to select the default activity, select Empty Activity and proceed.
 
image1 
 
Step 2
 
Next, go to Gradle Scripts >> build. gradle (Module: app),
 
image2
 
Select build.gradle (Module: app). The app Gradle compile code and build types will appear. Just replace that the following code. To make a circular fillable loader add Circular Fillable Loader in your layout XML and add Circular Fillable Loader library in your project or you can also grab it via Gradle.
 
image3 
 
Compile Code
  1. compile 'com.mikhaellopez:circularfillableloaders:1.2.0'
Step 3
 
Next, go to app  >> res >> layout >> activity_main.xml. Select activity_main.xml page. The xml code will appear, Just the following code.
 
image4 
 

Circular Fillable Loader

 
com.mikhaellopez.circularfillableloaders.CircularFillableLoaders this code applied to Circular Loader shape will appear.
 

SeekBar Controller

 
A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch the thumb and drag left or right to set the current progress level or use the arrow keys. Placing focusable widgets to the left or right of a SeekBar is discouraged. 
 
CircularImageView Properties 
  • app:cfl_border="true"   -->   default true
  • app:cfl_border_width="12dp" -->  default 4dp
  • app:cfl_progress="80" -->    default 0
  • app:cfl_wave_amplitude="0.06" -->    default 0.05f(between 0.00f and 0.10f)
  • app:cfl_wave_color="#F44336" --> default Back color
XML Code
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout  
  3.     android:id="@+id/activity_main"  
  4.     xmlns:android="http://schemas.android.com/apk/res/android"  
  5.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  6.     xmlns:tools="http://schemas.android.com/tools"  
  7.     android:layout_width="match_parent"  
  8.     android:layout_height="match_parent"  
  9.     android:paddingBottom="16dp"  
  10.     android:paddingLeft="16dp"  
  11.     android:paddingRight="16dp"  
  12.     android:paddingTop="16dp"  
  13.     tools:context="com.example.ravir.circularlibrary.MainActivity">  
  14.   
  15.     <com.mikhaellopez.circularfillableloaders.CircularFillableLoaders  
  16.         android:id="@+id/circularFillableLoaders"  
  17.         android:layout_width="200dp"  
  18.         android:layout_height="200dp"  
  19.         android:layout_centerInParent="true"  
  20.         android:src="@drawable/alien" // import ur image png format
  21.         app:cfl_border="true"  
  22.         app:cfl_border_width="12dp"  
  23.         app:cfl_progress="80"  
  24.         app:cfl_wave_amplitude="0.06"  
  25.         app:cfl_wave_color="#F44336" />  
  26.   
  27.     <SeekBar  
  28.         android:id="@+id/seekBar"  
  29.         android:layout_width="match_parent"  
  30.         android:layout_height="wrap_content"  
  31.         android:layout_alignParentStart="true"  
  32.         android:layout_below="@+id/circularFillableLoaders"  
  33.         android:layout_marginTop="37dp"  
  34.         android:layout_alignParentLeft="true" />  
  35.   
  36. </RelativeLayout>  
Step 4
 
Next, go to app >> java >> your domain !! >> MainActivity.
 
image5 
 
Select the MainActivity page. The Java code will appear, Just replace the following code
 
image6
  
 
Java Code
  1. package com.example.ravir.circularlibrary;  
  2.   
  3. import android.support.v7.app.AppCompatActivity;  
  4. import android.os.Bundle;  
  5. import android.widget.SeekBar;  
  6. import com.mikhaellopez.circularfillableloaders.CircularFillableLoaders;  
  7.   
  8. public class MainActivity extends AppCompatActivity {  
  9.   
  10.     CircularFillableLoaders circularFillableLoaders;  
  11.     SeekBar seekBar;  
  12.     int currentProgress = 80;  
  13.   
  14.     @Override  
  15.     protected void onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);  
  17.         setContentView(R.layout.activity_main);  
  18.   
  19.         circularFillableLoaders = (CircularFillableLoaders)findViewById(R.id.circularFillableLoaders);  
  20.   
  21.   
  22.         seekBar = (SeekBar)findViewById(R.id.seekBar);  
  23.         seekBar.setMax(100);  
  24.         seekBar.setProgress(currentProgress);  
  25.   
  26.         seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {  
  27.             @Override  
  28.             public void onProgressChanged(SeekBar seekBar, int progress, boolean b) {  
  29.                 circularFillableLoaders.setProgress(progress);  
  30.   
  31.             }  
  32.   
  33.             @Override  
  34.             public void onStartTrackingTouch(SeekBar seekBar) {  
  35.   
  36.             }  
  37.   
  38.             @Override  
  39.             public void onStopTrackingTouch(SeekBar seekBar) {  
  40.   
  41.             }  
  42.         });  
  43.     }  
  44. }  
public void onProgressChangeListener (new SeekBar. OnSeekBar ChangeListner() {...}  )
 
This listener method will be invoked if any change is made in the SeekBar.
 
public void onStartTrackingTouch(SeekBar seekBar){..}
 
This listener method will be invoked at the start of the user's touch event. Whenever a user touches the thumb for dragging this method will automatically be called. 
 
public void onStopTrackingTouch(SeekBar seekBar){..} 
 
This listener method will be invoked at the end of the user's touch event. Whenever a user stops dragging the thumb this method will automatically call.  
 
Step 5
 
Next, go to Android Studio and Deploy the application, Select Emulator or your Android mobile with USB debugging enabled. Give it a few sec to make installations and set permission.
 
image7
 
Step 6
 
Run the application in your desired emulator (Shift + F10)
 
image8 
 

Summary

 
Finally, we have successfully created Circular Fillable Loader View. Later we will discuss more Android Applications.