En cualquier aplicación de Android, solo hay un límite que un usuario puede hacer sin una conexión a Internet. Todas las aplicaciones modernas de Android interactúan con los recursos disponibles en línea o con un backend específico para la aplicación. En este artículo, veremos una de las formas en que podemos recuperar y publicar recursos en línea a través de requests HTTP. Usaremos la Biblioteca Volley para manejar las requests HTTP.
Descripción general de la aplicación
Construiremos una aplicación simple en la que usaremos ImageView para mostrar imágenes de perros y un botón para obtener una imagen de otro perro. Cada vez que se presione el botón, se realizará una nueva solicitud HTTP para obtener una imagen de perro y se mostrará en ImageView.
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 . El código para eso se proporcionó tanto en Java como en el lenguaje de programación Kotlin para Android.
Paso 2: agregue las dependencias requeridas
Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.
1. Dependencia de la biblioteca Volley.
implementation 'com.android.volley:volley:1.2.1'
2. Biblioteca de procesamiento de imágenes Glide para almacenar en caché y cargar imágenes desde la URL de la imagen recuperada de la solicitud HTTP.
implementation 'com.github.bumptech.glide:glide:4.13.2'
Paso 3: agregar permisos de uso de Internet al archivo AndroidManifest.xml
Para permitir que nuestra aplicación haga llamadas de red, debemos decirle al sistema Android que nuestra aplicación requiere Internet para funcionar. Podemos hacer esto agregando el permiso de uso de Internet en el archivo de manifiesto de Android .
Vaya a aplicación > manifiestos > AndroidManifest.xml y agregue el código que se proporciona a continuación al archivo.
<!-- permissions for INTERNET --> <uses-permission android:name="android.permission.INTERNET"/>
Paso 4: Trabajar con los archivos 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"?> <!-- Root layout of our activity --> <androidx.constraintlayout.widget.ConstraintLayout 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" tools:context=".MainActivity"> <!-- This ImageView is used to show the dog images to the user --> <ImageView android:id="@+id/dogImageView" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintBottom_toTopOf="@+id/nextDogButton" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" android:layout_marginHorizontal="6dp" android:layout_marginBottom="10dp" tools:srcCompat="@tools:sample/avatars" /> <!-- This Button is used for making a new HTTP request for fetching new dog image --> <Button android:id="@+id/nextDogButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Next Dog" android:padding="12dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" android:layout_marginBottom="30dp"/> </androidx.constraintlayout.widget.ConstraintLayout>
Paso 5: trabajar con el archivo MainActivity
Vaya al archivo MainActivity y consulte el siguiente código. A continuación se muestra el código para el archivo MainActivity. Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
import android.os.Bundle
import android.util.Log
import android.widget.Button
import android.widget.ImageView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.android.volley.Request
import com.android.volley.toolbox.JsonObjectRequest
import com.android.volley.toolbox.Volley
import com.bumptech.glide.Glide
class MainActivity : AppCompatActivity() {
// member variable for holding the
// ImageView in which images will
// be loaded
private lateinit var mDogImageView: ImageView
private lateinit var nextDogButton: Button
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// initialize the ImageView and the Button
mDogImageView = findViewById(R.id.dogImageView)
nextDogButton = findViewById(R.id.nextDogButton)
// attaching on click listener to the button so
// that `loadDogImage()` function is called
// everytime after clicking it.
nextDogButton.setOnClickListener { loadDogImage() }
// image of a dog will be loaded once
// at the start of the app
loadDogImage()
}
// function for making a HTTP request using
// Volley and inserting the image in the
// ImageView using Glide library.
private fun loadDogImage() {
// getting a new volley request
// queue for making new requests
val volleyQueue = Volley.newRequestQueue(this)
// url of the api through which we get random dog images
val url = "https://dog.ceo/api/breeds/image/random"
// since the response we get from the api is in JSON,
// we need to use `JsonObjectRequest` for
// parsing the request response
val jsonObjectRequest = JsonObjectRequest(
// we are using GET HTTP request method
Request.Method.GET,
// url we want to send the HTTP request to
url,
// this parameter is used to send a JSON object
// to the server, since this is not required in
// our case, we are keeping it `null`
null,
// lambda function for handling the case
// when the HTTP request succeeds
{ response ->
// get the image url from the JSON object
val dogImageUrl = response.get("message")
// load the image into the ImageView using Glide.
Glide.with(this).load(dogImageUrl).into(mDogImageView)
},
// lambda function for handling the
// case when the HTTP request fails
{ error ->
// make a Toast telling the user
// that something went wrong
Toast.makeText(this, "Some error occurred! Cannot fetch dog image", Toast.LENGTH_LONG).show()
// log the error message in the error stream
Log.e("MainActivity", "loadDogImage error: ${error.localizedMessage}")
}
)
// add the json request object created
// above to the Volley request queue
volleyQueue.add(jsonObjectRequest)
}
}
Java
import android.os.Bundle;
import android.util.Log;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.toolbox.JsonObjectRequest;
import com.android.volley.toolbox.Volley;
import com.bumptech.glide.Glide;
import org.json.JSONException;
import org.json.JSONObject;
public class MainActivity extends AppCompatActivity {
// member variable for holding the ImageView
// in which images will be loaded
ImageView mDogImageView;
Button nextDogButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initialize the ImageView and the Button
mDogImageView = findViewById(R.id.dogImageView);
nextDogButton = findViewById(R.id.nextDogButton);
// attaching on click listener to the button so that `loadDogImage()`
// function is called everytime after clicking it.
nextDogButton.setOnClickListener(View -> loadDogImage());
// image of a dog will be loaded once at the start of the app
loadDogImage();
}
// function for making a HTTP request using Volley and
// inserting the image in the ImageView using Glide library
private void loadDogImage() {
// getting a new volley request queue for making new requests
RequestQueue volleyQueue = Volley.newRequestQueue(MainActivity.this);
// url of the api through which we get random dog images
String url = "https://dog.ceo/api/breeds/image/random";
// since the response we get from the api is in JSON, we
// need to use `JsonObjectRequest` for parsing the
// request response
JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(
// we are using GET HTTP request method
Request.Method.GET,
// url we want to send the HTTP request to
url,
// this parameter is used to send a JSON object to the
// server, since this is not required in our case,
// we are keeping it `null`
null,
// lambda function for handling the case
// when the HTTP request succeeds
(Response.Listener<JSONObject>) response -> {
// get the image url from the JSON object
String dogImageUrl;
try {
dogImageUrl = response.getString("message");
// load the image into the ImageView using Glide.
Glide.with(MainActivity.this).load(dogImageUrl).into(mDogImageView);
} catch (JSONException e) {
e.printStackTrace();
}
},
// lambda function for handling the case
// when the HTTP request fails
(Response.ErrorListener) error -> {
// make a Toast telling the user
// that something went wrong
Toast.makeText(MainActivity.this, "Some error occurred! Cannot fetch dog image", Toast.LENGTH_LONG).show();
// log the error message in the error stream
Log.e("MainActivity", "loadDogImage error: ${error.localizedMessage}");
}
);
// add the json request object created above
// to the Volley request queue
volleyQueue.add(jsonObjectRequest);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por anshul3pathi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA