Passa ai contenuti principali

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
  1. Dare un nome al file ad esempio border_shadow
  2. Cliccare sul pulsante OK per confermare

Ripetere i passaggi dal numero 1 al numero 6 per creare le altre 3 risorse drawable.
border_shadow
Questo file contiene lo sfondo della SeekBar
Ecco il contenuto del file border_shadow.xml 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 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 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

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 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. 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
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)

Commenti

Post popolari in questo blog

Android Studio - Impostare lingua app

In questo articolo vedremo come poter selezionare la lingua all'interno della nostra app. Nel precedente articolo in cui si parlava del file string.xml , la lingua dell'app veniva selezionata automaticamente in base alle impostazioni del dispositivo, mentre qui vedremo come poter selezionare a proprio piacimento la lingua che dovrà avere la nostra app indipendentemente dall'impostazione del dispositivo. Per prima cosa creare il layout Ecco un esempio do come può essere il file activity_main.xml Ora creare le stringhe di testo all'interno del file string.xml Ora creare la traduzione del file string.xml nelle varie lingua come descritto in questo articolo Il risultato sarà una serie di file string.xml delle varie lingue impostate. Ora queste di seguito sono tre funzioni che servono per: selezione della lingua salvataggio della selezione nelle preferenze dell'app caricamento della lingua quando si avvia l'app Ecco come si presenta il file Main

Arduino - Lettura tensione potenziometro e display LCD

Leggere il valore di un poteziometro (parte 2) Oggi vedremo come leggere il valore in tensione di un potenziometro collegato al pin Analogico A0 di Arduino.

Android Studio - Impostare uno sfondo sfumato

In Android Studio è possibile creare uno sfondo sfumato senza dover creare una immagine apposta per questo scopo. Per fare questo occorre seguire questi semplici passaggi: Aprire la cartella res Cliccare con il tasto destro sulla cartella drawable Selezionare New Selezionare Drawable resource file Dare un nome al file ad esempio gradient_background Cliccare sul pulsante OK per confermare Una volta aperto il file gradient_background.xml inserire le seguenti righe di codice: Alla riga 6 inserire l'angolo che definisce la direzione della sfumatura (valori da 0 a 360) Alla riga 7 inserire il colore di partenza in formato esadecimale Alla riga 8 inserire il colore finale in formato esadecimale Per quanto riguarda i colori è possibile utilizzare il sito webgradients.com in modo da poter utilizzare le sfumature proposte o creare le proprie sfumature personalizzate. Una volta creato il file che definisce lo sfondo passare al layout ed impostare l'attibuto backgr