En el artículo anterior sobre JSON Parsing en Android usando Volley Library , hemos visto cómo podemos obtener los datos de JSON Object en nuestra aplicación de Android y mostrar ese JSON Object en nuestra aplicación. En este artículo, veremos cómo extraer datos de JSON Array y mostrarlos en nuestra aplicación.
JSON Array : JSON Array es un conjunto o una colección de datos que contiene varios objetos JSON con tipos de datos similares. JSON Array se puede identificar fácilmente con llaves de apertura «[» y llaves de cierre «]». Una array JSON tiene varios objetos JSON que tienen datos similares. Y cada objeto JSON tiene datos almacenados en forma de par de clave y valor.
¿Qué vamos a construir en este artículo?
Construiremos una aplicación simple en la que mostraremos una lista de CardView en la que mostraremos algunos cursos que están disponibles en Geeks for Geeks. qué
A continuación se muestra nuestra array JSON desde la cual mostraremos los datos en nuestra aplicación de Android.
[
{
«nombre del curso»: «CPP bifurcado»,
“cursoimg”:”https://media.geeksforgeeks.org/img-practice/banner/fork-cpp-thumbnail.png”,
“courseMode”:”Lote en línea”,
“courseTracks”:”6 Pistas”
},
{
“courseName”:”Linux & Shell Scripting Foundation”,
“cursoimg”:”https://media.geeksforgeeks.org/img-practice/banner/linux-shell-scripting-thumbnail.png”,
“courseMode”:”Lote en línea”,
“courseTracks”:”8 pistas”
},
{
“courseName”:”Taller de 11 semanas sobre estructuras de datos y algoritmos”,
“cursoimg”:”https://media.geeksforgeeks.org/img-practice/banner/Workshop-DSA-thumbnail.png”,
“courseMode”:”Lote en línea”,
“courseTracks”:”47 Pistas”
},
{
“courseName”:”Estructuras de datos y algoritmos”,
“courseimg”:”https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-thumbnail.png”,
“courseMode”:”Lote en línea”,
“courseTracks”:”24 Pistas”
}
]
Implementación paso a paso
Paso 1: Crear un nuevo proyecto
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java 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.
// la línea de abajo se usa para la biblioteca volley
implementación ‘com.android.volley:volley:1.1.1’
// la línea de abajo se usa para la biblioteca de carga de imágenes
implementación ‘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.
XML
<!--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
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <!--progress bar for loading indicator--> <ProgressBar android:id="@+id/idPB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" /> <!--recycler view to display our data--> <androidx.recyclerview.widget.RecyclerView android:id="@+id/idRVCourses" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="gone" /> </RelativeLayout>
Paso 5: Creando una clase Modal para almacenar nuestros datos
Para almacenar nuestros datos, tenemos que crear una nueva clase Java. Para crear una nueva clase de Java, 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 Java y asígnele el nombre CourseModal y agréguele el siguiente código. Se agregan comentarios dentro del código para comprender el código con más detalle.
Java
public class CourseModal {
// variables for our course
// name and description.
private String courseName;
private String courseimg;
private String courseMode;
private String courseTracks;
// creating constructor for our variables.
public CourseModal(String courseName, String courseimg, String courseMode, String courseTracks) {
this.courseName = courseName;
this.courseimg = courseimg;
this.courseMode = courseMode;
this.courseTracks = courseTracks;
}
// creating getter and setter methods.
public String getCourseName() {
return courseName;
}
public void setCourseName(String courseName) {
this.courseName = courseName;
}
public String getCourseimg() {
return courseimg;
}
public void setCourseimg(String courseimg) {
this.courseimg = courseimg;
}
public String getCourseMode() {
return courseMode;
}
public void setCourseMode(String courseMode) {
this.courseMode = courseMode;
}
public String getCourseTracks() {
return courseTracks;
}
public void setCourseTracks(String courseTracks) {
this.courseTracks = courseTracks;
}
}
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
<?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" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp" android:elevation="8dp" app:cardCornerRadius="8dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <!--ImageView to display our course image--> <ImageView android:id="@+id/idIVCourse" android:layout_width="match_parent" android:layout_height="300dp" android:layout_margin="5dp" /> <!--text view for our course name--> <TextView android:id="@+id/idTVCourseName" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:padding="5dp" android:text="Course Name " android:textColor="@color/black" android:textSize="18sp" android:textStyle="bold" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:orientation="horizontal" android:weightSum="2"> <!--text view for our batch name--> <TextView android:id="@+id/idTVBatch" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:padding="5dp" android:text="Batch" android:textColor="@color/black" /> <!--text view to display course tracks--> <TextView android:id="@+id/idTVTracks" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:padding="5dp" android:text="Tracks" android:textColor="@color/black" /> </LinearLayout> </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, 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 Java y asígnele el nombre CourseAdapter y agréguele el siguiente código.
Java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.squareup.picasso.Picasso;
import java.util.ArrayList;
public class CourseAdapter extends RecyclerView.Adapter<CourseAdapter.ViewHolder> {
// creating a variable for array list and context.
private ArrayList<CourseModal> courseModalArrayList;
private Context context;
// creating a constructor for our variables.
public CourseAdapter(ArrayList<CourseModal> courseModalArrayList, Context context) {
this.courseModalArrayList = courseModalArrayList;
this.context = context;
}
@NonNull
@Override
public CourseAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// below line is to inflate our layout.
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.course_rv_item, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull CourseAdapter.ViewHolder holder, int position) {
// setting data to our views of recycler view.
CourseModal modal = courseModalArrayList.get(position);
holder.courseNameTV.setText(modal.getCourseName());
holder.courseTracksTV.setText(modal.getCourseTracks());
holder.courseModeTV.setText(modal.getCourseMode());
Picasso.get().load(modal.getCourseimg()).into(holder.courseIV);
}
@Override
public int getItemCount() {
// returning the size of array list.
return courseModalArrayList.size();
}
public class ViewHolder extends RecyclerView.ViewHolder {
// creating variables for our views.
private TextView courseNameTV, courseModeTV, courseTracksTV;
private ImageView courseIV;
public ViewHolder(@NonNull View itemView) {
super(itemView);
// initializing our views with their ids.
courseNameTV = itemView.findViewById(R.id.idTVCourseName);
courseModeTV = itemView.findViewById(R.id.idTVBatch);
courseTracksTV = itemView.findViewById(R.id.idTVTracks);
courseIV = itemView.findViewById(R.id.idIVCourse);
}
}
}
Paso 8: trabajar con el archivo MainActivity.java
Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.
Java
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.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonArrayRequest;
import com.android.volley.toolbox.Volley;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
// creating variables for
// our ui components.
private RecyclerView courseRV;
// variable for our adapter
// class and array list
private CourseAdapter adapter;
private ArrayList<CourseModal> courseModalArrayList;
// below line is the variable for url from
// where we will be querying our data.
String url = "https://jsonkeeper.com/b/WO6S";
private ProgressBar progressBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initializing our variables.
courseRV = findViewById(R.id.idRVCourses);
progressBar = findViewById(R.id.idPB);
// below line we are creating a new array list
courseModalArrayList = new ArrayList<>();
getData();
// calling method to
// build recycler view.
buildRecyclerView();
}
private void getData() {
// creating a new variable for our request queue
RequestQueue queue = Volley.newRequestQueue(MainActivity.this);
// in this case the data we are getting is in the form
// of array so we are making a json array request.
// below is the line where we are making an json array
// request and then extracting data from each json object.
JsonArrayRequest jsonArrayRequest = new JsonArrayRequest(Request.Method.GET, url, null, new Response.Listener<JSONArray>() {
@Override
public void onResponse(JSONArray response) {
progressBar.setVisibility(View.GONE);
courseRV.setVisibility(View.VISIBLE);
for (int i = 0; i < response.length(); i++) {
// creating a new json object and
// getting each object from our json array.
try {
// we are getting each json object.
JSONObject responseObj = response.getJSONObject(i);
// now we get our response from API in json object format.
// in below line we are extracting a string with
// its key value from our json object.
// similarly we are extracting all the strings from our json object.
String courseName = responseObj.getString("courseName");
String courseTracks = responseObj.getString("courseTracks");
String courseMode = responseObj.getString("courseMode");
String courseImageURL = responseObj.getString("courseimg");
courseModalArrayList.add(new CourseModal(courseName, courseImageURL, courseMode, courseTracks));
buildRecyclerView();
} catch (JSONException e) {
e.printStackTrace();
}
}
}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
Toast.makeText(MainActivity.this, "Fail to get the data..", Toast.LENGTH_SHORT).show();
}
});
queue.add(jsonArrayRequest);
}
private void buildRecyclerView() {
// initializing our adapter class.
adapter = new CourseAdapter(courseModalArrayList, MainActivity.this);
// adding layout manager
// to our recycler view.
LinearLayoutManager manager = new LinearLayoutManager(this);
courseRV.setHasFixedSize(true);
// setting layout manager
// to our recycler view.
courseRV.setLayoutManager(manager);
// setting adapter to
// our recycler view.
courseRV.setAdapter(adapter);
}
}
Ahora ejecute su aplicación y vea el resultado de la aplicación.
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA