Gradient Drawable in Android – Create Gradient Backgrounds
Abbiamo visto i colori Gradient su molti siti web come sfondi, usati nei loghi delle App, come nel logo di Instagram mostrato qui sotto, sfondo delle App, pulsanti, barre di progresso, ecc. Un gradiente rende l’UI di qualsiasi app, sia essa mobile o un sito web, più bella e vibrante. Molti sviluppatori stanno usando il gradiente nelle loro app e siti web per renderlo più attraente. Quindi, in questo tutorial, impareremo come impostare uno sfondo gradiente per la nostra attività Android App.
Che cos’è il gradiente?
Secondo Wikipedia:
In computer grafica, un gradiente di colore specifica una gamma di colori dipendenti dalla posizione, solitamente utilizzati per riempire una regione. Per esempio, molti gestori di finestre permettono di specificare lo sfondo dello schermo come un gradiente. I colori prodotti da un gradiente variano continuamente con la posizione, producendo transizioni di colore uniformi.
Un gradiente di colore è anche conosciuto come una rampa di colore o una progressione di colore. Nell’assegnare i colori a un insieme di valori, un gradiente è una mappa di colori continua, un tipo di schema di colori.
Aggiungiamo quindi un semplice gradiente alla nostra applicazione Android.
Passo 1: Crea un nuovo progetto
-
Apri il tuo Android Studio Clicca su “Avvia un nuovo progetto Android Studio” (Scopri come impostare Android Studio e creare il tuo primo progetto Android)
-
Scegli “Empty Activity” dalla finestra del template del progetto e clicca su Next
-
Inserisci il nome dell’App, nome del pacchetto, posizione di salvataggio, lingua (Java/Kotlin, usiamo Java per questo tutorial), e SDK minimo (stiamo usando API 19: Android 4.4 (KitKat))
-
Poi clicca sul pulsante Finish dopo aver compilato i dettagli di cui sopra
-
Ora, aspetta che il progetto finisca la costruzione.
Step 2: Creare il colore gradiente
Per creare un colore gradiente abbiamo bisogno di creare un file .xml nella cartella drawable. Quindi vai su app -> res -> drawable e clicca con il tasto destro su drawable -> New -> Drawable Resource File e crea il file gradient_drawable.xml.
Il codice del file gradient_drawable.xml è mostrato qui sotto:
Come potete vedere nel codice qui sopra, stiamo usando il tag gradient insieme a fornire gli attributi android:startColor, android:centerColor e android:endColor per definire il colore che sarà usato nel gradiente. Impariamo quindi a conoscere gli attributi disponibili nel drawable del gradiente.
Attributi XML del drawable gradiente
Seguono gli attributi del drawable <gradient>:
| Attributi | Descrizione |
|---|---|
| android:startColor |
Colore iniziale del gradiente. Il valore del colore può essere in una qualsiasi delle forme “#rgb”, “#argb”, “#rrggbb”, “#aarrggbb” |
| android:endColor |
Colore finale del gradiente Il valore del colore può essere in una qualsiasi delle forme “#rgb”, “#argb”, “#rrggbb”, “#aarrggbb” |
| android:centerColor |
il colore centrale del gradiente. Può essere opzionale ma puoi usarlo se vuoi Il valore del colore può essere in una qualsiasi delle forme “#rgb”, “#argb”, “#rrggbb”, “#aarrggbb” |
| android:centerX |
X posizione del punto centrale del gradiente all’interno della forma come frazione della larghezza 0.5 è il valore predefinito |
| android:centerY |
Posizione Y del punto centrale del gradiente all’interno della forma come frazione dell’altezza 0.5 è il valore predefinito |
| android:angle |
L’angolo del gradiente ed è usato solo con il gradiente lineare Deve essere multiplo di 45 nell’intervallo |
| android:type |
Si usa per impostare il tipo di gradiente e il valore predefinito è lineare. ed è di 3 tipi
|
| android:gradientRadius |
È usato per impostare il raggio del gradiente. Si usa solo con il gradiente radiale. |
Passo 3: Modificare activity_main.xml
Ora apri il file activity_main.xml e rimuovi il codice di default e cambia il layout in RelativeLayout e imposta il suo sfondo a gradient background come mostrato di seguito:
android:background = "@drawable/gradient_background"con questo il nostro activity_main.xml è fatto e il codice completo sarà come:
E l’output di quanto sopra è mostrato qui sotto:
Possiamo anche aggiungere il gradiente a diverse viste e layout nella nostra applicazione Android. Copriamo alcuni altri componenti dell’applicazione Android in cui possiamo usare sfondi a gradiente.
Sfondo gradiente con Button:
Qui useremo lo sfondo gradiente per il pulsante:
Output del codice sopra è:
Sfondo gradiente con TextView:
Qui useremo lo sfondo gradiente per TextView:
L’output del codice sopra è:
Sfondo gradiente con ImageView:
Qui useremo lo sfondo gradiente per ImageView:
L’output del codice sopra è:
Sfondo gradiente con SeekBar:
Qui useremo lo sfondo gradiente per SeekBar:
L’output del codice sopra è:
