Welcome to Kotlin Horizontal Progressbar Android Example With Percentage Programmatically.
In this example, we will create three different horizontal progress bars which will indicate progress using percentage.
Processes like fetching data from remote server, downloading, uploading, etc. require the user to wait for some time.
Now how to tell user how much time they need to wait ?
To accomplish this purpose, showing horizontal progress bar to the user is great option.
We can use percentage as an indicator to tell user how much time is still there they need to wait.
First of all, use the below video for output presentation.
Now you need to follow all the below steps to make an android demo app shown in the above video.
Step 1. XML files In Drawable
Go to your android studio and create a new project in it.
While you make a new project, select Kotlin as the primary source language otherwise system will set JAVA which default one.
Navigate to the app->res->drawable directory.
Inside this directory, make a new XML layout file and give it a name as progress.xml
Source code for progress.xml file is as the following
<?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>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:startColor="#ff9d9e9d" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#80e664e1"
android:centerY="0.75"
android:endColor="#a0ff00e5"
android:startColor="#80ff00ff" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:endColor="#800000"
android:startColor="#ff3a33" />
</shape>
</clip>
</item>
</layer-list>
Above XML file will create the progressbar which are showing red and violate lines inside the progress bar.
Now create another XML layout file and set it’s name as the progress_limit.xml
progress_limit.xml file should contain the below source snippet
<?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>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:startColor="#ff9d9e9d" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:startColor="#80ffd300" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:endColor="#008000"
android:startColor="#33FF33" />
</shape>
</clip>
</item>
</layer-list>
Above XML file will create the horizontal progress bar with yellow and red colors.
If you do not have watched the output video please check it out so that you can have clear idea which progress bar contains which colors.
Step 2. Main Writings
When you created a new project in android studio, system should have created two file automatically : activity_main.xml and MainActivity.kt
Among these two files, add the following source lines inside 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:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:text="0/100"/>
<ProgressBar
android:id="@+id/pb"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
style="@android:style/Widget.Holo.Light.ProgressBar.Horizontal" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn"
android:text="start above progress bar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv2"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:text="0/100"/>
<ProgressBar
android:id="@+id/pb2"
android:layout_marginTop="10dp"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:max="100"
android:maxHeight="10dip"
android:minHeight="10dip"
android:progress="0"
android:secondaryProgress="100"
android:progressDrawable="@drawable/progress_limit" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn2"
android:text="start above progress bar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv3"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:text="0/100"/>
<ProgressBar
android:id="@+id/pb3"
android:layout_marginTop="10dp"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:max="100"
android:maxHeight="10dip"
android:minHeight="10dip"
android:progress="0"
android:secondaryProgress="100"
android:progressDrawable="@drawable/progress" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn3"
android:text="start above progress bar"/>
</LinearLayout>
We are going to show three horizontal progress bars so I have taken three Text Views, three progress bars and three buttons.
Each text view will show the completion status of the process in the percentage format ( From 1 to 100 ) .
Each button click will start the each progress bar.
So see the below code
<ProgressBar
android:id="@+id/pb"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
style="@android:style/Widget.Holo.Light.ProgressBar.Horizontal" />
Above represents the first progress bar. This is very basic and simple progress bar which will use the built in style in android system.
So we do not need to attach any external XML file here.
Now read the following source code
<ProgressBar
android:id="@+id/pb2"
android:layout_marginTop="10dp"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:max="100"
android:maxHeight="10dip"
android:minHeight="10dip"
android:progress="0"
android:secondaryProgress="100"
android:progressDrawable="@drawable/progress_limit" />
Above lines are representing the second progress bar.
Here, I have attached the XML file from drawable folder which is progress_limit.xml
This external XML layout file will set the style of this progress bar. progress_limit.xml will set two colors, red and green in the second horizontal progress bar.
Now below is the coding figure for the last progress bar,
<ProgressBar
android:id="@+id/pb3"
android:layout_marginTop="10dp"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:max="100"
android:maxHeight="10dip"
android:minHeight="10dip"
android:progress="0"
android:secondaryProgress="100"
android:progressDrawable="@drawable/progress" />
Above coding lines will draw the last progress bar. You can see that we have set the XML file progress.xml in the above lines.
This progress bar will have the red and violate colors to indicate the progress of the process.
Now go to your MainActivity.kt file and write down the below code structure in it.
import android.os.Handler
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.ProgressBar
import android.widget.TextView
class MainActivity : AppCompatActivity() {
private var tv: TextView? = null
private var tv2: TextView? = null
private var tv3: TextView? = null
private var btn: Button? = null
private var btn2: Button? = null
private var btn3: Button? = null
private var progressBar: ProgressBar? = null
private var progressBar2: ProgressBar? = null
private var progressBar3: ProgressBar? = null
private var progressStatus = 0
private var progressStatus2 = 0
private var progressStatus3 = 0
private val handler = Handler()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
tv = findViewById(R.id.tv)
btn = findViewById(R.id.btn)
progressBar = findViewById(R.id.pb)
tv2 = findViewById(R.id.tv2)
btn2 = findViewById(R.id.btn2)
progressBar2 = findViewById(R.id.pb2)
tv3 = findViewById(R.id.tv3)
btn3 = findViewById(R.id.btn3)
progressBar3 = findViewById(R.id.pb3)
btn!!.setOnClickListener {
if (progressStatus == 100) {
progressStatus = 0
}
Thread(Runnable {
while (progressStatus < 100) {
// Update the progress status
progressStatus += 1
// Try to sleep the thread for 20 milliseconds
try {
Thread.sleep(20) //3 seconds
} catch (e: InterruptedException) {
e.printStackTrace()
}
// Update the progress bar
handler.post {
progressBar!!.progress = progressStatus
// Show the progress on TextView
tv!!.text = "$progressStatus/100"
}
}
}).start() // Start the operation
}
btn2!!.setOnClickListener {
if (progressStatus2 == 100) {
progressStatus2 = 0
}
Thread(Runnable {
while (progressStatus2 < 100) {
// Update the progress status
progressStatus2 += 1
// Try to sleep the thread for 20 milliseconds
try {
Thread.sleep(20) //3 seconds
} catch (e: InterruptedException) {
e.printStackTrace()
}
// Update the progress bar
handler.post {
progressBar2!!.progress = progressStatus2
// Show the progress on TextView
tv2!!.text = "$progressStatus2/100"
}
}
}).start() // Start the operation
}
btn3!!.setOnClickListener {
if (progressStatus3 == 100) {
progressStatus3 = 0
}
Thread(Runnable {
while (progressStatus3 < 100) {
// Update the progress status
progressStatus3 += 1
// Try to sleep the thread for 20 milliseconds
try {
Thread.sleep(20) //3 seconds
} catch (e: InterruptedException) {
e.printStackTrace()
}
// Update the progress bar
handler.post {
progressBar3!!.progress = progressStatus3
progressBar3!!.secondaryProgress = progressStatus3 + 15
// Show the progress on TextView
tv3!!.text = "$progressStatus3/100"
}
}
}).start() // Start the operation
}
}
}
Main Lines in Details
Now let us see what main activity really do.
First of all, see the below code lines
private var tv: TextView? = null
private var tv2: TextView? = null
private var tv3: TextView? = null
private var btn: Button? = null
private var btn2: Button? = null
private var btn3: Button? = null
private var progressBar: ProgressBar? = null
private var progressBar2: ProgressBar? = null
private var progressBar3: ProgressBar? = null
private var progressStatus = 0
private var progressStatus2 = 0
private var progressStatus3 = 0
private val handler = Handler()
First three lines are creating objects of text view class. Then after next three lines are creating object of Button class.
Then three lines will make object of ProgressBar class.
After that, three lines are creating one variable which will help us to identify the status of the progress of the progress bars.
Now see the below coding lines
btn!!.setOnClickListener {
if (progressStatus == 100) {
progressStatus = 0
}
Thread(Runnable {
while (progressStatus < 100) {
// Update the progress status
progressStatus += 1
// Try to sleep the thread for 20 milliseconds
try {
Thread.sleep(20) //3 seconds
} catch (e: InterruptedException) {
e.printStackTrace()
}
// Update the progress bar
handler.post {
progressBar!!.progress = progressStatus
// Show the progress on TextView
tv!!.text = "$progressStatus/100"
}
}
}).start() // Start the operation
}
When the user clicks the button, compiler will run the above code.
Compiler will first check how many percentage of progress bar have completed. If it is 100 then it will set it’s value as 0.
Then after it will start one thread. This thread will increment the value of variable progressStatus in it’s every iteration.
During this thread, compiler will also update the value of the text view during each iteration. Below is the line which is updating the text view value.
tv!!.text = "$progressStatus/100"
Similarly, you can find the button click code for other two buttons.
We have used Kotlin in this example. If you want this same example using JAVA language then read :
Android Horizontal ProgressBar Tutorial
Download Code For Kotlin Horizontal Progressbar Android From Github
https://github.com/demonuts/Kotlin-Horizontal-Progressbar-Android-Example-With-Percentage