Implementación de Loaders en Arquitectura MVP con Android

Contenido del curso

Arquitectura

Patrones de diseño

10
Patrones de Diseño en Android: Creacionales, Estructurales y Comportamiento
02:34 min

Patrones de diseño creacionales

Patrones de diseño estructurales

Patrones de comportamiento

Bonus: Architecture Components

Bonus: Custom View

31
Creación de Vistas Personalizadas en Android con Custom View
08:42 min

Conclusiones

32
Patrones de Diseño y Componentes de Texto en Android
01:19 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:49

Implementación de Loaders en Arquitectura MVP con Android

Curso de Patrones de Diseño en Android

Clase 8 de 32

Clase 8 / 32

Comentarios (17)17 comentarios

Noe Adrián Acuña Prado

Hace 6 años

Noe Adrián Acuña Prado

Hace 6 años

Emmanuel Peña Pereyra

Eric Gomez

Linda Amaya C

Héctor Herrera

JAIME URQUIZU

José Gregorio Block

Company_admin

Hace 6 años

Murray Walker Greer Cifuentes

Esteban Aragon

Saul Maldonado Ortiz

Esteban Aragon

Emmanuel Peña Pereyra

Hace 6 años

Victor Hugo Gallegos Mota

Hace 4 años

Luis Salas

Hace 6 años

Valeria Calcina Cisneros

Hace 7 años

Brandon Manzo

Hace 4 años

Henry Estuardo Ortiz Ajcúc

Hace 6 años

JAIME URQUIZU

Hace 6 años

Baudelio Antonio Andalon Villanueva

Hace 6 años

Joseph Michael Ciriaco Bermudez

Hace 6 años

JAIME URQUIZU

Hace 6 años

Lizeth Contreras Choque

Hace 3 años

Cristian Jiovany Villamil Prieto

Profesor

Hace 3 años

Gian Paul Ramirez Pacheco

Brian Chuquiruna

Guerlmy Nuñez

JAIME URQUIZU

JAIME URQUIZU

Recursos

¿Cómo crear un Loader en el Home Fragment usando XML?

Crear un Loader en una aplicación Android es una tarea esencial para mejorar la experiencia del usuario al mostrar una indicación visual de carga. En esta guía, veremos paso a paso cómo configurar un "Loader" en el Home Fragment de una aplicación Android utilizando XML.

¿Qué es un Loader y cómo se configura?

Un Loader es un componente de interfaz de usuario que indica al usuario que los datos están cargándose. Para crear uno, sigue estos pasos:

Dirígete al archivo XML del Fragment: Ve al archivo XML del fragmento en el que deseas agregar el Loader. Este archivo suele encontrarse en la carpeta res/layout de tu proyecto.
Crear un nuevo Widget: En tu fragmento XML, añade un ProgressBar. Este será el Loader que se mostrará en la aplicación.
```
<ProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/home_loader"
    android:visibility="invisible" />
```
- Ajusta las properties: Configura el ancho y alto a wrap_content para que se ajuste al contenido.
- Establece la visibilidad inicial a invisible: Esto asegura que el Loader no se muestre cuando se carga la vista, sino que lo controle el presentador.

Posicionamiento: Asegúrate de que el Loader esté centrado en la vista utilizando restricciones:

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

¿Cómo mostrar y ocultar el Loader desde el Home Fragment?

Una vez configurado en el XML, el siguiente paso es controlar la visibilidad del Loader desde el fragmento.

Accede al Loader desde el Fragment: En el archivo Java o Kotlin de tu fragmento, obtén la referencia al Loader usando su ID.
```
val homeLoader: ProgressBar = view.findViewById(R.id.home_loader)
```

Métodos para mostrar y ocultar el Loader:

Mostrar Loader:

fun showLoader() {
    homeLoader.visibility = View.VISIBLE
}

Ocultar Loader:

fun hideLoader() {
    homeLoader.visibility = View.GONE
}

Implementación de retraso con Handler: Para simular un tiempo de carga y mejorar la UX, puedes usar un Handler para retrasar la aparición o desaparición del Loader. Por ejemplo, para simular un retraso de 3 segundos:
```
val handler = Handler(Looper.getMainLooper())
handler.postDelayed({ hideLoader() }, 3000)
```

¿Qué arquitectura se está aplicando y cómo impacta?

En este contexto, se utiliza la arquitectura MVP (Modelo-Vista-Presentador). Esta arquitectura separa la aplicación en tres capas:

Vista: Maneja la interfaz de usuario.
Presentador: Contiene la lógica de negocio y dicta cuándo mostrar el Loader.
Modelo: Gestiona los datos de la aplicación, usualmente interactuando con bases de datos o APIs.

Usar MVP ayuda a mantener un código limpio y escalable. Si necesitas cambiar la manera en que los datos son manejados, puedes realizar modificaciones en la capa específica sin afectar las demás. Este es un gran ejemplo de la claridad y la eficiencia que aporta una arquitectura bien definida en el desarrollo de software.

Perspectivas futuras y arquitecturas alternativas

En clases futuras, se explorará la arquitectura MVVM (Modelo-Vista-Modelo de Vista) que ofrece otras ventajas para el manejo de la interfaz de usuario y la lógica de negocio. Mantente entusiasta, sigue explorando y perfeccionando tus conocimientos en arquitectura de software. Aquí es donde cada detalle cuenta y tu comprensión se profundiza al aplicar estos conceptos en proyectos reales. ¡Adelante y sigue aprendiendo!

no sé por que al profesor no le dió error pero a mi me daba error por que no estaba instanciado favoriteTransferItems asi que decidí usar null-safety

package com.cristianvillamil.platziwallet.ui.home.view

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.cristianvillamil.platziwallet.R
import com.cristianvillamil.platziwallet.ui.home.FavoriteTransfer

class FavoriteTransferAdapter : RecyclerView.Adapter<FavoriteTransferViewHolder>() {

	private var favoriteTransferItems: List<FavoriteTransfer>? = null
	override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FavoriteTransferViewHolder =
		FavoriteTransferViewHolder(
			LayoutInflater.from(parent.context).inflate(
				R.layout.favorite_transfer_row,
				parent,
				false
			)
		)


	override fun getItemCount(): Int {
		return favoriteTransferItems?.size ?: 0
	}

	override fun onBindViewHolder(holder: FavoriteTransferViewHolder, position: Int) =
		holder.bind(favoriteTransferItems?.get(position)!!)

	fun setData(favoriteTransferItems: List<FavoriteTransfer>) {
		this.favoriteTransferItems = favoriteTransferItems
		notifyDataSetChanged()
	}


}

también utilice el operador elvis y el non-null

Muchas gracias, ¿sabes a que se debe el error? ¿por que el método no logra contar los elementos de la lista?

Para solucionar el error al momento de probar el proyecto

En el **FavoriteTransferAdapter.kt **

Modifiquen la Linea

private lateinit var favoriteTransferItems: List<FavoriteTransfer>

por:

private var favoriteTransferItems: List<FavoriteTransfer>  = arrayListOf()

Estará funcionando el proyecto

Gracias. <3

Muchas gracias

HAY VARIAS COSAS QUE NO FUNCIONAN CORRECTAMENTE. Se supone que al llamar a la lista que tenemos en caché (dentro del HomeInteractor), tendrían que cambiar los nombres, las cantidades de dinero, aparecer fechas y fotos... Y no lo hace. Además debería aparecer una animación junto con la foto de perfil del usuario, que ni sale la foto ni sale la animación en cuanto lanzas la app... Hay muchos errores que no concuerdan con el código que tenemos en archivos y enlaces. Lo que yo eniendo es que NO se han molestado ni en comprobar si el XML que muestra la fila de transferencias está correcto (que sí lo está) lo que me lleva a entender QUE NO HAN TENIDO GANAS DE HACER EL PASO INTERMEDIO PARA QUE LA VISTA GENERE CADA NUEVO ITEM DEL CACHÉ... Si este curso lo está viendo alguien que no sabe nada de Android, cierra el vídeo y Platzi y se va a otros cursos en otros lugares... Ocurre mucho en todos los cursos. Se saltan pasos SUPERIMPORTANTES para aquellos que están comenzando (y que son los que quieren aprender) y se explican cosas innecesarias que luego no importan.

#Importante

amiguito, el curso en sí no está pensado para crear una app desde cero, no te confundas... el curso se llama Patrones de Diseño... y es para que aprendamos los conceptos, para que aprendamos los diferentes patrones.

Esta puede ser otra forma de crear un delay

Me puedes decir como creaste esa imagen por favor?

Mira acá puedes crear este tipo de imagenes https://carbon.now.sh/

Podemos usar los mismos constraints definidos en el recyclerview en nuestro Progress bar para que aparezca en la zona del recycleview, solo para darle un detallito mas en el diseño:

Código para lograr esa vista

        <ProgressBar
            android:id="@+id/homeLoader"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="@+id/favoriteTransfersRecyclerView"
            app:layout_constraintEnd_toEndOf="@+id/favoriteTransfersRecyclerView"
            app:layout_constraintStart_toStartOf="@+id/favoriteTransfersRecyclerView"
            app:layout_constraintTop_toTopOf="@+id/favoriteTransfersRecyclerView" />

Notar que el proyecto como tal carece de algunos detalles para que pueda ejecutarse correctamente. Algunos de ellos son: . FavoriteTransferAdapter . En este se requiere inicializar la lista de favoriteTransferItems en null. Lo hice de la siguiente manera:

class FavoriteTransferAdapter : RecyclerView.Adapter<FavoriteTransferViewHolder>() {

    private var favoriteTransferItems: List<FavoriteTransfer>? = null
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FavoriteTransferViewHolder =
            FavoriteTransferViewHolder(
                    LayoutInflater.from(parent.context).inflate(
                            R.layout.favorite_transfer_row,
                            parent,
                            false
                    )
            )


    override fun getItemCount(): Int{
        return favoriteTransferItems?.size ?: 0
    }

    override fun onBindViewHolder(holder: FavoriteTransferViewHolder, position: Int) {
        // holder.bind(favoriteTransferItems?.get(position)!!)
        favoriteTransferItems?.get(position)?.let { holder.bind(it) }
    }

    fun setData(favoriteTransferItems: List<FavoriteTransfer>) {
        this.favoriteTransferItems = favoriteTransferItems
        notifyDataSetChanged()
    }


}

. . FavoriteTransferViewHolder . En esta clase, no enlazaron las vistas con los datos que traemos de HomeInteractor … razón por la cual se muestran cards con la misma información; información que fué previamente asignada en el xml fragment_home. Adicional a esto, agregué una función para dar formato a los valores double de amount de forma que se agrega una coma “,” para separar los miles. Acá el código .

class FavoriteTransferViewHolder(private val view: View) : RecyclerView.ViewHolder(view) {

    @SuppressLint("SetTextI18n")
    fun bind(item: FavoriteTransfer) {
        val photoImageView = view.findViewById<ImageView>(R.id.profilePhotoImageView)
        val name = view.findViewById<TextView>(R.id.nameTextView)
        val transferAmount = view.findViewById<TextView>(R.id.transferredAmountTextView)
        val transferTime = view.findViewById<TextView>(R.id.transferTimeTextView)

        Picasso.get().load(item.photoUrl).into(photoImageView)
        name.text = item.name
        transferAmount.text = "$${formatingAmountOnDisplay(item)}"
        transferTime.text = item.date
    }

    private fun formatingAmountOnDisplay(item: FavoriteTransfer): String {
        val amount = item.amount.toString()
        var firstSegment: String = ""
        var secondSegment: String = ""
        var formatedText : String = ""

        if ((amount.length - 2) > 3 && (amount.length - 2) >= 6 ) {

            for (i in 0..2) {
                firstSegment += amount[i].toString()
            }

            for (j in 3 until amount.length) {
                secondSegment += amount[j].toString()
            }

            formatedText = "${firstSegment},${secondSegment}"

        }else if ((amount.length - 2) > 3 && (amount.length - 2) >= 5) {
            for (i in 0..1) {
                firstSegment += amount[i].toString()
            }

            for (j in 2 until amount.length) {
                secondSegment += amount[j].toString()
            }

            formatedText = "${firstSegment},${secondSegment}"

        }else if ((amount.length - 2) > 3 && (amount.length - 2) >= 4) {
            for (i in 0..0) {
                firstSegment += amount[i].toString()
            }

            for (j in 1 until amount.length) {
                secondSegment += amount[j].toString()
            }

            formatedText = "${firstSegment},${secondSegment}"
        }else {
            formatedText = item.amount.toString()
        }

        return formatedText
    }
}

Si se atrasaron en el código pueden descargar el archivo desde la sección 'Archivos y Enlaces', al final de todos esos documentos bajando para abajo le dan a 'descargar todo' y se les bajara un archivo zip, lo extraen y lo abren de forma tradicional en Android Studio..... (Abren Android Studios y abajo de la opción 'Start a new proyect' abajo hacen click a la opción 'Open an exist proyect' y escogen el archivo descomprimido del zip)

++Para los nuevos en este curso++, al menos 2023

Para el error de

kotlin.UninitializedPropertyAccessException: lateinit property favoriteTransferItems has not been initialized

Deben de modificar el archivo: FavoriteTransferAdapter.kt

// Linea 11 del archivo 
// Solo quitar lateinit e inicializar con emptyList() como este ejemplo

private var favoriteTransferItems: List<FavoriteTransfer> = emptyList()

Ahora bien!!!

Ciertamente hay algunas partes del sistema que no funcionan muy bien, si has seguido la ruta de desarrollo android podrás solucionar cada error, como la foto de perfil que no carga o bien como me ha pasado, hay muchos cambios y algunas depreciaciones en el código pero EL CURSO ES DE ARQUITECTURA así que no debes de ponerle mucha importancia (a menos que quieras meterle mano al código).

Sin embargo la idea es que puedas entender que estamos haciendo. Les deseo éxitos y que los comentarios negativos de este y los demás videos no los desanime, al final estamos aprendiendo y esto les servirá de experiencia en un ambiente laboral "REAL".

FavoriteTransferAdapter.kt private var favoriteTransferItems: List<FavoriteTransfer> = arrayListOf()

Esto que dices da error!!!!!!!!!! Cómo se soluciona...!!!!!

Excelente explicación, le estaba batallando para entenderle a esta arquitectura :D, gracias Cristian

Hasta ahora muy bueno el curso y el profe de muy buena calidad.

El profe bien, el curso malo porque no explican nada de la app y luego no se ve el resultado.

Tengo algunas preguntas, en HomeInteractor no me recibe la funcion, y como puedo verlo en mi celular?

Me podrías dar más detalles por aquí por favor y con gusto te ayudo

Para los que tienen el problema de inicialization siempre les va pasar por usar un late init y no inicializarlo y llamarlo, les recomiendo una buena practica es hacer esto

  override fun getItemCount(): Int =
        if (this::favoriteTransferItems.isInitialized) favoriteTransferItems.size
        else 0

En la clase "FavoriteTransferViewHolder" debemos agregar alguna lineas de codigo para que las se muestren los datos correctamente, de lo contrario saldra los mismos datos para todas las transferencias usar :

fun bind(item: FavoriteTransfer) {
       val photoImageView = view.findViewById<ImageView>(R.id.profilePhotoImageView)
       Picasso.get().load(item.photoUrl).into(photoImageView)
       val name = view.findViewById<TextView>(R.id.nameTextView)
       name.text=item.name
       val transferAmount = view.findViewById<TextView>(R.id.transferredAmountTextView)
       transferAmount.text=item.amount.toString()
       val transferTime = view.findViewById<TextView>(R.id.transferTimeTextView)
       transferTime.text=item.date
   }

Ademas de esto, la primera imagen no se muestra ya que no se puede tener acceso a URL de la imagen, en mi caso solo busque otra foto de Freddy Vega en internet y copie la url en la clase Home Interactor, y todo funciono correctamente :

        FavoriteTransfer(
                1,
                "Freddy Vega",
                800.000,
                "Hace 8h",
                "https://freddyvega.com/content/images/size/w2000/2020/08/freddy-vega-grande.jpg"
            )

Yo , los patrones de disenio lo estoy comprendiendo pero al ver tantos comando nuevos me pierdo ojala que me expliquen mejor la app en su forma basica y lueo sabre modificarla con MVP

Las clases e interfaces que acabamos de crear me salen de color rojo en las pestañas del IDE... No hay ningún error (sale el check verde arriba a la derecha). Alguna idea de por qué sale así??? Cuando corro la app, se carga en el emulador, pero al hacer el launch se me crashea y se cierra... Será también por lo mismo que las pestañas del IDE en rojo??? Alguien puede ayudarme con ello???

Cuando lanzo la app en mi móvil de prueba físico, al girarlo y ponerlo lateral no se ve la pantalla correctamente. Si se supone que hay constraints layouts para que se vea tanto vertical como horizontal en cualquier dispositvo, por qué no se ve bien y no hace scroll????? Alguna idea????

Arquitectura

Patrones de Diseño en Android: Soluciones y Aplicación Práctica

Fundamentos de Arquitectura de Software y su Impacto en Proyectos

Arquitecturas en Android: MVC y MVVM

Desarrollo de una Billetera Virtual con Git y Android Studio

Arquitectura MVP: Modelo, Vista y Presentador en Desarrollo de Software

Arquitectura MVP: Implementación en Proyectos Android

Implementación de Arquitectura MVP en Android

Implementación de Loaders en Arquitectura MVP con Android

Arquitectura MVVM en Android: Comunicación entre Capas

Patrones de diseño

Patrones de Diseño en Android: Creacionales, Estructurales y Comportamiento

Patrones de diseño creacionales

Implementación del Patrón Singleton en Kotlin para Android

Patrón Singleton en Kotlin para Gestión de Estados en Android

Patrón Builder en Android: Creación de Objetos Complejos

Implementación del Patrón Builder en Clases de Usuario

Funciones de Alcance en Kotlin: Uso de Apply

Patrón Factory: Creación y Uso en Desarrollo de Software

Patrones de diseño estructurales

Patrón de Diseño Adaptador para Transformar Datos en Clases Java

Aplicación del Patrón Proxy en Transferencias Seguras

Patrón de Diseño Fast Add en Aplicaciones Android

Patrones de comportamiento

Patrones de Diseño: Implementación del Patrón Observer en Proyectos

Patrón Observer en Android: Implementación y Uso Práctico

Patrón Comando: Implementación y Gestión de Comandos en Kotlin

Comandos para Guardar y Leer Archivos en Android

Ejecución de Comandos y Debugging en Android Studio

Bonus: Architecture Components

Componentes de Android Jetpack para Mejora de Aplicaciones

Implementación de LiveData en Android para Ciclo de Vida

Implementación de Room en Android para Gestión de Base de Datos

Creación de Entidades y DAO en Base de Datos con Room en Kotlin

Conexión y manejo de transferencias en Room Database

Implementación de ViewModel en Arquitectura MVVM en Android

Bonus: Custom View

Creación de Vistas Personalizadas en Android con Custom View

Conclusiones

Patrones de Diseño y Componentes de Texto en Android

Implementación de Loaders en Arquitectura MVP con Android