In this Android SeekBar tutorial we will learn how to use SeekBar in Android Studio. We will be using a SeekBar and show the current progress of the SeekBar in a TextView. So, lets start our Android Seekbar Example using Kotlin.
What is an Android SeekBar?
SeekBar in Android is a widget which has a thumb icon. A user can drag the SeekBar thumb left to right in order to change the current progress of the SeekBar. SeekBar.OnSeekBarChangeListener is a callback that tells the clients that the SeekBar progress has been changed.
Android Kotlin SeekBar Example
1- Start with a new Android Studio Project. Name it “SeekbarExample”. Also, you can give any name to your project.
2- After your project builds successfully you will have two files. “MainActivity.kt” file and “activity_main.xml” file. So first we are going to design our SeekBar in “activity_main.xml” file.
“activity_main.xml”
3- Come to your “activity_main.xml” file and then change the default Layout file from Constraint Layout to Relative Layout. Because it is easier to work with Relative Layout.
4- So in our “activity_main.xml” file we will use two TextView and a SeekBar. First TextView will only display the text “SeekBar” while the other TextView will display the current progress of the SeekBar.
5- We add the SeekBar widget with wrap_content width and then wrap_content height. Then we will give a layout_margin of 25dp. The id of our SeekBar is (seekbar) and to display our SeekBar in the center of the screen we are using the attribute layout_centerInParent=”true”.
|
1 2 3 4 5 6 7 8 |
<SeekBar android:id="@+id/seekbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/textview_seekbar" android:layout_centerInParent="true" android:layout_margin="25dp" /> |
6- Finally the complete “activity_main.xml” file with two TextView and a SeekBar is 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 45 |
<?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" tools:context=".MainActivity"> <TextView android:id="@+id/textview_seekbar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="250dp" android:layout_centerHorizontal="true" android:text="SeekBar" android:textSize="30sp" android:textStyle="bold" android:textColor="#000000"/> <SeekBar android:id="@+id/seekbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/textview_seekbar" android:layout_centerInParent="true" android:layout_margin="25dp" /> <TextView android:id="@+id/textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/seekbar" android:layout_marginTop="20dp" android:layout_centerHorizontal="true" android:text="0%" android:textSize="30sp" android:textColor="#000000" /> </RelativeLayout> |
Android Seekbar Example
“MainActivity.kt”
7- So time to start coding in our “MainActivity.kt” file. So come to your “MainActivity.kt” file. Here we will use setOnChangeListener() method on our SeekBar to handle the changes.
8- In onCreate function we will use seekbar.setOnChangeListener() function and pass the reference of SeekBar.OnSeekBarChangeListener interface. It has three functions:
- onProgressChanged
- onStartTrackingTouch
- onStopTrackingTouch
We use onProgressChanged to show the current progress of the SeekBar in the TextView.
|
1 2 3 4 5 6 |
seekbar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener { override fun onProgressChanged(seekBar: SeekBar, progress: Int, b: Boolean) { textview.text = "Progress is : $progress%" } |
9- So, if you want to display any Toast message when a user drags the SeekBar to left or right then you can set the Toast message in function onStartTrackingTouch and onStopTrackingTouch.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
override fun onStartTrackingTouch(seekBar: SeekBar) { // if you want to show any toast message on start tracking //Do it here } override fun onStopTrackingTouch(seekBar: SeekBar) { // if you want to show any toast message on stop tracking //Do it here } |
10- So, the complete seekbar.setOnSeekBarChangeListener function will look like this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
seekbar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener { override fun onProgressChanged(seekBar: SeekBar, progress: Int, b: Boolean) { textview.text = "Progress is : $progress" } override fun onStartTrackingTouch(seekBar: SeekBar) { Toast.makeText(applicationContext, "start tracking", Toast.LENGTH_SHORT).show() } override fun onStopTrackingTouch(seekBar: SeekBar) { Toast.makeText(applicationContext, "stop tracking", Toast.LENGTH_SHORT).show() } }) |
11- To show “Progress is : 0%” on the start of the application use this code in the onCreate function.
|
1 |
textview.text = "Progress is : 0%" |
12- Note that (seekbar) is the id of our SeekBar and (textview) is the id of our TextView that will show the current progress of our SeekBar. Finally, our complete “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 33 34 35 36 37 38 |
package com.example.seekbarexample import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.widget.SeekBar import android.widget.Toast import kotlinx.android.synthetic.main.activity_main.* class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) textview.text = "Progress is : 0%" seekbar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener { override fun onProgressChanged(seekBar: SeekBar, progress: Int, b: Boolean) { textview.text = "Progress is : $progress%" } override fun onStartTrackingTouch(seekBar: SeekBar) { // if you want to show any toast message on start tracking //Do it here } override fun onStopTrackingTouch(seekBar: SeekBar) { // if you want to show any toast message on stop tracking //Do it here } }) } } |
So, I hope you understand how to use SeekBar with this Seekbar in Android. But if you still have any queries about this Android Seekbar Example you can ask in the comments section below.
OUTPUT
More Android Examples
- RecyclerView With Data Binding
- Android Custom Toolbar in Kotlin
- Circular Determinate ProgressBar in Kotlin
- Enable or Disable Wifi In Android Programmatically In Kotlin
- Check Internet Connection Programmatically in Kotlin
- Alert Dialog in Kotlin