UNIDAD TEMÁTICA II: Diseño de la interfaz de usuario

Controles De Selección

Android dispone de diversos controles que nos permiten seleccionar una opción dentro de
una lista de posibilidades. Así, podremos utilizar por ejemplo listas desplegables (Spinner),
listas fijas (ListView), o tablas (GridView). Los controles de selección tienen un elemento
importante en común, los adaptadores.

Adaptadores en Android (adapters)

Un adaptador representa algo así como una interfaz común al modelo de datos que existe
por detrás de todos los controles de selección. Dicho de otra forma, todos los controles de
selección accederán a los datos que contienen a través de un adaptador.
Además de proveer de datos a los controles visuales, el adaptador también será
responsable de generar a partir de estos datos las vistas específicas que se mostrarán
dentro del control de selección. Por ejemplo, si cada elemento de una lista estuviera
formado a su vez por una imagen y varias etiquetas, el responsable de generar y establecer
el contenido de todos estos «sub-elementos» a partir de los datos será el propio adaptador.
Android proporciona de serie varios tipos de adaptadores sencillos, aunque podemos
extender su funcionalidad fácilmente para adaptarlos a nuestras necesidades. Los más
comunes son los siguientes.

Adaptador Descripción
ArrayAdapter Esperará una matriz o una lista de objetos como entrada.
CursorAdapter Aceptará una instancia de cursor como entrada. Se utiliza para mapear
las columnas de un cursor abierto sobre una base de datos sobre los
diferentes elementos visuales contenidos en el control de selección.
SimpleAdapter Aceptará datos estáticos definidos en los recursos. Se utiliza para mapear
datos sobre los diferentes controles definidos en un fichero XML de
layout.
BaseAdapter Es una implementación genérica para los tres tipos de adaptadores y se
puede usar para ListView , Gridview o Spinners según nuestros
requisitos.

La manera de crear un adaptador de tipo ArrayAdapter para trabajar con un array genérico
de kotlin es la siguiente:
 1. val datos = arrayOf("Elem1", "Elem2", "Elem3", "Elem4", "Elem5")
2.
3. var adaptador = ArrayAdapter(
4. this,
5. android.R.layout.simple_spinner_item,
6. datos
7. )

El código de arriba es como se crea un ArrayAdapter la primera línea es la definición del

array en kotlin que contendrá los datos a mostrar en el control, en este caso un array sencillo
con cinco cadenas de caracteres. En la segunda línea creamos el adaptador en sí, al que
pasamos 3 parámetros:

• El contexto, que normalmente será simplemente una referencia a la actividad

donde se crea el adaptador.
• El ID del layout sobre el que se mostrarán los datos del control. En este caso le
pasamos el ID de un layout predefinido en Android
(android.R.layout.simple_spinner_item), formado únicamente por un control
TextView, pero podríamos pasarle el ID de cualquier layout personalizado de
nuestro proyecto con cualquier estructura y conjunto de controles, más adelante
veremos cómo (en el apartado dedicado a las listas fijas).
• El array que contiene los datos a mostrar.
Con esto ya tendríamos creado nuestro adaptador para los datos a mostrar y ya tan sólo
nos quedaría asignar este adaptador a nuestro control de selección para que éste mostrase
los datos en la aplicación.
Una alternativa a tener en cuenta si los datos a mostrar en el control son estáticos sería
definir la lista de posibles valores como un recurso de tipo string-array. Para ello, primero
crearíamos un nuevo fichero XML en la carpeta /res/values llamado por ejemplo
valores_array.xml e incluiríamos en él los valores seleccionables de la siguiente forma:

1. <?xml version="1.0" encoding="utf-8"?>

2. <resources>
3. <string-array name="valores_array">
4. <item>Elem1</item>
5. <item>Elem2</item>
6. <item>Elem3</item>
7. <item>Elem4</item>
8. <item>Elem5</item>
9. </string-array>
10. </resources>

Tras esto, a la hora de crear el adaptador, utilizaríamos el método createFromResource()

para hacer referencia a este array XML que acabamos de crear:

1. val adapter = ArrayAdapter.createFromResource(

2. this,
3. R.array.valores_array,
4. android.R.layout.simple_spinner_item
5. )
Control Spinner

En Android, Spinner es una vista que permite al usuario seleccionar un valor de la lista de
valores. El control Spinner en Android se comportará igual que la lista desplegable en otros
lenguajes de programación.
En general, el control Spinner de Android proporcionarán una forma rápida de seleccionar
un elemento de la lista de valores y mostrará un menú desplegable con una lista de todos
los valores cuando hacemos clic o tocamos en él.
De forma predeterminada, el control Spinner de Android mostrará su valor seleccionado
actualmente y al usar el Adaptador podemos vincular los elementos al objeto Spinner.
A continuación, se muestra la representación gráfica del uso del control Spinner en
aplicaciones de Android.

Podemos llenar nuestro control Spinner con una lista de opciones definiendo un
ArrayAdapter en nuestro archivo de Actividad.
En general, el Adaptador extrae datos de fuentes como una matriz o base de datos y
convierte cada elemento en una vista de resultados y se coloca en la lista.

Crear Android Spinner en archivo de diseño XML

En Android, podemos crear Spinner en un archivo de diseño XML utilizando el elemento
<Spinner> con diferentes atributos como se muestra a continuación.

1. <Spinner android:id="@+id/spinner1"
2. android:layout_width="wrap_content"
3. android:layout_height="wrap_content"/>

Para completar el Spinner con la lista de valores, debemos especificar el Adaptador del
Spinner, como un ArrayAdapter en el archivo de actividad como se muestra a
continuación.
 1. val datos = arrayOf("Elem1", "Elem2", "Elem3", "Elem4", "Elem5")
2.
3. var adaptador = ArrayAdapter(
4. this,
5. android.R.layout.simple_spinner_item,
6. datos
7. )
8. adaptador.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
9. spinner1.adapter=adaptador

Así es como podemos definir y vincular datos al control de Spinner en aplicaciones de

Android.
Responder a eventos
En cuanto a los eventos lanzados por el control Spinner, el más comúnmente utilizado será
el generado al seleccionarse una opción de la lista desplegable, onItemSelected. Para
capturar este evento se procederá de forma similar a lo ya visto para otros controles
anteriormente, asignándole su controlador mediante el método
setOnItemSelectedListener().

1. spinner1.setOnItemSelectedListener(
2. object : AdapterView.OnItemSelectedListener {
3. override fun onItemSelected(
4. parent: AdapterView<*>,
5. v: android.view.View,
6. position: Int,
7. id: Long
8. ) {
9. Toast.makeText(
10. applicationContext,
11. "Seleccionado: " + parent.getItemAtPosition(position),
12. Toast.LENGTH_SHORT
13. ).show()
14. }
15.
16. override fun onNothingSelected(parent: AdapterView<*>) {
17. Toast.makeText(
18. applicationContext,
19. "Ningun Elemento Seleccionado: ",
20. Toast.LENGTH_SHORT
21. ).show()
22. }
23. })

A diferencia de ocasiones anteriores, para este evento definimos dos métodos, el primero
de ellos (onItemSelected) que será llamado cada vez que se selecciones una opción en la
lista desplegable, y el segundo (onNothingSelected) que se llamará cuando no haya
ninguna opción seleccionada (esto puede ocurrir por ejemplo si el adaptador no tiene
datos). Además, vemos cómo para recuperar el dato seleccionado utilizamos el método
getItemAtPosition() del parámetro AdapterView que recibimos en el evento.
Ejemplo del control Spinner en Android
El siguiente es el ejemplo de la definición de un control Spinner, un control TextView en
RelativeLayout para mostrar la lista de detalles del usuario en la aplicación de Android.
Código archivo activity_main.xml

1. <?xml version="1.0" encoding="utf-8"?>

2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent" android:layout_height="match_parent">
4. <TextView
5. android:id="@+id/txtVw"
6. android:layout_width="wrap_content"
7. android:layout_height="wrap_content"
8. android:layout_marginLeft="50dp"
9. android:layout_marginTop="150dp"
10. android:text="Selec:"
11. android:textStyle="bold"
12. android:textSize="15dp" />
13. <Spinner
14. android:id="@+id/spinner1"
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:layout_alignBottom="@+id/txtVw"
18. android:layout_toRightOf="@+id/txtVw" />
19. </RelativeLayout>

Código archivo MainActivity.kt

1. package com.uaa.controlesseleccion
2.
3. import androidx.appcompat.app.AppCompatActivity
4. import android.os.Bundle
5. import android.widget.ArrayAdapter
6. import kotlinx.android.synthetic.main.spinner_control.*
7. import android.widget.AdapterView
8. import android.widget.Toast
9.
10. class MainActivity : AppCompatActivity() {
11.
12. override fun onCreate(savedInstanceState: Bundle?) {
13. super.onCreate(savedInstanceState)
14. setContentView(R.layout.spinner_control)
15.
16. val usuarios = arrayOf("Pepito", "Fulanito", "Perenganito", "Sutanito")
17.
18. var adaptador = ArrayAdapter(
19. this,
20. android.R.layout.simple_spinner_item,
21. usuarios
22. )
23. adaptador.setDropDownViewResource(android.R.layout.simple_spinner_dropdown
_item)
24. spinner1.adapter = adaptador
25.
26. spinner1.setOnItemSelectedListener(
27. object : AdapterView.OnItemSelectedListener {
28. override fun onItemSelected(
29. parent: AdapterView<*>,
 30. v: android.view.View,
31. position: Int,
32. id: Long
33. ) {
34. Toast.makeText(
35. applicationContext,
36. "Selecciono el Usuario: " + parent.getItemAtPosition(posit
ion),
37. Toast.LENGTH_SHORT
38. ).show()
39. }
40.
41. override fun onNothingSelected(parent: AdapterView<*>) {
42. Toast.makeText(
43. applicationContext,
44. "Ningun Usuario Seleccionado: ",
45. Toast.LENGTH_SHORT
46. ).show()
47. }
48. })
49. }
50. }

Resultado de la Aplicación
ListView

En Android, ListView es un ViewGroup que se usa para mostrar la lista de elementos

desplazables en varias filas y los elementos de la lista se insertan automáticamente en la
lista mediante un adaptador.
En general, el adaptador extrae datos de fuentes como una matriz o una base de datos y
convierte cada elemento en una vista de resultados y se coloca en la lista. En caso de
existir más opciones de las que se pueden mostrar sobre el control ListView se podrá por
supuesto hacer scroll sobre la lista para acceder al resto de elementos.

A continuación, se muestra la representación gráfica del control ListView en aplicaciones

de Android.

Podemos llenar nuestro control ListView con una lista de opciones definiendo un
ArrayAdapter en nuestro archivo de Actividad.
En general, el Adaptador extrae datos de fuentes como una matriz o base de datos y
convierte cada elemento en una vista de resultados y se coloca en la lista.

Crear un control ListView en archivo de diseño XML

En Android, podemos crear un ListView en un archivo de diseño XML utilizando el elemento
<ListView> con diferentes atributos como se muestra a continuación.

1. <ListView
2. android:id="@+id/list1"
3. android:layout_width="match_parent"
4. android:layout_height="wrap_content" >
5. </ListView>

Para completar el ListView con la lista de valores, debemos especificar el Adaptador del
ListView, como un ArrayAdapter en el archivo de actividad como se muestra a
continuación.
 1. val datos = arrayOf("Elem1", "Elem2", "Elem3", "Elem4","Elem5")
2.
3. var adaptador = ArrayAdapter(
4. this,
5. android.R.layout.simple_selectable_list_item,
6. datos
7. )
8.
9. list1.adapter=adaptador

Así es como podemos definir y vincular datos al control ListView en aplicaciones de

Android.
Responder a eventos
En cuanto a los eventos lanzados por el control ListView, el más comúnmente utilizado
será el generado al hacer clic en una opción de la lista, onItemClick. Para capturar este
evento se procederá de forma similar a lo ya visto para otros controles anteriormente,
asignándole su controlador mediante el método setOnItemClickListener().

1. list1.onItemClickListener=object:AdapterView.OnItemClickListener{
2. override fun onItemClick(parent: AdapterView<*>?, v: View?, position: Int, id
: Long) {
3. Toast.makeText(
4. applicationContext,
5. "Selecciono el Elemento: " + parent?.getItemAtPosition(position),
6. Toast.LENGTH_SHORT
7. ).show()
8. }
9. }

Vemos cómo para recuperar el dato seleccionado utilizamos el método

getItemAtPosition() del parámetro AdapterView que recibimos en el evento.
Así es como podemos vincular datos a ListView usando ArrayAdapter en aplicaciones
de Android según nuestros requisitos.
Ejemplo del control ListView Personalizado en Android
El siguiente es el ejemplo de la definición de un control ListView Personalizado,
En el ejemplo anterior, aprendimos una forma sencilla de vincular datos
a ListView usando ArrayAdapter en la aplicación de Android. Ahora veremos cómo crear
nuestro propio adaptador personalizado y vincular datos a ListView con un ejemplo.
Para esto, necesitamos crear nuestra propia clase de adaptador personalizado
extendiéndolo con la clase BaseAdapter y crear una clase que contendrá parámetros para
los elementos de la fila de la lista.
En caso de que utilicemos BaseAdapter, debemos sobreescribir los siguientes métodos de
la clase BaseAdapter.

Método Descripción
getCount() Devolverá el número total de filas contadas en la vista de lista
getItem() Se utiliza para especificar los datos del objeto de cada fila.
getItemId() Devuelve la identificación de cada elemento de fila
getView() Se utiliza para devolver una instancia de vista que representa una sola fila en
el elemento ListView.

Archivos de recurso Layout XML

Código archivo activity_main.xml

1. <?xml version="1.0" encoding="utf-8"?>

2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical" >
6. <ListView
7. android:id="@+id/user_list"
8. android:layout_width="fill_parent"
9. android:layout_height="wrap_content"
10. android:dividerHeight="1dp" />
11. </LinearLayout>

Código archivo list_row.xml

Este archivo se utiliza como modelo de datos para cada ítem del ListView

1. <?xml version="1.0" encoding="utf-8"?>

2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:orientation="horizontal"
6. android:padding="5dip" >
7. <TextView
8. android:id="@+id/name"
9. android:layout_width="wrap_content"
 10. android:layout_height="wrap_content"
11. android:textStyle="bold"
12. android:textSize="17sp" />
13. <TextView
14. android:id="@+id/designation"
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:layout_below="@id/name"
18. android:layout_marginTop="7dp"
19. android:textColor="@android:color/darker_gray"
20. android:textSize="14sp" />
21. <TextView
22. android:id="@+id/location"
23. android:layout_width="wrap_content"
24. android:layout_height="wrap_content"
25. android:layout_alignBaseline="@+id/designation"
26. android:layout_alignBottom="@+id/designation"
27. android:layout_alignParentRight="true"
28. android:textColor="@android:color/holo_blue_dark"
29. android:textSize="14sp" />
30. </RelativeLayout>

Archivos de Clases Kotlin

Código archivo ListItem.kt

1. package com.uaa.controlesseleccion
2.
3. class ListItem {
4. var name:String
5. var designation:String
6. var location:String
7.
8. constructor(name: String,designation: String,location: String) {
9. this.name=name
10. this.designation=designation
11. this.location=location
12. }
13.
14. }

Código archivo CustomListAdapter.kt

1. package com.uaa.controlesseleccion
2.
3. import android.content.Context
4. import android.widget.TextView
5. import android.view.ViewGroup
6. import android.view.LayoutInflater
7. import android.view.View
8. import android.widget.BaseAdapter
9.
10.
11. class CustomListAdapter(aContext: Context, private val listData: ArrayList<ListIte
m>) :
12. BaseAdapter() {
 13. private val layoutInflater: LayoutInflater
14.
15. init {
16. layoutInflater = LayoutInflater.from(aContext)
17. }
18.
19. override fun getCount(): Int {
20. return listData.size
21. }
22.
23. override fun getItem(position: Int): Any {
24. return listData[position]
25. }
26.
27. override fun getItemId(position: Int): Long {
28. return position.toLong()
29. }
30.
31. override fun getView(position: Int, view: View?, vg: ViewGroup): View? {
32. var v = view
33. val holder: ViewHolder
34. if (v == null) {
35. v = layoutInflater.inflate(R.layout.list_row, null)
36. holder = ViewHolder()
37. holder.uName = v.findViewById(R.id.name)
38. holder.uDesignation = v.findViewById(R.id.designation)
39. holder.uLocation = v.findViewById(R.id.location)
40. v.setTag(holder)
41. } else {
42. holder = (v.getTag() as ViewHolder)
43. }
44. holder.uName!!.setText(listData[position].name)
45. holder.uDesignation!!.setText(listData[position].designation)
46. holder.uLocation!!.setText(listData[position].location)
47. return v
48. }
49.
50. internal class ViewHolder {
51. var uName: TextView? = null
52. var uDesignation: TextView? = null
53. var uLocation: TextView? = null
54. }
55. }

Código archivo MainActivity.kt

1. package com.uaa.myapplication
2.
3. import androidx.appcompat.app.AppCompatActivity
4. import android.os.Bundle
5. import android.view.View
6. import android.widget.AdapterView
7. import android.widget.Toast
8. import kotlinx.android.synthetic.main.activity_main.*
9.
10. class MainActivity : AppCompatActivity() {
11. override fun onCreate(savedInstanceState: Bundle?) {
12. super.onCreate(savedInstanceState)
13. setContentView(R.layout.activity_main)
14.
15. val userList = getListData()
16.
17.
18. user_list.adapter=CustomListAdapter(this, userList)
19. user_list.onItemClickListener=AdapterView.OnItemClickListener { a:AdapterV
iew<*>?, v: View?, position:Int, id:Long ->
20. val user = a?.getItemAtPosition(position) as ListItem
21. Toast.makeText(
22. this@MainActivity,
23. "Selected : " + user.name + ", " + user.location,
24. Toast.LENGTH_SHORT
25. ).show()
26. }
27. }
28.
29. private fun getListData(): ArrayList <ListItem> {
30. val results = ArrayList <ListItem>()
31. val user1 = ListItem("Pepito","Lider de Equipo","Area de Desarrollo")
32. results.add(user1)
33. val user2 = ListItem("Fulanito","Desarrollador Senior","Cubo de Desarrollo
")
34. results.add(user2)
35. val user3 = ListItem("Perenganito","Desarrollador Junior","Cubo de Desarro
llo")
36. results.add(user3)
37. val user4 = ListItem("Sutanito","Analista de Sistemas","Depatamento de Inf
ormaion")
38. results.add(user4)
39. return results
40. }
41.
42. }
Resultado de la Aplicación
GridView

En Android, el control GridView es un ViewGroup que se usa para mostrar elementos en

una cuadrícula desplazable bidimensional y los elementos de cuadrícula se insertan
automáticamente en el diseño de vista de cuadrícula utilizando un adaptador de lista.
En general, el adaptador extrae datos de fuentes como una matriz o una base de datos y
convierte cada elemento en una vista de resultados y se coloca en la lista.
A continuación, se muestra la representación gráfica de GridView en aplicaciones de
Android.

Algunos de los atributos mas importantes del control GridView son los siguientes.

• android:numColumns, indica el número de columnas de la tabla o «auto_fit» si

queremos que sea calculado por el propio sistema operativo a partir de las
siguientes propiedades.
• android:columnWidth, indica el ancho de las columnas de la tabla.
• android:horizontalSpacing, indica el espacio horizontal entre celdas.
• android:verticalSpacing, indica el espacio vertical entre celdas.
• android:stretchMode, indica qué hacer con el espacio horizontal sobrante. Si se
establece al valor «columnWidth» este espacio será absorbido a partes iguales por
las columnas de la tabla. Si por el contrario se establece a «spacingWidth» será
absorbido a partes iguales por los espacios entre celdas.

Crear un control ListView en archivo de diseño XML

En Android, podemos crear un GridView en un archivo de diseño XML utilizando el
elemento <GridView> con diferentes atributos como se muestra a continuación.

1. <GridView android:id="@+id/gridView1"
2. android:layout_width="match_parent"
3. android:layout_height="match_parent"
4. android:numColumns="auto_fit"
5. android:columnWidth="250px"
6. android:horizontalSpacing="5dp"
7. android:verticalSpacing="10dp"
8. android:stretchMode="columnWidth" />
Para completar el ListView con la lista de valores, debemos especificar el Adaptador del
GridView, como un ArrayAdapter en el archivo de actividad como se muestra a
continuación.

1. var datos = arrayOfNulls<String>(50)

2.
3. for (i in 1..50) {
4. datos[i - 1] = "Dato $i"
5. }
6.
7. var adaptador = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, d
atos)
8.
9. gridView1.setAdapter(adaptado

Así es como podemos definir y vincular datos al control GridView en aplicaciones de

Android.
Responder a eventos
En cuanto a los eventos disponibles por el control GridView, el más comúnmente utilizado
será el generado al hacer clic en una opción de la lista, onItemClick. Para capturar este
evento se procederá de forma similar a lo ya visto para otros controles anteriormente,
asignándole su controlador mediante el método setOnItemClickListener().

1. gridView1.setOnItemClickListener { parent:AdapterView<*>, v:View, position: Int, i

d: Long ->
2. Toast.makeText(
3. this,
4. "Opción seleccionada: " + parent.getItemAtPosition(position),
5. Toast.LENGTH_SHORT
6. ).show()
7. }

Vemos cómo para recuperar el dato seleccionado utilizamos el método

getItemAtPosition() del parámetro AdapterView que recibimos en el evento.
Así es como podemos vincular datos a GridView usando ArrayAdapter en aplicaciones
de Android según nuestros requisitos.

Ejemplo del control GridView Personalizado en Android

El siguiente es el ejemplo de la definición de un control GridView Personalizado.
En el ejemplo anterior, aprendimos una forma sencilla de vincular datos
a GridView usando ArrayAdapter en la aplicación de Android. Ahora veremos cómo crear
nuestro propio adaptador personalizado y vincular datos a GridView con un ejemplo.
Para esto, necesitamos crear nuestra propia clase de adaptador personalizado
extendiéndolo con la clase BaseAdapter y crear una clase que contendrá parámetros para
los elementos de la fila de la lista.
En caso de que utilicemos BaseAdapter, debemos sobreescribir los siguientes métodos de
la clase BaseAdapter.

Método Descripción
getCount() Devolverá el número total de filas contadas en la vista de lista
getItem() Se utiliza para especificar los datos del objeto de cada fila.
getItemId() Devuelve la identificación de cada elemento de fila
getView() Se utiliza para devolver una instancia de vista que representa una sola fila en
el elemento ListView.

Archivos de recurso Layout XML

Código archivo activity_main.xml

1. <?xml version="1.0" encoding="utf-8"?>

2. <GridView xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@+id/gridView1"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:columnWidth="110dp"
7. android:gravity="center"
8. android:horizontalSpacing="10dp"
9. android:numColumns="auto_fit"
10. android:stretchMode="columnWidth"
11. android:verticalSpacing="10dp" />

Archivos de Clases Kotlin

Código archivo ImageAdapter.kt

1. package com.uaa.myapplication
2.
3. import android.content.Context
4. import android.view.View
5. import android.view.ViewGroup
6. import android.widget.AbsListView
7. import android.widget.BaseAdapter
8. import android.widget.ImageView
9.
10. class ImageAdapter(private val mContext: Context) : BaseAdapter() {
11. //Creamos un ArrayList de Int con las Imagenes
12. var thumbImages = arrayOf<Int>(
13. R.drawable.img1,
14. R.drawable.img2,
15. R.drawable.img3,
16. R.drawable.img4,
17. R.drawable.img5,
18. R.drawable.img6,
19. R.drawable.img7,
20. R.drawable.img8,
21. R.drawable.img1,
22. R.drawable.img2,
23. R.drawable.img3,
24. R.drawable.img4,
 25. R.drawable.img5,
26. R.drawable.img6,
27. R.drawable.img7,
28. R.drawable.img8,
29. R.drawable.img1,
30. R.drawable.img2,
31. R.drawable.img3,
32. R.drawable.img4,
33. R.drawable.img5,
34. R.drawable.img6,
35. R.drawable.img7,
36. R.drawable.img8
37. )
38.
39. override fun getCount(): Int {
40. return thumbImages.size
41. }
42.
43. override fun getItem(position: Int): Any? {
44. return null
45. }
46.
47. override fun getItemId(position: Int): Long {
48. return 0
49. }
50.
51. // Crea Un ImageView Para cada Item referenciado por el Adapter
52. override fun getView(position: Int, view: View?, vg: ViewGroup): View? {
53. val imageView = ImageView(mContext)
54. imageView.setLayoutParams(AbsListView.LayoutParams(200, 200))
55. imageView.setScaleType(ImageView.ScaleType.CENTER_CROP)
56. imageView.setPadding(8, 8, 8, 8)
57. imageView.setImageResource(thumbImages[position])
58. return imageView
59. }
60. }

Código archivo MainActivity.kt

1. package com.uaa.myapplication
2.
3. import androidx.appcompat.app.AppCompatActivity
4. import android.os.Bundle
5. import android.view.View
6. import android.widget.Toast
7. import kotlinx.android.synthetic.main.activity_main.*
8. import android.widget.AdapterView
9.
10. class MainActivity : AppCompatActivity() {
11. override fun onCreate(savedInstanceState: Bundle?) {
12. super.onCreate(savedInstanceState)
13. setContentView(R.layout.activity_main)
14.
15. var adaptador = ImageAdapter(this)
16. gridView1.adapter = adaptador
17. gridView1.onItemClickListener =
18. AdapterView.OnItemClickListener { parent: AdapterView<*>, v: View, pos
ition: Int, id: Long ->
19. Toast.makeText(
20. this,
 21. "Posicion de la Imagen: $position",
22. Toast.LENGTH_SHORT
23. ).show()
24. }
25. }
26. }

Resultado de la Aplicación
Referencias
1. https://developer.android.com/reference/android/widget/Adapter
2. https://developer.android.com/reference/android/widget/Spinner
3. https://developer.android.com/reference/android/widget/ListView
4. https://developer.android.com/reference/android/widget/GridView