¿Cómo crear un control deslizante de imagen automático dinámico en Android con Firebase?

Hemos visto muchas aplicaciones que muestran imágenes en formato deslizante como el de los banners que se deslizan automáticamente. Este tipo de función del control deslizante automático de imágenes se ve en muchos sitios de comercio electrónico. Esta característica se ve en muchas aplicaciones que tienen imágenes en ellas. En este artículo, veremos cómo crear un control deslizante de imagen automático dinámico en Android . Entonces usaremos Firebase para cargar las imágenes dentro de nuestro control deslizante con Firebase . Con la ayuda de Firebase, estas imágenes se pueden actualizar en tiempo real sin actualizar la aplicación. Para la implementación de SliderView, utilizaremos la biblioteca SliderView. 

¿Qué vamos a construir en este artículo? 

Crearemos una aplicación simple en la que crearemos una vista deslizante y mostraremos imágenes de Firebase dentro de nuestro SliderView. qué

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: conecta tu aplicación a Firebase

Después de crear un nuevo proyecto, vaya a la opción Herramientas en la barra superior. Dentro de eso, haga clic en Firebase. Después de hacer clic en Firebase, puede ver la columna de la derecha que se menciona a continuación en la captura de pantalla.

Dentro de esa columna, navegue hasta Firebase Cloud Firestore. Haga clic en esa opción y verá dos opciones en Conectar la aplicación a Firebase y Agregar Cloud Firestore a su aplicación. Haga clic en la opción Conectar ahora y su aplicación se conectará a Firebase. Después de eso, haga clic en la segunda opción y ahora su aplicación está conectada a Firebase. Después de conectar su aplicación a Firebase, verá la siguiente pantalla.  

Después de eso, verifique que la dependencia para la base de datos Firebase Firestore se haya agregado a nuestro archivo Gradle. Navegue a la aplicación > Gradle Scripts dentro de ese archivo para verificar si la dependencia a continuación se agrega o no. Si la dependencia a continuación no está presente en su archivo build.gradle. Agregue la siguiente dependencia en la sección de dependencias.

implementación ‘com.google.firebase:firebase-firestore:22.0.1’

Después de agregar esta dependencia, agregaremos la dependencia para nuestro SliderView y Picasso , que se usará para cargar imágenes desde su URL de imagen.

implementación ‘com.github.smarteist:autoimageslider:1.3.9’

implementación ‘com.squareup.picasso:picasso:2.71828’  

Después de agregar estas dependencias, sincronice su proyecto. Ahora nos moveremos hacia la parte AndroidManifest.xml de la aplicación. 

Paso 3: trabajar con el archivo AndroidManifest.xml 

Para agregar datos a Firebase, deberíamos otorgar permisos para acceder a Internet. Para agregar estos permisos, vaya a la aplicación > AndroidManifest.xml y, dentro de ese archivo, agregue los siguientes permisos.  

<!--Permissions for internet-->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Paso 4: trabajar con el archivo activity_main.xml

Vaya al archivo activity_main.xml y consulte el siguiente código. A continuación se muestra el código para el archivo activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    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:orientation="vertical"
    tools:context=".MainActivity">
  
    <!--Slider view for displaying our sliding images-->
    <com.smarteist.autoimageslider.SliderView
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        app:sliderAnimationDuration="600"
        app:sliderAutoCycleDirection="back_and_forth"
        app:sliderIndicatorAnimationDuration="600"
        app:sliderIndicatorEnabled="false"
        app:sliderIndicatorGravity="center_horizontal|bottom"
        app:sliderIndicatorMargin="15dp"
        app:sliderIndicatorOrientation="horizontal"
        app:sliderIndicatorPadding="3dp"
        app:sliderIndicatorRadius="2dp"
        app:sliderIndicatorSelectedColor="#5A5A5A"
        app:sliderIndicatorUnselectedColor="#FFF"
        app:sliderScrollTimeInSec="1" />
  
</LinearLayout>

Paso 5: crear una clase modal para almacenar la URL de nuestras imágenes en Slider

Ahora crearemos una clase modal para almacenar nuestras URL para nuestras imágenes. Para crear una nueva clase Java. Vaya a la aplicación > java > el nombre del paquete de su aplicación y haga clic con el botón derecho en él y haga clic en Nuevo > Clase Java . Asigne un nombre a su clase Java y agréguele el siguiente código. Aquí le hemos dado el nombre como SliderData . A continuación se muestra el código para el  archivo SliderData.java .  

public class SliderData {
  
    // string for our image url.
    private String imgUrl;
  
    // empty constructor which is
    // required when using Firebase.
    public SliderData() {
    }
  
    // Constructor
    public SliderData(String imgUrl) {
        this.imgUrl = imgUrl;
    }
  
    // Getter method.
    public String getImgUrl() {
        return imgUrl;
    }
  
    // Setter method.
    public void setImgUrl(String imgUrl) {
        this.imgUrl = imgUrl;
    }
}

Paso 6: cree un archivo de diseño para nuestros artículos dentro de nuestro SliderView

Para crear un nuevo archivo de diseño para mostrar dentro de nuestro SliderView, navegue a la aplicación> res> diseño> Haga clic con el botón derecho en él y haga clic en Nuevo> Archivo de recursos de diseño y asigne un nombre a su archivo. Aquí le hemos dado el nombre del archivo como image_slider_item y le agregamos el siguiente código. 

<?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"
    app:cardCornerRadius="8dp">
  
    <!--Image to be displayed in our ImageView-->
    <ImageView
        android:id="@+id/idIVimage"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:contentDescription="@string/app_name" />
  
</androidx.cardview.widget.CardView>

Paso 7: crear una clase de adaptador para configurar datos dentro de nuestros elementos deslizantes

Para crear una 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 nombre su clase como SliderAdapter y agréguele el código a continuación.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
  
import com.smarteist.autoimageslider.SliderViewAdapter;
import com.squareup.picasso.Picasso;
  
import java.util.ArrayList;
import java.util.List;
  
public class SliderAdapter extends SliderViewAdapter<SliderAdapter.SliderAdapterVH> {
      
    // creating a variable for 
    // context and array list.
    private Context context;
    private List<SliderData> mSliderItems = new ArrayList<>();
  
    // constructor for our adapter class.
    public SliderAdapter(Context context, List<SliderData> mSliderItems) {
        this.context = context;
        this.mSliderItems = mSliderItems;
    }
  
    @Override
    public SliderAdapterVH onCreateViewHolder(ViewGroup parent) {
        // inside the on Create view holder method we are 
        // inflating our layout file which we have created.
        View inflate = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_slider_item, null);
        return new SliderAdapterVH(inflate);
    }
  
    @Override
    public void onBindViewHolder(SliderAdapterVH viewHolder, int position) {
        // inside on bind view holder method we are 
        // getting url of image from our modal class
        // and setting that url for image inside our 
        // image view using Picasso.
        final SliderData sliderItem = mSliderItems.get(position);
        Picasso.get().load(sliderItem.getImgUrl()).into(viewHolder.imageView);
    }
  
    @Override
    public int getCount() {
        // returning the size of our array list.
        return mSliderItems.size();
    }
  
    // view holder class for initializing our view holder.
    class SliderAdapterVH extends SliderViewAdapter.ViewHolder {
  
        // variables for our view and image view.
        View itemView;
        ImageView imageView;
  
        public SliderAdapterVH(View itemView) {
            super(itemView);
            // initializing our views.
            imageView = itemView.findViewById(R.id.idIVimage);
            this.itemView = itemView;
        }
    }
}

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.

import android.os.Bundle;
import android.widget.Toast;
  
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
  
import com.google.android.gms.tasks.OnFailureListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.QueryDocumentSnapshot;
import com.google.firebase.firestore.QuerySnapshot;
import com.smarteist.autoimageslider.SliderAnimations;
import com.smarteist.autoimageslider.SliderView;
  
import java.util.ArrayList;
  
public class MainActivity extends AppCompatActivity {
  
    // creating variables for our adapter, array list, 
    // firebase firestore and our sliderview.
    private SliderAdapter adapter;
    private ArrayList<SliderData> sliderDataArrayList;
    FirebaseFirestore db;
    private SliderView sliderView;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // creating a new array list fr our array list.
        sliderDataArrayList = new ArrayList<>();
          
        // initializing our slider view and
        // firebase firestore instance.
        sliderView = findViewById(R.id.slider);
        db = FirebaseFirestore.getInstance();
          
        // calling our method to load images.
        loadImages();
    }
  
    private void loadImages() {
        // getting data from our collection and after 
        // that calling a method for on success listener.
        db.collection("Slider").get().addOnSuccessListener(new OnSuccessListener<QuerySnapshot>() {
            @Override
            public void onSuccess(QuerySnapshot queryDocumentSnapshots) {
                  
                // inside the on success method we are running a for loop
                // and we are getting the data from Firebase Firestore
                for (QueryDocumentSnapshot documentSnapshot : queryDocumentSnapshots) {
                      
                    // after we get the data we are passing inside our object class.
                    SliderData sliderData = documentSnapshot.toObject(SliderData.class);
                    SliderData model = new SliderData();
                      
                    // below line is use for setting our
                    // image url for our modal class.
                    model.setImgUrl(sliderData.getImgUrl());
                      
                    // after that we are adding that 
                    // data inside our array list.
                    sliderDataArrayList.add(model);
                      
                    // after adding data to our array list we are passing 
                    // that array list inside our adapter class.
                    adapter = new SliderAdapter(MainActivity.this, sliderDataArrayList);
                      
                    // belows line is for setting adapter
                    // to our slider view
                    sliderView.setSliderAdapter(adapter);
                      
                    // below line is for setting animation to our slider.
                    sliderView.setSliderTransformAnimation(SliderAnimations.SIMPLETRANSFORMATION);
                      
                    // below line is for setting auto cycle duration.
                    sliderView.setAutoCycleDirection(SliderView.AUTO_CYCLE_DIRECTION_BACK_AND_FORTH);
                      
                    // below line is for setting 
                    // scroll time animation
                    sliderView.setScrollTimeInSec(3);
                      
                    // below line is for setting auto
                    // cycle animation to our slider
                    sliderView.setAutoCycle(true);
                      
                    // below line is use to start 
                    // the animation of our slider view.
                    sliderView.startAutoCycle();
                }
            }
        }).addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {
                // if we get any error from Firebase we are 
                // displaying a toast message for failure
                Toast.makeText(MainActivity.this, "Fail to load slider data..", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Paso 9: agregar los datos a nuestra Firebase Firestore Console 

Vaya a Firebase y haga clic en la opción Ir a la consola en la esquina superior derecha. 

Después de hacer clic en esta pantalla, verá la pantalla a continuación con todo su proyecto dentro que selecciona su proyecto.  

Dentro de esa pantalla, haga clic en Firebase Firestore Database en la ventana izquierda.  

Después de hacer clic en la opción Crear base de datos, verá la siguiente pantalla.  

Dentro de esta pantalla, tenemos que seleccionar la opción Iniciar en modo de prueba. Estamos usando el modo de prueba porque no estamos configurando la autenticación dentro de nuestra aplicación. Así que estamos seleccionando Iniciar en modo de prueba. Después de seleccionar el modo de prueba, haga clic en la opción Siguiente y verá la siguiente pantalla.  

Dentro de esta pantalla, solo tenemos que hacer clic en el botón Habilitar para habilitar nuestra base de datos Firebase Firestore. Después de completar este proceso, solo tenemos que agregar datos dentro de nuestra consola Firebase Firestore para agregar imágenes a nuestro control deslizante. Para agregar datos, haga clic en la opción Iniciar recopilación y verá la siguiente pantalla. 

Después de agregar estos datos, haga clic en la opción Siguiente y verá la siguiente pantalla. 

Agregue los datos dentro de nuestra consola Firebase Firestore y haga clic en guardar. Se ha agregado su primera imagen al control deslizante. Del mismo modo, agregue más imágenes haciendo clic en el botón » Agregar documento «. 

Después de agregar estas imágenes, ejecute su aplicación y podrá ver el resultado en la pantalla a continuación. 

Producción: