Taller de Desarrollo Móvil en Android

Práctica 3: Implementación de RecyclerView

Misión: Mostrar una lista de elementos que se pueda deslizar (scroll), alimentada por los datos que el usuario ingresa en la primera pantalla.

Paso 1: Configurar el Contenedor (HomeActivity)

1. Ve al panel Android (izquierda).

2. Abre la carpeta res > layout > activity_home.xml.

3. En la esquina superior derecha, haz clic en el botón Code.

4. Sustituye el código actual por este:

<androidx.recyclerview.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rvUsuarios"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

Paso 2: Crear el diseño del Renglón (Item)

1. Haz clic derecho sobre la carpeta layout.

2. Selecciona New > Layout Resource File.

3. En File name escribe: item_usuario. Haz clic en OK.

4. Ve a la pestaña Code y sustituye todo (asegúrate de que no quede un ConstraintLayout por fuera):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp"
    android:gravity="center_vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="👤"
        android:textSize="24sp"
        android:layout_marginEnd="16dp" />

    <TextView
        android:id="@+id/tvNombreItem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#002b5c"
        android:textSize="18sp"
        android:textStyle="bold" />
</LinearLayout>

Paso 3: Crear la Clase UserAdapter (El Cerebro)

1. Ve a la carpeta java > mx.lasalle.ciclovida.

2. Haz clic derecho sobre la carpeta del paquete y selecciona New > File.

3. Escribe el nombre exacto: UserAdapter.kt (no olvides el .kt).

4. Sustituye todo el contenido por este código:

package mx.lasalle.ciclovida

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class UserAdapter(private val lista: List<String>) : 
    RecyclerView.Adapter<UserAdapter.UserViewHolder>() {

    class UserViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val nombre: TextView = view.findViewById(R.id.tvNombreItem)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): UserViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_usuario, parent, false)
        return UserViewHolder(view)
    }

    override fun onBindViewHolder(holder: UserViewHolder, position: Int) {
        holder.nombre.text = lista[position]
    }

    override fun getItemCount(): Int = lista.size
}

Paso 4: Sincronizar Envío y Recepción

En MainActivity.kt (Botón Enviar):

val nombreUsuario = cuadroTexto.text.toString()
val pasarPantalla = Intent(this, HomeActivity::class.java)
pasarPantalla.putExtra("USER_NAME", nombreUsuario)
startActivity(pasarPantalla)

En HomeActivity.kt (Cargar Lista):

val usuarioPrincipal = intent.getStringExtra("USER_NAME") ?: "Invitado"
val misDatos = listOf(usuarioPrincipal, "Software", "Sistemas", "Android", "Nezahualcóyotl")

val rv = findViewById<RecyclerView>(R.id.rvUsuarios)
rv.adapter = UserAdapter(misDatos)

🎓 Bitácora Técnica de Ingeniería

Durante esta ejecución, hemos aprendido a resolver:

• Localización: Los archivos .kt deben estar en la misma carpeta del paquete para verse entre sí.
• Nomenclatura: El error Unresolved reference ocurre si el nombre de la variable declarada no es igual al usado en el Intent.
• Jerarquía UI: Usar un solo contenedor raíz en item_usuario.xml evita que los elementos se encimen.