Read for Kotlin Indeterminate Horizontal Progressbar Android Example.
In this tutorial, you will learn how to create indeterminate horizontal progressbar with kotlin in android studio.
We use progress bars to indicate some ongoing process to the user.
In android, we can have many options to create horizontal progress bars with various styles and effects.
We can also define our custom style to create horizontal progress bar of our own design.
First of all, see the following output views.
Step 1. XML Files
Make a new project in the android studio.
Now navigate to the app->res->drawable folder.
Inside this folder, make a new XML layout file and set it’s name as second.xml
You need to add the following source code lines inside second.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>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#eaea7f"
android:centerY="0.75"
android:endColor="#e7e551"
android:startColor="#dfcf21" />
</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:centerColor="#8064e694"
android:centerY="0.75"
android:endColor="#a000ff2a"
android:startColor="#8033ff00" />
</shape>
</clip>
</item>
</layer-list>
In this example, we will create four horizontal progress bars.
Among them, three will use the built in style of android system.
One will have the custom design. For this, custom design progress bar, we have created the above file second.xml
Now let us see what properties are performing which tasks.
If you have seen in the output video, there is a second progress bar which have yellow background, green color as the primary progress and violate as the secondary progress.
This three colored progress bar is created using second.xml file.
Below code snippet will create the yellow background of horizontal progress bar.
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#eaea7f"
android:centerY="0.75"
android:endColor="#e7e551"
android:startColor="#dfcf21" />
</shape>
</item>
You can change the radius of the corners by changing the value of android:radius=”5dp” property.
Then various properties inside <gradient> tag will help us to create different effects at different angle in the background.
“android:id/background” property suggests the compiler that above code snippet represent the style and color for the background of the indeterminate horizontal progress bar.
Now read the below coding structure
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#8064e694"
android:centerY="0.75"
android:endColor="#a000ff2a"
android:startColor="#8033ff00" />
</shape>
</clip>
</item>
Above code is for the primary progress which has green color.
You can see that the id property holds the value as “progress” in the above snippet (android:id=”@android:id/progress”).
Similarly, you can write the code for making second progress which has violate color.
Following is the code for the second progress.
<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>
You can see that it has similar attributes to those of above two code snippets.
Id, centerColor, endColor, <gradient> tag etc. are same, just the values are different.
Step 2. Activity Layout
Now open up your main layout XML file activity_main.xml and add the following source lines in it.
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:textSize="25sp"
android:text="Below is the First Progress bar"/>
<ProgressBar
android:id="@+id/progressBar1"
android:layout_marginTop="20dp"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:indeterminateOnly="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:textSize="25sp"
android:text="Below is the Second Progress bar"/>
<ProgressBar
android:id="@+id/progressBar2"
style="@android:style/Widget.ProgressBar.Horizontal"
android:indeterminateOnly="true"
android:layout_marginTop="40dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:textSize="25sp"
android:text="Below is the Third Progress bar"/>
<ProgressBar
android:id="@+id/progressBar"
style="@android:style/Widget.Holo.ProgressBar.Horizontal"
android:layout_marginTop="40dp"
android:indeterminateOnly="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:textSize="25sp"
android:text="Below is the Fourth Progress bar"/>
<ProgressBar
android:id="@+id/pb4"
style="@android:style/Widget.Holo.ProgressBar.Horizontal"
android:layout_marginTop="40dp"
android:progressDrawable="@drawable/second"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
There are four text views and four progress bars are there.
Text views are just saying that “below is first progress bar” , “below is second progress bar” etc.
Now look at the first progress bar. I have used android’s built in style for this.
Similarly, second and third progress bar have also style from android’s in built system.
Now look at the fourth progress bar, it consists one attribute called “android:progressDrawable”
As the value of this “android:progressDrawable” property, we can set the XML file second.xml and thus, it builds our custom progress bar.
Now our work for custom horizontal indeterminate progress bar is not finish yet.
We still need to write some code in Kotlin file. So open your MainActivity.kt file.
You should write down the following coding lines in MainActivity.kt
import android.os.Handler
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.ProgressBar
class MainActivity : AppCompatActivity() {
private var progressBar4: ProgressBar? = null
private var pStatus = 0
private var handler: Handler? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
progressBar4 = findViewById(R.id.pb4)
handler = Handler()
Thread(Runnable {
// TODO Auto-generated method stub
while (pStatus < 100) {
pStatus++
if (pStatus == 99) {
pStatus = 0
}
handler!!.post {
// TODO Auto-generated method stub
progressBar4!!.progress = pStatus
progressBar4!!.secondaryProgress = pStatus + 15
}
try {
// Sleep for 200 milliseconds.
// Just to display the progress slowly
Thread.sleep(16) //thread will take approx 3 seconds to finish
} catch (e: InterruptedException) {
e.printStackTrace()
}
}
}).start()
}
}
Details on Above
First of all, see the following code
private var progressBar4: ProgressBar? = null
private var pStatus = 0
private var handler: Handler? = null
First line is creating the object of the ProgressBar class.
Second is making an integer variable called pStatus and it’s value is 0.
Third one will give us an object of the Handler class.
Now focus on the following coding lines.
handler = Handler()
Thread(Runnable {
// TODO Auto-generated method stub
while (pStatus < 100) {
pStatus++
if (pStatus == 99) {
pStatus = 0
}
handler!!.post {
// TODO Auto-generated method stub
progressBar4!!.progress = pStatus
progressBar4!!.secondaryProgress = pStatus + 15
}
try {
// Sleep for 200 milliseconds.
// Just to display the progress slowly
Thread.sleep(16) //thread will take approx 3 seconds to finish
} catch (e: InterruptedException) {
e.printStackTrace()
}
}
}).start()
Above is the code to start the handler and thread.
It will start with the while loop. It will check the value of the variable pStatus.
If the value pStatus is less than 100 then it will go inside the body of while loop.
Here, it will increase the value of pStatus by 1 and then it will check one if condition.
Compiler will check whether the value of pStatus is 99 or not. If it is 99 then it will set the value of pStatus to 0.
This if condition is responsible for the infinite running of the thread hence the infinite running of the horizontal progress bar.
After this, it will set the primary and secondary progress value to the progress bar.
Download Code On Github
https://github.com/demonuts/Kotlin-Indeterminate-Horizontal-Progressbar-Android-Example
Other Progress bar Tutorials
Android Circular Progress Bar With Percentage Example