Circular Fillable Loader And SeekBar Using Android Application

Ravi Shankar
Dec 11, 2017
1.5k
0
1
Article

Introduction

This article demonstrates how to create circular fill loader to an android application using Android studio. This is an Android project allowing to realize a beautiful circular fillable loader to be used for splashscreen.

Let's start

Step 1

Open, Android studio create a new project in Android studio. When it prompts you to select the default activity, select Empty Activity and proceed.

Step 2

Next, go to Gradle Scripts >> build.gradle (Module:app),

Select build.gradle (Module:app). The app gradle compile code and buildTypes 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.

Compile Code

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.

Circular Fillable Loader

com.mikhaellopez.circularfillableloaders.CircularFillableLoaders this code applied to Circular Loader shap 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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/activity_main"
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:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
tools:context="com.example.ravir.circularlibrary.MainActivity">
<com.mikhaellopez.circularfillableloaders.CircularFillableLoaders
android:id="@+id/circularFillableLoaders"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:src="@drawable/alien" // import ur image png format
app:cfl_border="true"
app:cfl_border_width="12dp"
app:cfl_progress="80"
app:cfl_wave_amplitude="0.06"
app:cfl_wave_color="#F44336" />
<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="@+id/circularFillableLoaders"
android:layout_marginTop="37dp"
android:layout_alignParentLeft="true" />
</RelativeLayout>

Step 4

Next, go to app >> java >> your domain !! >> MainActivity.

Select MainActivity page. The Java code will appear, Just replace the following code

Java Code

package com.example.ravir.circularlibrary;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.SeekBar;
import com.mikhaellopez.circularfillableloaders.CircularFillableLoaders;
public class MainActivity extends AppCompatActivity {
CircularFillableLoaders circularFillableLoaders;
SeekBar seekBar;
int currentProgress = 80;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
circularFillableLoaders = (CircularFillableLoaders)findViewById(R.id.circularFillableLoaders);
seekBar = (SeekBar)findViewById(R.id.seekBar);
seekBar.setMax(100);
seekBar.setProgress(currentProgress);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean b) {
circularFillableLoaders.setProgress(progress);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
}
}

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 user's touch event. Whener a user touch the thumb for dragging this method will automatically called.

public void onStopTrackingTouch(SeekBar seekBar){..}

This listener method will be invoked at the end of user's touch event. Whener a user stop dragging the thumb this method will automatically called.

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.