Android Studio - Spinner: personalizzazione

In questo articolo vedremo come personalizzare lo Spinner ad esempio inserire la lista degli elementi da un array contenuto nel file strings.xml oppure modificare il layout

LISTA ELEMENTI DA ARRAY NEL FILE strings.xml
Per inserire la lista degli elementi recuperata dal file strings.xml occorre creare un array al suo interno in questo modo:

	<string-array name="list">
	<item>Elemento 1</item>
	<item>Elemento 2</item>
	<item>Elemento 3</item>
	<item>Elemento 4</item>
	<item>Elemento 5</item>
	<item>Elemento 6</item>
	</string-array>

view raw array_string.xml hosted with ❤ by GitHub

Ora all'interno del file MainActivity.kt bisogna inserire queste righe di codice:

	//dichiarazione della variabile spinner di tipo Spinner
	lateinit var spinner: Spinner

view raw spinner1_a.kt hosted with ❤ by GitHub

	//associazione alla variabile spinner dell'oggetto Spinner con id=sp_option
	//da inserire all'interno della funzione onCreate()
	spinner = findViewById(R.id.sp_option)

view raw spinner1_b.kt hosted with ❤ by GitHub

Ora è necessario inserire queste righe di codice che permettono di popolare lo Spinner con l'array creato nel file strings.xml e gestire il click su di essi.

	//dichiarazione della variabile options con la lista degli elementi dello Spinner
	//recuperato da un array nel file strings.xml
	val options = resources.getStringArray(R.array.list).toList()
	//inserimento della lista all'interno dello spinner con layout di tipo: android.R.layout.simple_list_item_1
	spinner.adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, options)
	//gestione del click sui vari elementi dello Spinner
	spinner.onItemSelectedListener = object: AdapterView.OnItemSelectedListener{
	override fun onNothingSelected(parent: AdapterView<*>?) {
	//inserire qui il codice da eseguire se non è stato selezionato alcun elemento
	textResult.text = "Nessun elemento selezionato"
	}
	override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
	//inserire qui il codice da eseguire quando un elemento è stato selezionato
	textResult.text = options.get(position)
	}
	}

view raw spinner2_gest.kt hosted with ❤ by GitHub

Ecco come si presenta il file MainActivity.kt

	package com.dm.tutorialspinner2
	import androidx.appcompat.app.AppCompatActivity
	import android.os.Bundle
	import android.view.View //importazione della Classe: View
	import android.widget.AdapterView //importazione della Classe: AdapterView
	import android.widget.ArrayAdapter //importazione della Classe: ArrayAdapter
	import android.widget.Spinner //importazione della Classe: Spinner
	import android.widget.TextView
	class MainActivity : AppCompatActivity() {
	//dichiarazione della variabile spinner di tipo Spinner
	lateinit var spinner: Spinner
	//dichiarazione della variabile textResult di tipo TextView
	lateinit var textResult: TextView
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContentView(R.layout.activity_main)
	//associazione alla variabile spinner dell'oggetto Spinner con id=sp_option
	spinner = findViewById(R.id.sp_option)
	//associazione alla variabile textResult dell'oggetto TextView con id=text_option
	textResult = findViewById(R.id.text_option)
	//dichiarazione della variabile options con la lista degli elementi dello Spinner
	//recuperato da un array nel file strings.xml
	val options = resources.getStringArray(R.array.list).toList()
	//inserimento della lista all'interno dello spinner con layout di tipo: android.R.layout.simple_list_item_1
	spinner.adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, options)
	//gestione del click sui vari elementi dello Spinner
	spinner.onItemSelectedListener = object: AdapterView.OnItemSelectedListener{
	override fun onNothingSelected(parent: AdapterView<*>?) {
	//inserire qui il codice da eseguire se non è stato selezionato alcun elemento
	textResult.text = "Nessun elemento selezionato"
	}
	override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
	//inserire qui il codice da eseguire quando un elemento è stato selezionato
	textResult.text = options.get(position)
	}
	}
	}
	}

view raw MainActivity_spinner2.kt hosted with ❤ by GitHub

Download Project
Download file APK

---

PERSONALIZZAZIONE DEL LAYOUT
ESEMPIO 1:
In Android è possibile personalizzare il layout dello Spinner utilizzando quelli predefiniti di Android oppure creare il proprio layout.
In questo esempio vediamo come utilizzare quelli predefiniti, quindi è sufficiente modificare questa riga di codice

	//inserimento della lista all'interno dello spinner con layout di tipo: android.R.layout.simple_list_item_1
	spinner.adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, options)

view raw spinner_layout1.kt hosted with ❤ by GitHub

con questa riga di codice:

	//inserimento della lista all'interno dello spinner con layout di tipo: android.R.layout.simple_list_item_activated_1
	spinner.adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_activated_1, options)

view raw spinner_layout2.kt hosted with ❤ by GitHub

Ecco il risultato

Il colore della selezione dell'elemento in questo caso è dato dal colore impostato come "colorAccent" nel file colors.xml


ESEMPIO 2:
Altra possibilità è quella di applicare uno stile allo Spinner utilizzando il file styles.xml
Per fare questo occorre aprire il file styles.xml ed aggiungere queste righe di codice:

	<style name="spinner_style">
	<item name="android:paddingLeft">0dp</item>
	<item name="android:dropDownWidth">533dp</item>
	<item name="android:showDividers">none</item>
	<item name="android:dividerHeight">0dp</item>
	<item name="android:popupBackground">#54ADCB</item>
	<item name="android:dropDownHeight">70dp</item>
	<item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
	<item name="android:dropDownSelector">@android:color/white</item>
	</style>

view raw spinner_style1.xml hosted with ❤ by GitHub

Queste righe di codice possono essere modificate a proprio piacimento e ne possono essere aggiunte altre oppure tolte quelle che non interessano.

Poi all'interno del layout occorre aggiungere questa riga di codice all'interno della View Spinner

style="@style/spinner_style"

view raw spinner_style1b.xml hosted with ❤ by GitHub

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">
	<Spinner
	android:id="@+id/sp_option"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	style="@style/spinner_style"/>
	<TextView
	android:id="@+id/text_option"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"/>
	</LinearLayout>

view raw activity_main_spinner4.xml hosted with ❤ by GitHub

Ecco il risultato:

Download Project
Download file APK