Displaying Real-time Progress on Android SeekBar

The SeekBar is a fundamental UI component in Android that allows users to select a value by dragging a thumb along a track. A common requirement is to display the current progress value dynamically, updating in real-time as the user interacts with the slider. This guide demonstrates how to achieve this functionality.

Core Mechanism

The key to implementing dynamic progress display is to listen for changes in the SeekBar's position. This is accomplished by attaching an OnSeekBarChangeListener and handling the onProgressChanged callback, which is invoked whenever the progress value is updated.

Implementation Steps

1. Define the Layout

First, add a SeekBar and a TextView to your XML layout file. The TextView will be used to show the current progress value.

<SeekBar
   android:id="@+id/progress_slider"
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

<TextView
   android:id="@+id/progress_display"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Progress: 0" />

2. Implement the Listener in Kotlin

In your Activity or Fragment, retreive references to the SeekBar and TextView. Then, set an OnSeekBarChangeListener on the SeekBar. Inside the onProgressChanged method, update the TextView's text with the new progress value.

// In your Activity or Fragment
class MainActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val slider: SeekBar = findViewById(R.id.progress_slider)
       val display: TextView = findViewById(R.id.progress_display)

       slider.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
           override fun onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean) {
               // Update the display with the current progress
               display.text = "Progress: $progress"
           }

           override fun onStartTrackingTouch(seekBar: SeekBar) {
               // This method is called when the user starts dragging the thumb
           }

           override fun onStopTrackingTouch(seekBar: SeekBar) {
               // This method is called when the user stops dragging the thumb
           }
       })
   }
}

3. Full Example

Here is the complete code snippet combining the layout and the Kotlin logic. The onProgressChanged callback ensures the progress\_display TextView is updated immediately as the user moves the slider.

// activity_main.xml
<SeekBar
   android:id="@+id/progress_slider"
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

<TextView
   android:id="@+id/progress_display"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Progress: 0" />

// MainActivity.kt
class MainActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val slider: SeekBar = findViewById(R.id.progress_slider)
       val display: TextView = findViewById(R.id.progress_display)

       slider.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
           override fun onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean) {
               display.text = "Progress: $progress"
           }

           override fun onStartTrackingTouch(seekBar: SeekBar) {}
           override fun onStopTrackingTouch(seekBar: SeekBar) {}
       })
   }
}