[Android & Kotlin] ボリューム入力ができるSeekBar

SeekBarはオーディオのボリューム入力のようにつまみを掴んでレベルを変えられるものです。ユーザーの数値入力を感覚的にし簡略化することができます。
　

Android Studio
2024.1.1

SeekBar

SeekBarのツマミは「draggable thumb」(ドラッグ可能な親指?)と呼ばれていて、その位置を判断して数値にします。
　

Seekbarのメソッド

リスナー、setOnSeekBarChangeListener を設定することでツマミのドラッグ前後とドラッグ中の状態に設定を追加することができます。
　

//ツマミがドラッグされると呼ばれる
override fun onProgressChanged(
    seekBar: SeekBar, progress: Int, fromUser: Boolean) {
    // ...
}

// ツマミがドラッグされると呼ばれる
override fun onStartTrackingTouch(seekBar: SeekBar) {
}

//ツマミがタッチされた時に呼ばれる
override fun onStopTrackingTouch(seekBar: SeekBar) {
}

//ツマミがドラッグされると呼ばれる

override fun onProgressChanged(

seekBar: SeekBar, progress: Int, fromUser: Boolean) {

// ...

}

// ツマミがドラッグされると呼ばれる

override fun onStartTrackingTouch(seekBar: SeekBar) {

}

//ツマミがタッチされた時に呼ばれる

override fun onStopTrackingTouch(seekBar: SeekBar) {

}

　
ドラッグ中のonProgressChanged() では progress が見えているのでこの値を使って TextView に表示してみます。

サンプルコード

まとめのコードです。Kotlin Android Extensions が非推奨になったので代わりのViewBindingを使います。
　
MainActivity.kt

//package com.example.kotlinseekbar

import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import android.widget.SeekBar
import com.example.kotlinseekbar.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        ViewCompat.setOnApplyWindowInsetsListener(binding.root) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }

        // seekbar 初期値
        binding.seekbar.setProgress(0)
        // seekbar 最大値
        binding.seekbar.setMax(100)

        binding.seekbar.setOnSeekBarChangeListener(
            object : SeekBar.OnSeekBarChangeListener {
                //ツマミがドラッグされると呼ばれる
                override fun onProgressChanged(
                    seekBar: SeekBar, progress: Int, fromUser: Boolean) {
                    // 68 % のようにフォーマト
                    val str: String = getString(R.string.percentage, progress)
                    binding.textview.text = str
                }

                override fun onStartTrackingTouch(seekBar: SeekBar) {
                    // ツマミがタッチされた時に呼ばれる
                }

                override fun onStopTrackingTouch(seekBar: SeekBar) {
                    // ツマミがリリースされた時に呼ばれる
                }
            })
    }
}

//package com.example.kotlinseekbar

import android.os.Bundle

import androidx.activity.enableEdgeToEdge

import androidx.appcompat.app.AppCompatActivity

import androidx.core.view.ViewCompat

import androidx.core.view.WindowInsetsCompat

import android.widget.SeekBar

import com.example.kotlinseekbar.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

enableEdgeToEdge()

binding = ActivityMainBinding.inflate(layoutInflater)

setContentView(binding.root)

ViewCompat.setOnApplyWindowInsetsListener(binding.root) { v, insets ->

val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())

v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)

insets

}

// seekbar 初期値

binding.seekbar.setProgress(0)

// seekbar 最大値

binding.seekbar.setMax(100)

binding.seekbar.setOnSeekBarChangeListener(

object : SeekBar.OnSeekBarChangeListener {

//ツマミがドラッグされると呼ばれる

override fun onProgressChanged(

seekBar: SeekBar, progress: Int, fromUser: Boolean) {

// 68 % のようにフォーマト

val str: String = getString(R.string.percentage, progress)

binding.textview.text = str

}

override fun onStartTrackingTouch(seekBar: SeekBar) {

// ツマミがタッチされた時に呼ばれる

}

override fun onStopTrackingTouch(seekBar: SeekBar) {

// ツマミがリリースされた時に呼ばれる

}

})

}

　
activity_main.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textview"
        android:text="@string/zero"
        android:textColor="#000"
        android:textSize="40sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.1" />

    <SeekBar
        android:id="@+id/seekbar"
        android:background="#ccc"
        android:layout_margin="20dp"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.2" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?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:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<TextView

android:id="@+id/textview"

android:text="@string/zero"

android:textColor="#000"

android:textSize="40sp"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.1" />

<SeekBar

android:id="@+id/seekbar"

android:background="#ccc"

android:layout_margin="20dp"

android:layout_width="match_parent"

android:layout_height="60dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.2" />

</androidx.constraintlayout.widget.ConstraintLayout>

　
percentageでは「68 %」のような文字列の書式を作成しています文字列の書式を設定する
strings.xml

<resources>
    <string name="app_name">TestSeekBar</string>
    <string name="zero">0 %</string>
    <string name="percentage">%d %%</string>
</resources>

<string name="app_name">TestSeekBar</string>

</resources>

build.gradle

...
android {
    ...
    buildFeatures {
        viewBinding = true
    }
}
...

...

android {

...

buildFeatures {

viewBinding = true

}

...

実行してみます

サンプル動画

初期値と最大値はそれぞれ
seekBar.setProgress(0);
seekBar.setMax(100);
にて設定できます
レイアウトをカスタマイズするとバリエーションが増えます。
　
Javaではこのようになります。

cat50 00 100x100 - [Android & Kotlin] ボリューム入力ができるSeekBar

[Android] SeekBar でボリューム入力

ユーザーの数値入力をするときに、オーディオのボリューム入力のように、あるいは、何％位という感覚的な入力が適当な場合に SeekBar が...

　
References:
SeekBar | Android Developers
文字列の書式を設定する | Android Developers