Kotlin Android SeekBar

A type of ProgressBar with a draggable thumb is the Android SeekBar. The song, file download, and other progress can be moved by dragging the thumb left and right by the user.

There are two type of ProgressBar.

  • SeekBar with smooth progress.
  • SeekBar with discrete progress point.

In this article, you will learn how to create your Seek widget in Android. So let’s take exmple of SeekBar  in Android of Mobile application.

Example of Seekbar

                                

Syntax
  •   Smooth progress
 <SeekBar
android:id="@+id/seekbar_Default"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.174" />
  •    Discrete progress point
 <SeekBar
android:id="@+id/seekbar_Discrete"
style="@style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:max="10"
android:progress="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.333" />
 Step-by-Step Implementation 

 Step 1: Create a New Project in Android Studio (File >new  project). 


Step 2: Create an activity_main.xml file in your layout folder . path (res>layout)

Implement the same in​voke the following code inside activity_main.xml file. 

 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<SeekBar
android:id="@+id/seekbar_Default"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.174" />

<SeekBar
android:id="@+id/seekbar_Discrete"
style="@style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:max="10"
android:progress="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.333" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 3: Create an MainActivity.kt file in your package folder .

Implement the same invoke the fol​lowing code inside MainActivity.kt file.

 import android.os.Bundle
import android.widget.SeekBar
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity


class MainActivity : AppCompatActivity() {
var seekBarNormal: SeekBar? = null
var seekBarDiscrete: SeekBar? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

seekBarNormal = findViewById(R.id.seekbar_Default)
seekBarDiscrete = findViewById(R.id.seekbar_Discrete)

seekBarNormal?.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
override fun onProgressChanged(
seekBar: SeekBar, progress: Int,
fromUser: Boolean
) {
Toast.makeText(
applicationContext,
"seekbar progress: $progress",
Toast.LENGTH_SHORT
).show()
}

override fun onStartTrackingTouch(seekBar: SeekBar) {
Toast.makeText(applicationContext, "seekbar touch started!", Toast.LENGTH_SHORT)
.show()
}

override fun onStopTrackingTouch(seekBar: SeekBar) {
Toast.makeText(applicationContext, "seekbar touch stopped!", Toast.LENGTH_SHORT)
.show()
}
})

seekBarDiscrete?.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
Toast.makeText(
applicationContext,
"discrete seekbar progress: $progress",
Toast.LENGTH_SHORT
).show()
}

override fun onStartTrackingTouch(seekBar: SeekBar?) {
Toast.makeText(
applicationContext,
"discrete seekbar touch started!",
Toast.LENGTH_SHORT
).show()
}

override fun onStopTrackingTouch(seekBar: SeekBar?) {
Toast.makeText(
applicationContext,
"discrete seekbar touch stopped",
Toast.LENGTH_SHORT
).show()
}
})

}

}
Step 4 : Output of above example

                                                

Happy coding!


365Bloggy July 15, 2024
Share this post
Tags
SUBSCRIBE THIS FORM


Archive