Android Studio - SeekBar personalizzata (parte 1)

In questo articolo vedremo come realizzare una SeekBar personalizzata cambiando il colore del Progress, il colore del Thumb.

ESEMPIO 1:
Questo esempio mostra come realizzare una SeekBar con Progress e Thumb colorati.

Ecco il codice da inserire all'interno del file activity_main.xml

	<SeekBar
	android:id="@+id/seekBar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_margin="16dp"
	android:progress="50"
	android:progressTint="#FFFF00"
	android:thumbTint="#FFAA00" />

view raw seekbar5_1.xml hosted with ❤ by GitHub

La riga 7 imposta il colore del Progress
La riga 8 imposta il colore del Thumb

Il colore può essere impostato direttamente come codice esadecimale come mostrato oppure fare riferimento ad un colore inserito nel file colors.xml
ATTENZIONE!: questi due attributi funzionano solo a partire da API=21 in poi, mentre per API minore di 21 il colore è quello di default del dispositivo.

API=28

API=16

Download Project
Download file APK

---

ESEMPIO 2:
Questo esempio è una evoluzione dell'esempio 1 in quanto l'esempio 1 produce dei Warning a livello di codice perché i due attributi: progressTint e thumbTint sono accettati solo a partire da API 21, per questo motivo in questo esempio i due attributi sono impostati all'interno del codice.
Per prima cosa occorre definire la SeekBar nel layout in questo modo:

	<SeekBar
	android:id="@+id/seekBar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_margin="16dp"
	android:progress="50"/>

view raw seekbar6_1.xml hosted with ❤ by GitHub

Come si può vedere mancano i due attributi dell'esempio 1.

Ora all'interno del codice, nella funzione onCreate, inserire queste righe di codice:

	if (Build.VERSION.SDK_INT >= 21) {
	seekBar.progressTintList = ColorStateList.valueOf(Color.rgb(255,255,0))
	seekBar.thumbTintList = ColorStateList.valueOf(Color.rgb(255,170,0))
	}

view raw seekbar6_1.kt hosted with ❤ by GitHub

Come si può vedere se la versione di Android installata sul dispositivo è maggiore o uguale di API 21 vengono impostati i colori di Progress e Thumb (utilizzare il formato RGB).

Ecco come si presenta il file MainActivity.kt

	package com.dm.tutorialseekbar6
	import android.content.res.ColorStateList //Importazione della Classe: ColorStateList
	import android.graphics.Color //Importazione della Classe: Color
	import android.os.Build //Importazione della Classe: Build
	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)
	//impostazione colori della SeekBar con API maggiore o uguale a 21
	if (Build.VERSION.SDK_INT >= 21) {
	seekBar.progressTintList = ColorStateList.valueOf(Color.rgb(255,255,0))
	seekBar.thumbTintList = ColorStateList.valueOf(Color.rgb(255,170,0))
	}
	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_sb6_1.kt hosted with ❤ by GitHub

API=28

API=16

Ecco un video dimostrativo

Download Project
Download file APK

---

Vedi anche SeekBar: introduzione
Vedi anche SeekBar personalizzata (parte 2)