Android Studio - SeekBar personalizzata (parte 2)

In questo articolo vedremo come realizzare una SeekBar personalizzata cambiando il colore dello sfondo, il colore del Progress, il colore del Thumb che sia compatibile con tutte le versioni di Android senza utilizzare alcuna immagine.

Per creare una SeekBar completamente personalizzata occorre creare 4 risorse di tipo drawable
Per creare queste risorse seguire questi semplici passaggi:

1. Aprire la cartella res
2. Cliccare con il tasto destro sulla cartella drawable
3. Selezionare New
4. Selezionare Drawable resource file

5. Dare un nome al file ad esempio border_shadow
6. Cliccare sul pulsante OK per confermare

Ripetere i passaggi dal numero 1 al numero 6 per creare le altre 3 risorse drawable.

• seekbar_progress
• custom_thumb
• seekbar_style

border_shadow
Questo file contiene lo sfondo della SeekBar
Ecco il contenuto del file border_shadow.xml

	<?xml version="1.0" encoding="utf-8"?>
	<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	<item>
	<shape>
	<corners
	android:radius="5dp" />
	<gradient
	android:angle="270"
	android:startColor="#33000000"
	android:centerColor="#11000000"
	android:endColor="#11000000"
	android:centerY="0.2"
	android:type="linear" />
	</shape>
	</item>
	</layer-list>

view raw border_shadow.xml hosted with ❤ by GitHub

Dalla riga 7 alla riga 13 è quanto visto in questo articolo

seekbar_progress
Questo file contiene il colore di riempimento della SeekBar "Progress"
Ecco il contenuto del file seekbar_progress.xml

	<?xml version="1.0" encoding="utf-8"?>
	<layer-list
	xmlns:android="http://schemas.android.com/apk/res/android" >
	<item
	android:id="@+id/progressshape" >
	<clip>
	<shape
	android:shape="rectangle" >
	<size
	android:height="5dp"/>
	<corners
	android:radius="5dp" />
	<solid
	android:color="#FF0000"/>
	</shape>
	</clip>
	</item>
	</layer-list>

view raw seekbar_progress.xml hosted with ❤ by GitHub

Alla riga 8 è possibile modificare la forma di Progress
Alla riga 10 è possibile l'altezza di Progress
Alla riga 12 è possibile impostare il raggio di curvatura degli angoli di Progress
Alla riga 14 è possibile modificare il colore di Progress

custom_thumb
Questo file contiene il colore e la forma del punto che si tocca per spostare la barra "Thumb"
Ecco il contenuto del file custom_thumb.xml

	<?xml version="1.0" encoding="utf-8"?>
	<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	<item>
	<shape
	android:shape="oval">
	<solid
	android:color="#FF0000"/>
	<size
	android:width="25dp"
	android:height="25dp"/>
	</shape>
	</item>
	</layer-list>

view raw custom_thumb.xml hosted with ❤ by GitHub

Alla riga 5 è possibile modificare la forma di Thumb
Alla riga 7 è possibile modificare il colore di Thumb
Alla riga 9 e 10 è possibile modificare le dimensioni di Thumb

seekbar_style
Questo file unisce il vari file creati precedentemente in modo da creare la propria SeekBar personalizzata
Ecco il contenuto del file seekbar_style.xml

	<?xml version="1.0" encoding="utf-8"?>
	<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
	<item
	android:id="@android:id/background"
	android:drawable="@drawable/border_shadow" >
	</item>
	<item
	android:id="@android:id/progress" >
	<clip
	android:drawable="@drawable/seekbar_progress" />
	</item>
	</layer-list>

view raw seekbar_style.xml hosted with ❤ by GitHub

Ora dopo aver creato i vari file che compongono la SeekBar occorre inserire la SeekBar all'interno del lyout della nostra app, quindi inserire queste righe di codice

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

view raw seekbar7_1.xml hosted with ❤ by GitHub

Come si può vedere, alla riga 7 è stato aggiunto l'attributo progressDrawable facendo riferimento alla risorsa drawable: seekbar_style, mentre alla riga 8 è stato aggiunto l'attributo thumb facendo riferimento alla risorsa drawable: custom_thumb

API=28

API=16

Come si vede da queste immagini l'aspetto della SeekBar è sempre uguale su diverse versioni di Android.

Ecco un video dimostrativo

Download Project
Download file APK

---

VARIAZIONI

Variazione 1:
Con alcuni colori di Progress e Thumb è possibile notare in modo evidente un contorno di colore bianco tra Progress e Thumb

quindi è consigliato aggiungere l'attributo splitTrack="false" durante la creazione della SeekBar nel layout.

	<SeekBar
	android:id="@+id/seekBar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_margin="16dp"
	android:progress="50"
	android:splitTrack="false"
	android:progressDrawable="@drawable/seekbar_style"
	android:thumb="@drawable/custom_thumb" />

view raw seekbar7_2.xml hosted with ❤ by GitHub

E' possibile notare l'attributo alla riga 7

Ecco la differenza tra senza attributo (a sinistra) e con attributo (a destra)

Variazione 2:
Come abbiamo visto in questo articolo, modificando le dimensioni all'interno dei vari file drawable non è possibile avere un'aspetto sottile della SeekBar come si avrebbe impostando una SeekBar standard.
In questo caso vengono d'aiuto due attributi:

• maxHeight
• minHeight

	<SeekBar
	android:id="@+id/seekBar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_margin="16dp"
	android:progress="50"
	android:splitTrack="false"
	android:maxHeight="2dp"
	android:minHeight="2dp"
	android:progressDrawable="@drawable/seekbar_style"
	android:thumb="@drawable/custom_thumb" />

view raw seekbar8_1.xml hosted with ❤ by GitHub

Questi attributi impostano una altezza minima e massima della barra (Progress e sfondo) senza influire sul Thumb che si può cambiare la sua dimensione all'interno del file custom_thumb.xml

Ecco un video dimostrativo

Download Project
Download file APK

---

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