Android Studio - SeekBar: introduzione

In questo articolo vedremo come inserire ed utilizzare la SeekBar, una barra di scorrimento con cui l'utente può interagire. Questa barra viene spesso utilizzata quando si vuole fare alcune regolazioni in quanto permette di inserire valori all'interno di un range, ad esempio è quella per regolare il volume del dispositivo, ecc.

Questa barra però può essere utilizzata anche all'interno della nostra app per le più svariate funzioni.
Il codice da inserire nel layout è il seguente:

	<SeekBar
	android:id="@+id/seekBar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"/>

view raw seekbar1.xml hosted with ❤ by GitHub

E' importante sapere che se non si impostano ulteriori attributi da quelli visualizzati qui sopra il range dei valori va da un minimo di zero ad un massimo di 100, così come il colore è quello predefinito cioè colorAccent definito nel file colors.xml.

L'avanzamento del colore si chiama progress, mentre il pallino che si preme per spostare la barra si chiama thumb

ESEMPIO 1:
SeekBar con valore da 0 a 100
Ecco come si presenta il 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"
	android:orientation="vertical"
	tools:context=".MainActivity">
	<SeekBar
	android:id="@+id/seekBar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_margin="6dp" />
	<TextView
	android:id="@+id/textView"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:gravity="center"
	android:text="0"
	android:textSize="16sp" />
	</LinearLayout>

view raw seekbar2.xml hosted with ❤ by GitHub

Ecco come si presenta il file MainActivity.kt

	package com.dm.tutorialseekbar
	import androidx.appcompat.app.AppCompatActivity
	import android.os.Bundle
	import android.widget.SeekBar //Importazione della Classe: SeekBar
	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) {
	//inserire qui il codice che deve essere eseguito quando si sposta il cursore
	textView.text = progress.toString()
	}
	override fun onStartTrackingTouch(seekBar: SeekBar?) {
	//inserire qui il codice che deve essere eseguito quando si inizia a
	//spostare il cursore
	}
	override fun onStopTrackingTouch(seekBar: SeekBar?) {
	//inserire qui il codice che deve essere eseguito quando si finisce di
	//spostare il cursore
	}
	})
	}
	}

view raw MainActivity_sb1.kt hosted with ❤ by GitHub

Ecco un video dimostrativo

Download Project
Download file APK
Visualizza su

---

ESEMPIO 2:
SeekBar con valore da 0.0 a 2.0 con passi di 0.1
La SeekBar normalmente visualizza numeri interi, quindi per visualizzare ed utilizzare i numeri con la virgola occorre eseguire una semplice operazione matematica, vediamo come.
Ecco come si presenta il 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"
	android:orientation="vertical"
	tools:context=".MainActivity">
	<SeekBar
	android:id="@+id/seekBar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_margin="6dp"
	android:max="20" />
	<TextView
	android:id="@+id/textView"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:gravity="center"
	android:text="0.0"
	android:textSize="16sp" />
	</LinearLayout>

view raw activity_main_sb2.xml hosted with ❤ by GitHub

Da notare l'attributo max = 20 perchè per visualizzare numeri da 0 a 2 con passi di 0.1 è sufficiente avere la SeekBar da 0 a 20 e poi all'interno del codice dividere il valore di progress per 10 in modo da ottenere il risultato voluto.
Ora passiamo alla scrittura del codice; è necessario creare una variabile d'appoggio in formato Double in modo che possa memorizzare numeri con la virgola.
Ecco come si presenta il file MainActivity.kt

	package com.dm.tutorialseekbar2
	import androidx.appcompat.app.AppCompatActivity
	import android.os.Bundle
	import android.widget.SeekBar //Importazione della Classe: SeekBar
	import kotlinx.android.synthetic.main.activity_main.*
	class MainActivity : AppCompatActivity() {
	//variabile di appoggio per memorizzare il valore di progress con la virgola
	private var value: Double? = 0.0
	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) {
	//inserire qui il codice che deve essere eseguito quando si sposta il cursore
	//convertire progress in formato Double e poi dividere per 10
	value = (progress.toDouble()/10)
	//visualizzare il risultato nella TextView con solo una cifra decimale
	//per questo viene utilizzata la funzione String.format("%.1f", nomevariabile)
	textView.text = String.format("%.1f", value)
	}
	override fun onStartTrackingTouch(seekBar: SeekBar?) {
	//inserire qui il codice che deve essere eseguito quando si inizia a
	//spostare il cursore
	}
	override fun onStopTrackingTouch(seekBar: SeekBar?) {
	//inserire qui il codice che deve essere eseguito quando si finisce di
	//spostare il cursore
	}
	})
	}
	}

view raw MainActivity_sb2.kt hosted with ❤ by GitHub

La variabile value può essere utilizzata all'interno del codice per eseguire eventualmente altri calcoli.

Ecco un video dimostrativo

Download Project
Download file APK
Visualizza su

---

ESEMPIO 3:
SeekBar con valore da 0.1 a 2 con passi di 0.1
La SeekBar ha come valore minimo zero e non può essere modificato, quindi se si vuole un valore iniziale diverso da zero è necessario eseguire una semplice operazione matematica..
Ecco come si presenta il 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"
	android:orientation="vertical"
	tools:context=".MainActivity">
	<SeekBar
	android:id="@+id/seekBar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_margin="6dp"
	android:max="19" />
	<TextView
	android:id="@+id/textView"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:gravity="center"
	android:text="0.1"
	android:textSize="16sp" />
	</LinearLayout>

view raw activity_main_sb3.xml hosted with ❤ by GitHub

Da notare l'attributo max = 19 perchè per visualizzare numeri da 0.1 a 2.0 con passi di 0.1 è sufficiente avere la SeekBar da 0 a 19 e poi all'interno del codice dividere il valore di progress per 10 e poi sommare 0.1 in modo da ottenere il risultato voluto.
Ora passiamo alla scrittura del codice; è necessario creare una variabile d'appoggio in formato Double in modo che possa memorizzare numeri con la virgola.
Ecco come si presenta il file MainActivity.kt

	package com.dm.tutorialseekbar3
	import androidx.appcompat.app.AppCompatActivity
	import android.os.Bundle
	import android.widget.SeekBar //Importazione della Classe: SeekBar
	import kotlinx.android.synthetic.main.activity_main.*
	class MainActivity : AppCompatActivity() {
	//variabile di appoggio per memorizzare il valore di progress con la virgola
	private var value: Double? = 0.0
	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) {
	//inserire qui il codice che deve essere eseguito quando si sposta il cursore
	//convertire progress in formato Double dividere per 10 e sommare 0.1
	value = (progress.toDouble()/10)+0.1
	//visualizzare il risultato nella TextView con solo una cifra decimale
	//per questo viene utilizzata la funzione String.format("%.1f", nomevariabile)
	textView.text = String.format("%.1f", value)
	}
	override fun onStartTrackingTouch(seekBar: SeekBar?) {
	//inserire qui il codice che deve essere eseguito quando si inizia a
	//spostare il cursore
	}
	override fun onStopTrackingTouch(seekBar: SeekBar?) {
	//inserire qui il codice che deve essere eseguito quando si finisce di
	//spostare il cursore
	}
	})
	}
	}

view raw MainActivity_sb3.kt hosted with ❤ by GitHub

La variabile value può essere utilizzata all'interno del codice per eseguire eventualmente altri calcoli.

Ecco un video dimostrativo

Download Project
Download file APK
Visualizza su

---

ESEMPIO 4:
SeekBar con valore da -10 a +10
La SeekBar ha come valore minimo zero e non può essere modificato, quindi se si vuole un valore iniziale diverso da zero è necessario eseguire una semplice operazione matematica..
Ecco come si presenta il 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"
	android:orientation="vertical"
	tools:context=".MainActivity">
	<SeekBar
	android:id="@+id/seekBar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_margin="6dp"
	android:max="20"
	android:progress="10" />
	<TextView
	android:id="@+id/textView"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:gravity="center"
	android:text="0"
	android:textSize="16sp" />
	</LinearLayout>

view raw activity_main_sb4.xml hosted with ❤ by GitHub

Da notare l'attributo max = 20 perchè per visualizzare numeri da -10 a +10 è sufficiente avere la SeekBar da 0 a 20 e poi all'interno del codice sottrarre 10 al valore di progress in modo da ottenere il risultato voluto.
Da notare anche l'attributo progress = 10 che imposta la barra ad una valore predefinito quando l'app viene avviata (in questo caso 10 equivale a 0)
Ora passiamo alla scrittura del codice; è necessario creare una variabile d'appoggio in formato Int in modo che possa memorizzare numeri interi sia positivi che negativi.
Ecco come si presenta il file MainActivity.kt

	package com.dm.tutorialseekbar4
	import androidx.appcompat.app.AppCompatActivity
	import android.os.Bundle
	import android.widget.SeekBar //Importazione della Classe: SeekBar
	import kotlinx.android.synthetic.main.activity_main.*
	class MainActivity : AppCompatActivity() {
	//variabile di appoggio per memorizzare il valore di progress
	private var value: Int? = 0
	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) {
	//inserire qui il codice che deve essere eseguito quando si sposta il cursore
	value = progress-10
	//visualizzare il risultato nella TextView
	textView.text = value.toString()
	}
	override fun onStartTrackingTouch(seekBar: SeekBar?) {
	//inserire qui il codice che deve essere eseguito quando si inizia a
	//spostare il cursore
	}
	override fun onStopTrackingTouch(seekBar: SeekBar?) {
	//inserire qui il codice che deve essere eseguito quando si finisce di
	//spostare il cursore
	}
	})
	}
	}

view raw MainActivity_sb4.kt hosted with ❤ by GitHub

La variabile value può essere utilizzata all'interno del codice per eseguire eventualmente altri calcoli.

Ecco un video dimostrativo

Download Project
Download file APK
Visualizza su

---

Vedi anche SeekBar personalizzata (parte 1)
Vedi anche SeekBar personalizzata (parte 2)