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

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

Android Studio
2024.1.1

SeekBar

SeekBar では「draggable thumb」(ドラッグ可能な親指?)と呼ばれるツマミを動かしその位置を判断します。
尚、Kotlinのケースはこちら
　

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

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

目次
1. Seekbarのメソッド
2. サンプルコード
3. サンプル動画

Seekbarのメソッド

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

// ツマミがドラッグされると呼ばれる
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
}

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

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

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

public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

}

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

public void onStartTrackingTouch(SeekBar seekBar) {

}

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

public void onStopTrackingTouch(SeekBar seekBar) {

}

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

サンプルコード

コードをまとめてみると
　
MainActivity.java

//package com.example.testseekbar;

import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import java.util.Locale;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

        TextView textView = findViewById(R.id.text_view);

        // SeekBar
        SeekBar seekBar = findViewById(R.id.seekbar);
        // 初期値
        seekBar.setProgress(0);
        // 最大値
        seekBar.setMax(100);
        seekBar.setOnSeekBarChangeListener(
            new SeekBar.OnSeekBarChangeListener() {
                //ツマミがドラッグされると呼ばれる
                @Override
                public void onProgressChanged(
                        SeekBar seekBar, int progress, boolean fromUser) {
                    // 68 % のようにフォーマト、
                    // この場合、Locale.USが汎用的に推奨される
                    String str = String.format(Locale.US, "%d %%",progress);
                    textView.setText(str);
                }

                //ツマミがタッチされた時に呼ばれる
                @Override
                public void onStartTrackingTouch(SeekBar seekBar) {
                }

                //ツマミがリリースされた時に呼ばれる
                @Override
                public void onStopTrackingTouch(SeekBar seekBar) {
                }
            });
    }
}

//package com.example.testseekbar;

import android.os.Bundle;

import android.widget.SeekBar;

import android.widget.TextView;

import androidx.activity.EdgeToEdge;

import androidx.appcompat.app.AppCompatActivity;

import androidx.core.graphics.Insets;

import androidx.core.view.ViewCompat;

import androidx.core.view.WindowInsetsCompat;

import java.util.Locale;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

EdgeToEdge.enable(this);

setContentView(R.layout.activity_main);

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {

Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());

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

return insets;

});

TextView textView = findViewById(R.id.text_view);

// SeekBar

SeekBar seekBar = findViewById(R.id.seekbar);

// 初期値

seekBar.setProgress(0);

// 最大値

seekBar.setMax(100);

seekBar.setOnSeekBarChangeListener(

new SeekBar.OnSeekBarChangeListener() {

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

@Override

public void onProgressChanged(

SeekBar seekBar, int progress, boolean fromUser) {

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

// この場合、Locale.USが汎用的に推奨される

String str = String.format(Locale.US, "%d %%",progress);

textView.setText(str);

}

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

@Override

public void onStartTrackingTouch(SeekBar seekBar) {

}

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

@Override

public void 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:textSize="50sp"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.3" />

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

</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:id="@+id/main"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<TextView

android:id="@+id/text_view"

android:layout_width="200dp"

android:layout_height="wrap_content"

android:textSize="50sp"

android:gravity="center"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.3" />

<SeekBar

android:id="@+id/seekbar"

android:layout_width="match_parent"

android:layout_height="60dp"

android:layout_margin="20dp"

android:background="#ccc"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.5" />

</androidx.constraintlayout.widget.ConstraintLayout>

サンプル動画

初期値と最大値はそれぞれ
seekBar.setProgress(0);
seekBar.setMax(100);
にて設定できます

そのほか色々とカスタマイズも可能です。
SeekBar の配列をコードで記述、ツマミとPregress barのカスタマイズ

　
関連ページ：

SeekBarでボリューム入力
SeekBarの配列をコードで記述、ツマミとPregress barのカスタマイズ

Reference:
SeekBar | Android Developers