Android Kotlin AppCompatSeekBar

A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch the thumb and drag left or right to set the current progress level or use the arrow keys .
Lets see a sample example .


1. XML Layout

  1. Create XML Layout activity_main.xml , this will be set as content view for launcher Activity (MainActivity.kt) .
  2. Added Seekbar To the xml layout .
file : activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        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"
        android:orientation="vertical"
        android:padding="28dp">

    <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/result"
            android:layout_marginBottom="40dp"
            android:textSize="20sp"
            android:gravity="center"/>

    <androidx.appcompat.widget.AppCompatSeekBar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/seekbar01"/>

</LinearLayout>

2. OnSeekBarChangeListener


SeekBar.OnSeekBarChangeListener is a callback that notifies clients when the progress level has been changed. This includes changes that were initiated by the user through a touch gesture or arrow key/trackball .
  1. onProgressChanged : Notification that the progress level has changed.
  2. onStartTrackingTouch : Notification that the user has started a touch gesture.
  3. onStopTrackingTouch : Notification that the user has finished a touch gesture.
seekbar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
            override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
                result.setText(String.format("Progress:  %d", progress))
            }

            override fun onStartTrackingTouch(seekBar: SeekBar?) {
                Log.d("SeekBar", "onStartTrackingTouch: " + String.format("Start %d", seekBar?.progress))
            }

            override fun onStopTrackingTouch(seekBar: SeekBar?) {
                Log.d("SeekBar", "onStopTrackingTouch: " + String.format("Start %d", seekBar?.progress))
            }
        })

3. Activity


  1. Create a koltin class MainActivity.kt and extend it to AppCompatActivity class .
  2. Override onCreate function and set the content of this MainActivity with above defined xml layout (activity_main.xml).
  3. Set the onSeekBarChangeListener for seekbar  inside onProgressChanged set the progress level to TextView. 

file : MainActivity.java
package com.tutorialsbuzz.androidseekbar

import android.os.Bundle
import android.util.Log
import android.widget.SeekBar
import androidx.appcompat.app.AppCompatActivity
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(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
                result.setText(String.format("Progress:  %d", progress))
            }

            override fun onStartTrackingTouch(seekBar: SeekBar?) {
                Log.d("SeekBar", "onStartTrackingTouch: " + String.format("Start %d", seekBar?.progress))
            }

            override fun onStopTrackingTouch(seekBar: SeekBar?) {
                Log.d("SeekBar", "onStopTrackingTouch: " + String.format("Start %d", seekBar?.progress))
            }
        })
    }
}


No comments:

Post a Comment