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:-
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.
|
1 2 3 4 5 6 7 8 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" tools:context=".MainActivity"> |
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.
|
1 2 3 4 5 6 7 8 9 10 |
<TextView android:id="@+id/text_progress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="0%" android:textSize="30sp" android:layout_centerHorizontal="true" android:layout_above="@+id/progressbar" android:layout_marginBottom="30dp"/> |
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.
|
1 2 3 4 5 6 7 8 9 |
<ProgressBar android:id="@+id/progressbar" android:layout_width="match_parent" android:layout_height="wrap_content" style="?android:attr/progressBarStyleHorizontal" android:layout_alignParentStart="true" android:layout_above="@+id/seekbar" android:layout_marginBottom="25dp"/> |
7- For SeekBar width should be “match_parent” and height should be “wrap_content”. The id of the SeekBar is (seekbar).
|
1 2 3 4 5 6 7 |
<SeekBar android:id="@+id/seekbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_alignParentStart="true"/> |
8- After all this our final “activity_main.xml” file will look like this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" tools:context=".MainActivity"> <TextView android:id="@+id/text_progress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="0%" android:textSize="30sp" android:layout_centerHorizontal="true" android:layout_above="@+id/progressbar" android:layout_marginBottom="30dp"/> <ProgressBar android:id="@+id/progressbar" android:layout_width="match_parent" android:layout_height="wrap_content" style="?android:attr/progressBarStyleHorizontal" android:layout_alignParentStart="true" android:layout_above="@+id/seekbar" android:layout_marginBottom="25dp"/> <SeekBar android:id="@+id/seekbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_alignParentStart="true"/> </RelativeLayout> |
“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.
|
1 2 3 4 5 6 |
seekbar.setOnSeekBarChangeListener(object: SeekBar.OnSeekBarChangeListener{ override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) { progressbar.setProgress(p1) text_progress.setText("" + p1 + "%") } |
13- The complete and final “MainActivity.kt” file will be like this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
package com.example.horizontalprogressbar import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.widget.SeekBar import kotlinx.android.synthetic.main.activity_main.* class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) seekbar.setOnSeekBarChangeListener(object: SeekBar.OnSeekBarChangeListener{ override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) { progressbar.setProgress(p1) text_progress.setText("" + p1 + "%") } override fun onStartTrackingTouch(p0: SeekBar?) { } override fun onStopTrackingTouch(p0: SeekBar?) { } }) } } |
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
People Also Read: