SeekBar is a kind of progress bar, it will move automatically while the the music or video playing. Also it can be drag back and forth to particular portion of music or video.
In this little article we are configuring SeekBar in Music Player or Media Player application using Kotlin language in android studio. If you have already setup a media player or music player app just do the following steps to configure SeekBar. In case your are not done anything yet and want to start a fresh project read this first ( Simple Music Player App in Kotlin ).
Setup Layout
Update your activity_main.xml with SeekBar as below.
<?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:background="@color/thisAppColor"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imvSinger"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerHorizontal="true"
android:contentDescription="@string/app_name"
android:padding="4dp"
android:layout_above="@id/tvSongTitle"
android:src="@mipmap/ic_launcher"
android:layout_marginBottom="22sp"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/tvSongTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:singleLine="true"
android:ellipsize="marquee"
android:textAlignment="center"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:paddingLeft="15dip"
android:paddingRight="15dip"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="@string/song_title"/>
<LinearLayout
android:id="@+id/lnrSeekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="25sp"
android:layout_marginEnd="25sp"
android:layout_marginTop="31dp"
android:layout_below="@id/tvSongTitle">
<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:thumbTint="#ff007f"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="31dp"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_below="@id/lnrSeekBar">
<ImageView
android:id="@+id/imvPrev"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="@string/app_name"
android:padding="4dp"
android:src="@drawable/ic_previous"
tools:ignore="MissingConstraints" />
<ImageView
android:id="@+id/imvPlay"
android:layout_width="75dp"
android:layout_height="75dp"
android:contentDescription="@string/app_name"
android:padding="4dp"
android:src="@drawable/ic_play"
tools:ignore="MissingConstraints" />
<ImageView
android:id="@+id/imvNext"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="@string/app_name"
android:padding="4dp"
android:src="@drawable/ic_next_24"
tools:ignore="MissingConstraints" />
</LinearLayout>
</RelativeLayout>
Code for SeekBar
Initialize the seekBar as below, then add below piece of code in your kotlin class lateinit var seekBar:SeekBarseekBar =findViewById(R.id.seekBar)
seekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener{
override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) {
if (p2){
mediaPlayer.seekTo(p1)
}
}
override fun onStartTrackingTouch(p0: SeekBar?) {
}
override fun onStopTrackingTouch(p0: SeekBar?) {
}
})
runnable = Runnable {
seekBar.progress = mediaPlayer.currentPosition
handler.postDelayed(runnable,1000)
mediaPlayer.setOnCompletionListener {
mediaPlayer.stop()
mediaPlayer.release()
}
}
handler.postDelayed(runnable,1000)
Run the App It's time to run and test the app. You can see the seekBar moving while the application is playing and stopping which application is pausing. Also it can be drag and drop to a particular position. enjoy.