Horizontal ProgressBar Android Kotlin

Horizontal ProgressBar Android Kotlin | Android Studio

In this tutorial I am going to tell you how you can design Horizontal ProgressBar in Android using Kotlin. Horizontal ProgressBar in Android is a View that shows the progress of the ongoing task in a horizontal bar. For this example we will also use an Android SeekBar to control the progress of the ProgressBar. So, lets start creating our Horizontal ProgressBar Android with Kotlin.

 

 

Horizontal ProgressBar Android Kotlin
Horizontal ProgressBar Android Kotlin

 

Horizontal ProgressBar Android Kotlin:-

1- Create a new Android Studio Project. Name it “HorizontalProgressBar”. Also you can give any name of your choice.

2- After your project builds successfully you will have two files. That is “MainActivity.kt” file and “activity_main.xml file”.

 

“activity_main.xml”

 

3- So now in your “activity_main.xml” file first change the default Constraint Layout to Relative Layout. Set the padding in your default Relative Layout to 16dp. Your default Relative Layout will look like this.

 

 

4- Now we will take a TextView, a ProgressBar and a SeekBar in our “activity_main.xml” file. ProgressBar will be a horizontal ProgressBar to display progress. SeekBar will be used to change the progress and the TextView will display the current progress of the ProgressBar.

5- TextView will have a “wrap_content” width and height. We assign an id (text_progress) to the TextView. We will set text and textSize of the TextView as well. The final TextView is going to be like this.

 

 

6- In ProgressBar we will set the style as ProgressBarStyleHorizontal. The id of the ProgressBar is (progressbar). Width should be “match_parent” and height should be “wrap_content”. After assigning some other attributes our ProgressBar will look like this.

 

 

7- For SeekBar width should be “match_parent” and height should be “wrap_content”. The id of the SeekBar is (seekbar).

 

 

8- After all this our final “activity_main.xml” file will look like this.

 

 

“MainActivity.kt”

 

9- Now come to your “MainActivity.kt” file. Here we will register a method setOnSeekBarChangeListener on our SeekBar. Because, this method uses the public static interface SeekBar.OnSeekBarChangeListener. It notifies the user when progress level is changed using a touch gesture.

10- You will see a red line error. This is because you have to implement the members of this interface. So, click the bulb icon on the left and implement all three methods. These methods are:

  • onProgressChanged
  • onStartTrackingTouch
  • onStopTrackingTouch

For this example we have to work only with the first method i.e onProgressChanged

11- We will use our ProgressBar here and apply setProgress method. We have to pass the parameter given in the onProgressChanged method. It might be a parameter with a different name in your case. In my case its p1

12- In last we will display that progress into our TextView.

 

 

13- The complete and final “MainActivity.kt” file will be like this.

 

 

So, here we complete our Horizontal ProgressBar Android Kotlin example. I hope now you have a good understanding of the Horizontal ProgressBar with SeekBar. So share this tutorial and do comment below in comments section. Have fun 🙂

 

OUTPUT

 

Horizontal ProgressBar Android Kotlin
Horizontal ProgressBar Android Kotlin

 

Horizontal ProgressBar Android Kotlin
50% progress. Horizontal ProgressBar Android Kotlin