Android: extraiga datos de JSON Array usando Volley Library con Kotlin

Las respuestas JSON son de 2 tipos, es decir, JSON Object y JSON Array. JSON Array consiste en objetos JSON individuales que tienen la misma estructura similar pero tienen diferentes valores dentro de ella. JSON Array se utiliza para analizar los datos en forma de lista o array. En el artículo anterior, echamos un vistazo a Cómo extraer datos de JSON Object en Android con Kotlin . En este artículo, veremos cómo analizar datos de una array JSON en Android usando la biblioteca  Volley en Kotlin.

Nota : si está buscando extraer datos de JSON Array en la aplicación de Android usando Volley en Java. Consulte el siguiente artículo: Cómo extraer datos de una array JSON en Android usando Java

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2: agregue la dependencia a continuación en su archivo build.gradle

A continuación se muestra la dependencia de Volley que usaremos para obtener los datos de la API. Para agregar esta dependencia, vaya a la aplicación > Gradle Scripts > build.gradle(app) y agregue la dependencia a continuación en la sección de dependencias. Hemos utilizado la dependencia de Picasso para la carga de imágenes desde la URL.  

// below line is used for volley library
implementation 'com.android.volley:volley:1.1.1'

// below line is used for image loading library
implementation 'com.squareup.picasso:picasso:2.71828'

Después de agregar esta dependencia, sincronice su proyecto y ahora muévase hacia la parte AndroidManifest.xml.  

Paso 3: agregar permisos a Internet en el archivo AndroidManifest.xml

Vaya a la aplicación > AndroidManifest.xml y agréguele el siguiente código.  

<!--permissions for INTERNET-->
<uses-permission android:name="android.permission.INTERNET"/>

Paso 4: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml. 

<?xml version="1.0" encoding="utf-8"?>
<!--on below line we are creating a swipe to refresh layout-->
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <!--recycler view for displaying data-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/idRVCourses"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
 
    <!--progress bar for loading-->
    <ProgressBar
        android:id="@+id/idPBLoading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />
 
</RelativeLayout>

Paso 5: Creando una clase Modal para almacenar nuestros datos

Para almacenar nuestros datos, debemos crear una nueva clase de Kotlin. Para crear una nueva clase de Kotlin, vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase de Kotlin y asígnele el nombre CourseRVModal y agréguele el siguiente código. Se agregan comentarios dentro del código para comprender el código con más detalle.

package com.gtappdevelopers.kotlingfgproject
 
data class CourseRVModal(
    // on below line we are creating a two variable
    // one for course name and other for course image.
    var courseName: String,
    var courseImg: String
)

Paso 6: crear un archivo de diseño para cada elemento de nuestro RecyclerView

Navegue a la aplicación> res> diseño> Haga clic con el botón derecho en él> Nuevo> archivo de recursos de diseño y asigne el nombre del archivo como curso_rv_elemento y agregue el código a continuación. Se agregan comentarios en el código para conocer con más detalle. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    app:cardCornerRadius="5dp"
    app:cardElevation="4dp">
     
      <!--on below line we are creating a
        linear layout for grid view item-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
 
        <!--on below line we are creating
            a simple image view-->
        <ImageView
            android:id="@+id/idIVCourse"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_gravity="center"
            android:layout_margin="8dp"
            android:padding="5dp"
            android:src="@mipmap/ic_launcher" />
 
        <!--on below line we are creating
            a simple text view-->
        <TextView
            android:id="@+id/idTVCourse"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:padding="4dp"
            android:text="@string/app_name"
            android:textAlignment="textStart"
            android:textColor="@color/black"
            android:textStyle="bold"
            tools:ignore="RtlCompat" />
 
    </LinearLayout>
 
</androidx.cardview.widget.CardView>

Paso 7: crear una clase de adaptador para configurar datos en nuestro elemento RecyclerView

Para crear una nueva clase de adaptador, navegue hasta la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Kotlin y asígnele el nombre CourseRVAdapter y agréguele el siguiente código. 

package com.gtappdevelopers.kotlingfgproject
 
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.squareup.picasso.Picasso
 
// on below line we are creating a course rv adapter class.
class CourseRVAdapter(
    // on below line we are passing variables as course list and context
    private var courseList: ArrayList<CourseRVModal>,
    ) : RecyclerView.Adapter<CourseRVAdapter.CourseViewHolder>() {
    override fun onCreateViewHolder(
        parent: ViewGroup,
        viewType: Int
    ): CourseRVAdapter.CourseViewHolder {
        // this method is use to inflate the layout file
        // which we have created for our recycler view.
        // on below line we are inflating our layout file.
        val itemView = LayoutInflater.from(parent.context).inflate(
            R.layout.course_rv_item,
            parent, false
        )
        // at last we are returning our view
        // holder class with our item View File.
        return CourseViewHolder(itemView)
    }
 
    override fun onBindViewHolder(holder: CourseRVAdapter.CourseViewHolder, position: Int) {
        // on below line we are setting data to our text view and our image view.
        holder.courseNameTV.text = courseList.get(position).courseName
        Picasso.get().load(courseList.get(position).courseImg).into(holder.courseIV)
    }
 
    override fun getItemCount(): Int {
        // on below line we are returning
        // our size of our list
        return courseList.size
    }
 
    class CourseViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        // on below line we are initializing our course name
        // text view and our image view.
        val courseNameTV: TextView = itemView.findViewById(R.id.idTVCourse)
        val courseIV: ImageView = itemView.findViewById(R.id.idIVCourse)
    }
}

Paso 8: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt. Se agregan comentarios dentro del código para comprender el código con más detalle.

package com.gtappdevelopers.kotlingfgproject
 
import android.os.Bundle
import android.view.View
import android.widget.ProgressBar
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.RecyclerView
import com.android.volley.Request
import com.android.volley.toolbox.JsonArrayRequest
import com.android.volley.toolbox.Volley
 
class MainActivity : AppCompatActivity() {
 
    // on below line we are creating variables.
    lateinit var courseRV: RecyclerView
    lateinit var loadingPB: ProgressBar
    lateinit var courseRVAdapter: CourseRVAdapter
    lateinit var courseList: ArrayList<CourseRVModal>
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         
        // on below line we are initializing
        // our variable with their ids.
        courseRV = findViewById(R.id.idRVCourses)
        loadingPB = findViewById(R.id.idPBLoading)
 
        // on below line we are initializing our list
        courseList = ArrayList()
 
        // on below line we are initializing our adapter.
        courseRVAdapter = CourseRVAdapter(courseList)
 
        // on below line we are setting
        // adapter to recycler view.
        courseRV.adapter = courseRVAdapter
 
        // on below line we are calling
        // get data method to get data.
        getData()
 
    }
 
    private fun getData() {
        // on below line we are creating a variable for url
        var url = "https://jsonkeeper.com/b/0RH6"
 
        // on below line we are creating a
        // variable for our request queue
        val queue = Volley.newRequestQueue(this@MainActivity)
 
        // on below line we are creating a request
        // variable for making our json object request.
        val request =
            // as we are getting json object response and we are making a get request.
            JsonArrayRequest(Request.Method.GET, url, null, { response ->
                // this method is called when we get successful response from API.
                loadingPB.visibility = View.GONE
                try {
                    for (i in 0 until response.length()) {
                        // on below line we are extracting
                        // data from each json object
                        val respObj = response.getJSONObject(i)
                        val lngName = respObj.getString("languageName")
                        val lngImg = respObj.getString("languageImg")
 
                        // on below line we are adding data to our list
                        courseList.add(CourseRVModal(lngName, lngImg))
 
                        // on below line we are notifying
                        // our adapter that data has updated.
                        courseRVAdapter.notifyDataSetChanged()
                    }
 
                  // on below line we
                  // are handling exception
                } catch (e: Exception) {
                    e.printStackTrace()
                }
 
            }, { error ->
                // in this case we are simply displaying a toast message.
                Toast.makeText(this@MainActivity, "Fail to get response", Toast.LENGTH_SHORT)
                    .show()
            })
        // at last we are adding our
        // request to our queue.
        queue.add(request)
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: