Deslizador automático de imágenes en Android con ejemplo

Auto Image Slider es uno de los componentes de interfaz de usuario más vistos en Android. Este tipo de control deslizante se ve principalmente dentro de las aplicaciones de los grandes sitios de comercio electrónico como Flipkart, Amazon y muchos más. Auto Image Slider se utiliza para representar datos en forma de diapositivas que cambian después de un intervalo de tiempo específico. En este artículo, veremos cómo crear un control deslizante automático de imágenes en Android. Usaremos la biblioteca SliderView para agregar este tipo de componente de interfaz de usuario en nuestra aplicación.  

Nota: También puede consultar Image Slider en Android usando ViewPager .

Ahora veremos la Implementación de este SliderView en Android. 

Ejemplo

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: agregue la dependencia de la Vista deslizante en el archivo build.gradle

Navegue a los scripts de Gradle y luego al nivel build.gradle(Module). Agregue la siguiente línea en el archivo build.gradle en la sección de dependencias.

// vista de control deslizante de orden de dependencia

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

// dependencia para cargar imagen desde url

implementación “com.github.bumptech.glide:glide:4.11.0”

Paso 3: agregue permiso de Internet en el archivo AndroidManifest.xml

Navegue a la aplicación > Manifiesto para abrir el archivo Manifiesto y agregue debajo de dos líneas.

<!–Permiso para internet–>

<usos-permiso android:name=”android.permission.INTERNET” />

<usos-permiso 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"?>
<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"
    tools:context=".MainActivity">
  
    <!--
    slideranimation duration is to set duration for transition between two slides
    sliderautocycledirection is to set animationbetween transition of your slides
    sliderindicator enables is used to display the indicators for slider
    slider indicator gravity is to set gravity for indicator gravity
    slider indicator margin is to set margin for indicator
    slider indicator orientation is used to add orientation for slider
    slider indicator padding is use to add padding to indicator
    slider indicator selected color is use to specify selected color
    and slider indicator unselected color is use to specify the color when the slider is unselected
    slider scroll time in sec is used to specify scrolling time in seconds
    -->
    <com.smarteist.autoimageslider.SliderView
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_centerInParent="true"
        app:sliderAnimationDuration="600"
        app:sliderAutoCycleDirection="back_and_forth"
        app:sliderIndicatorAnimationDuration="600"
        app:sliderIndicatorEnabled="true"
        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" />
  
</RelativeLayout>

Paso 5: Cree una nueva clase Modal para almacenar datos

Navegue a aplicación > java > el nombre del paquete de su aplicación y luego haga clic con el botón derecho en él y Nuevo > Clase Java y nombre su clase Modelo como SliderData y debajo del código dentro de esa clase Java. SliderData.java

public class SliderData {
  
    // image url is used to 
    // store the url of image
    private String imgUrl;
  
    // Constructor method.
    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 XML para los elementos de SliderView 

Vaya a la aplicación > res > diseño > haga clic con el botón derecho en él y seleccione Nuevo > Archivo de recursos de diseño y luego nombre su archivo XML como slider_layout.xml . Después de crear este archivo, agregue el siguiente código.  

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  
    <!--Image we will display is our slider view-->
    <ImageView
        android:id="@+id/myimage"
        android:layout_width="400dp"
        android:layout_height="300dp"
        android:layout_centerHorizontal="true"
        android:contentDescription="@string/app_name" />
  
</RelativeLayout>

Paso 7: Cree una clase de adaptador para configurar datos para cada elemento de nuestro SliderView

Navegue a aplicación > java > el nombre del paquete de su aplicación y luego haga clic con el botón derecho en él y Nuevo > Clase Java y nombre su clase como SliderAdapter y debajo del código dentro de esa clase Java. SliderAdapter.java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
  
import com.bumptech.glide.Glide;
import com.smarteist.autoimageslider.SliderViewAdapter;
  
import java.util.ArrayList;
import java.util.List;
  
public class SliderAdapter extends SliderViewAdapter<SliderAdapter.SliderAdapterViewHolder> {
      
    // list for storing urls of images.
    private final List<SliderData> mSliderItems;
      
    // Constructor
    public SliderAdapter(Context context, ArrayList<SliderData> sliderDataArrayList) {
        this.mSliderItems = sliderDataArrayList;
    }
  
    // We are inflating the slider_layout 
    // inside on Create View Holder method.
    @Override
    public SliderAdapterViewHolder onCreateViewHolder(ViewGroup parent) {
        View inflate = LayoutInflater.from(parent.getContext()).inflate(R.layout.slider_layout, null);
        return new SliderAdapterViewHolder(inflate);
    }
  
    // Inside on bind view holder we will
    // set data to item of Slider View.
    @Override
    public void onBindViewHolder(SliderAdapterViewHolder viewHolder, final int position) {
  
        final SliderData sliderItem = mSliderItems.get(position);
  
        // Glide is use to load image
        // from url in your imageview.
        Glide.with(viewHolder.itemView)
                .load(sliderItem.getImgUrl())
                .fitCenter()
                .into(viewHolder.imageViewBackground);
    }
  
    // this method will return
    // the count of our list.
    @Override
    public int getCount() {
        return mSliderItems.size();
    }
  
    static class SliderAdapterViewHolder extends SliderViewAdapter.ViewHolder {
        // Adapter class for initializing 
        // the views of our slider view.
        View itemView;
        ImageView imageViewBackground;
  
        public SliderAdapterViewHolder(View itemView) {
            super(itemView);
            imageViewBackground = itemView.findViewById(R.id.myimage);
            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 androidx.appcompat.app.AppCompatActivity;
import com.smarteist.autoimageslider.SliderView;
import java.util.ArrayList;
  
public class MainActivity extends AppCompatActivity {
    // Urls of our images.
    String url1 = "https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png";
    String url2 = "https://qphs.fs.quoracdn.net/main-qimg-8e203d34a6a56345f86f1a92570557ba.webp";
    String url3 = "https://bizzbucket.co/wp-content/uploads/2020/08/Life-in-The-Metro-Blog-Title-22.png";
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // we are creating array list for storing our image urls.
        ArrayList<SliderData> sliderDataArrayList = new ArrayList<>();
          
        // initializing the slider view.
        SliderView sliderView = findViewById(R.id.slider);
          
        // adding the urls inside array list
        sliderDataArrayList.add(new SliderData(url1));
        sliderDataArrayList.add(new SliderData(url2));
        sliderDataArrayList.add(new SliderData(url3));
          
        // passing this array list inside our adapter class.
        SliderAdapter adapter = new SliderAdapter(this, sliderDataArrayList);
          
        // below method is used to set auto cycle direction in left to 
        // right direction you can change according to requirement.
        sliderView.setAutoCycleDirection(SliderView.LAYOUT_DIRECTION_LTR);
          
        // below method is used to 
        // setadapter to sliderview.
        sliderView.setSliderAdapter(adapter);
          
        // below method is use to set 
        // scroll time in seconds.
        sliderView.setScrollTimeInSec(3);
          
        // to set it scrollable automatically
        // we use below method.
        sliderView.setAutoCycle(true);
          
        // to start autocycle below method is used.
        sliderView.startAutoCycle();
    }
}

Producción: 

Mira el proyecto en este enlace: https://github.com/ChaitanyaMunje/GFGImageSlider