This post is regarding Kotlin Indeterminate Circular Progressbar Android Example.
In android app, we use progress bar to show some on going loading process.
For example, fetching details from the remote server or local server like SQLite, saving image etc. process takes some time.
To request the user to wait until these various processes are finished, we can show progress bar to the user.
Progress bar can be of different types like circular, horizontal, determinate or indeterminate.
We will create indeterminate circulate progress bar with Kotlin in this tutorial.
First of all, see the below video so that you can have idea about the results of this example.
Meaning of Indeterminate
Indeterminate means without any calculation. You can show user how much part of process is completed and how much is left which is called determinate.
For example, you can show percentage of process which is finished like 40% thus, 60% process is left ( User can have idea how much time he still needs to wait from determinate progress bar)
While indeterminate is exact opposite from determinate.
We do not show any percentage just show the progress bar and user has to until the progress bar disappears.
Below are the steps to establish this example.
Step 1. Download Image
In this example, we need one image. So first download the image by clicking the below link.
Click here to download the image.
After downloading the image, save into the app->res->drawable folder.
Step 2. Making XML in Drawable
In the directory app->res->drawable folder, make a new XML layout file.
Set the name of this file as first.xml and add the below code block in it.
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:toDegrees="360">
<shape android:shape="oval">
<size
android:height="48dp"
android:width="48dp" />
<gradient
android:type="sweep"
android:startColor="#00000000"
android:centerColor="#e97575"
android:endColor="#c70505" />
</shape>
</rotate>
This file will help to create red circular progress bar as you have shown in the output video.
Now in the same directory make another file with name second.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape
android:shape="ring"
android:innerRadius="30dp"
android:thickness="20dp"
android:useLevel="false">
<solid android:color="#000000" />
</shape>
</item>
<item android:id="@android:id/progress">
<rotate android:toDegrees="360">
<shape
android:shape="ring"
android:innerRadius="35dp"
android:thickness="10dp"
android:useLevel="false">
<gradient
android:type="sweep"
android:startColor="#00000000"
android:endColor="#fffb03" />
</shape>
</rotate>
</item>
</layer-list>
This file will create the yellow progress bar. You can see that there are many attributes are there.
You can change the inner as well as outer color.
android:shape=”ring” :This will enable us to change the shape of the progress bar.
android:innerRadius=”30dp” : This line will define the length of the radius.
android:thickness=”10dp” : This will define the thickness of the circle border.
Now make another XML file and set it’s name as third.xml
Write the below code structure in this third.xml file.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape
android:shape="ring"
android:innerRadius="30dp"
android:thickness="20dp"
android:useLevel="false">
<gradient
android:type="radial"
android:gradientRadius="100"
android:startColor="#FFF"
android:endColor="#dc1b1b" />
<stroke
android:width="1dp"
android:color="#AAA" />
</shape>
</item>
<item android:id="@android:id/progress">
<rotate android:toDegrees="360">
<shape
android:shape="ring"
android:innerRadius="35dp"
android:thickness="10dp">
<gradient
android:type="radial"
android:gradientRadius="100"
android:startColor="#dcdc0b"
android:endColor="#00d4ff" />
</shape>
</rotate>
</item>
</layer-list>
And at last, create a file named fourth.xml and give below code lines to it.
<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/image"
android:pivotX="50%"
android:pivotY="50%" />
An image we downloaded in the first step is used in the above file.
Compiler will rotate this image in the circular mode and thus our fourth progress bar will takes place.
Step 3. Making Four Activities
Now we will create separate activity to show each progress bar.
Make a new activity and give it a name FirstActivity.
In your activity_first.xml file, add the following lines
<?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:orientation="vertical"
android:gravity="center"
tools:context=".FirstActivity">
<ProgressBar
android:layout_width="100dp"
android:layout_height="100dp"
android:indeterminateDrawable="@drawable/first"
android:indeterminateDuration="2000" />
</LinearLayout>
I have added one progress bar in the above file.
This progress bar uses a file first.xml as it’s drawable.
A property indeterminateDuration defines the time in which progress bar will complete one round.
Code for FirstActivity.kt is as the below
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
class FirstActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_first)
}
}
Now make a second activity with the name Second Activity.
In your activity_second.xml file, add the following lines
<?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:orientation="vertical"
android:gravity="center"
tools:context=".SecondActivity">
<ProgressBar
android:layout_width="100dp"
android:layout_height="100dp"
android:indeterminateDrawable="@drawable/second"
android:indeterminateDuration="1000" />
</LinearLayout>
This file is for second progress bar and it will use second.xml of the drawable folder.
Following is for SecondActivity.kt file.
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
class SecondActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_second)
}
}
Now create another activity with name ThirdActivity.
In the activity_third.xml file, add the below lines of code
<?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:orientation="vertical"
android:gravity="center"
tools:context=".ThirdActivity">
<ProgressBar
android:layout_width="100dp"
android:layout_height="100dp"
android:indeterminateDrawable="@drawable/third"
android:indeterminateDuration="1500" />
</LinearLayout>
Compiler will use the file third.xml from the drawable folder in the above file.
Following should be the coding lines for ThirdActivity.kt
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
class ThirdActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_third)
}
}
Create the last activity and set it’s name as FourthActivity.
In your activity_fourth.xml file, insert the following
<?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:orientation="vertical"
android:gravity="center"
tools:context=".FourthActivity">
<ProgressBar
android:indeterminateDrawable="@drawable/fourth"
android:layout_height="100dp"
android:layout_width="100dp">
</ProgressBar>
</LinearLayout>
It also has one progress bar. This progress bar is using fourth.xml file from drawable folder.
Step 4. Final Activity
Now you should have two files in your android studio : activity_main.xml and MainActivity.kt
Following are the coding lines you should have in your activity_main.xml file.
<?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:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn1"
android:text="First Progress Bar"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn2"
android:text="Second Progress Bar"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn3"
android:text="Third Progress Bar"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn4"
android:text="Fourth Progress Bar"/>
</LinearLayout>
There are four buttons in the above main XML layout file.
Now in your MainActivity.kt file, write down the below lines
import android.content.Intent
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
class MainActivity : AppCompatActivity() {
private var btn1: Button? = null
private var btn2: Button? = null
private var btn3: Button? = null
private var btn4: Button? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
btn1 = findViewById(R.id.btn1)
btn2 = findViewById(R.id.btn2)
btn3 = findViewById(R.id.btn3)
btn4 = findViewById(R.id.btn4)
btn1!!.setOnClickListener {
val intent = Intent(this@MainActivity, FirstActivity::class.java)
startActivity(intent)
}
btn2!!.setOnClickListener {
val intent = Intent(this@MainActivity, SecondActivity::class.java)
startActivity(intent)
}
btn3!!.setOnClickListener {
val intent = Intent(this@MainActivity, ThirdActivity::class.java)
startActivity(intent)
}
btn4!!.setOnClickListener {
val intent = Intent(this@MainActivity, FourthActivity::class.java)
startActivity(intent)
}
}
}
You can see that I have found the all four buttons in this main kotlin file.
There are four click events for all the four buttons.
Every click event of the button will open one activity and every activity will show one indeterminate circular progress bar.