Los Spinners en Android son un dropdown o una lista desplegable que muestra una lista de opciones que el usuario puede seleccionar.
En este post voy a explicar cómo cambiar el color de un Spinner, es decir, cambiar el color de:
- Elemento seleccionado
- Elementos de la lista
- Flecha o triángulo que aparece
Para personalizar el Spinner vamos a definir algunos archivos XML e indicar que los vamos a usar en nuestro adaptador.
Nota: si no sabes llenar un Spinner mira este post.
Cambiar color del elemento seleccionado
En la carpeta res/layout hay que agregar un archivo que vamos a usar en el Spinner:
<?xml version="1.0" encoding="utf-8"?><!--
Este es el elemento que sale seleccionado en un spinner
-->
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="start"
android:padding="5dip"
android:textColor="#ffffff"
android:textSize="20sp" />
Como puedes ver, es un simple TextView. Ponle el color que quieras y personalízalo. En este caso tiene el color blanco, pero puedes ponerle otro, al igual que puedes modificar el tamaño.
Cambiar color de elementos de la lista
![](https://parzibyte.me/blog/wp-content/uploads/2019/07/Spinner-personalizado-Lista-abierta.jpg)
Si quieres cambiar el color de los elementos que se muestran en la lista, crea un CheckedTextView personalizado, dentro de un XML ubicado en la carpeta res/layout:
<?xml version="1.0" encoding="utf-8"?>
<!--
Este es el elemento que sale en un spinner; es decir, en la lista
(no es el que se selecciona, es el que sale en la lista)
-->
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
style="?android:attr/spinnerDropDownItemStyle"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:ellipsize="marquee"
android:singleLine="true"
android:textColor="#000000" />
El color está definido por el atributo textColor
.
Cambiar el color del triángulo o flecha
Para ello hay que modificar el backgroundTint del Spinner. Si tu nivel de API es mayor o igual a la 21, especifica el atributo android:backgroundTint
así:
<Spinner
android:id="@+id/spinnerCategoriasReporteGastos"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:backgroundTint="#ffffff" />
Si, en cambio, tu app usa APIs antiguas o menores, cambia el elemento Spinner por un android.support.v7.widget.AppCompatSpinner y especifica el atributo app:backgroundTint
.
<android.support.v7.widget.AppCompatSpinner
android:id="@+id/spinnerCategoriasReporteGastos"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:backgroundTint="#ffffff" />
![](https://parzibyte.me/blog/wp-content/uploads/2019/07/Spinner-personalizado-Elemento-seleccionado.jpg)
Especificando archivos XML
Ya definimos los diseños, ahora vamos a usarlos.
En el Spinner tienes un adaptador, cuando hagas el adaptador utiliza R.layout.elemento_spinner_personalizado
como layout, en lugar del elemento por defecto
Después, invoca al método setDropDownViewResource
de tu adaptador, y pásale tu archivo en donde personalizas la lista de los elementos:
arrayAdapter.setDropDownViewResource(R.layout.elemento_lista_spinner_personalizado);
Recuerda que el color del triángulo o flecha se especifica con backgroundTint
.
Yo estoy trabajando con Kotlin pero igualmente funciona con Java, solo dejaré un ejemplo de mi código:
val categorias = arrayOf("Esta semana", "Este mes", "Este año", "Personalizar")
val arrayAdapter = ArrayAdapter(context!!, R.layout.elemento_spinner_personalizado, categorias)
// Para que sea una lista personalizada
arrayAdapter.setDropDownViewResource(R.layout.elemento_lista_spinner_personalizado)
spinnerCategoriasReporteGastos.adapter = arrayAdapter
Pingback: Spinner en Android: escuchar cambio de elemento seleccionado - Parzibyte's blog