Deslizador automático de imágenes de Android con Kotlin

La mayoría de las aplicaciones de comercio electrónico utilizan el control deslizante automático de imágenes para mostrar anuncios y ofertas dentro de su aplicación. Auto Image Slider se utiliza para mostrar datos en forma de diapositivas. En este artículo, veremos la implementación de Auto Image Slider en nuestra aplicación de Android usando Kotlin. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.

Nota : si está buscando implementar Auto Image Slider dentro de su aplicación de Android en Java. Consulte el siguiente artículo: Auto Image Slider en Android en 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 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.

// dependency for slider view
implementation ‘com.github.smarteist:autoimageslider:1.3.9’

// dependency for loading image from url
implementation “com.github.bumptech.glide:glide:4.11.0”

Después de agregar esta dependencia, sincronice su proyecto para instalarlo. 

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 en la etiqueta del manifiesto.

<!--internet permissions and network state permission-->
<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 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 . Se agregan comentarios dentro del código para comprender el código con más detalle.

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <!--on below line we are creating a new text view-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:padding="8dp"
        android:text="Auto Image Slider"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="20sp"
        android:textStyle="bold" />
 
    <!--
       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 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_item.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 6: cree una clase de adaptador para configurar datos para cada elemento de nuestro SliderView

Vaya a app > java > el nombre del paquete de su aplicación y luego haga clic con el botón derecho en él y New > Kotlin class y nombre su clase como SliderAdapter y debajo del código dentro de esa clase de Kotlin. A continuación se muestra el código del archivo SliderAdapter.kt. Se agregan comentarios dentro del código para comprender el código con más detalle.

package com.gtappdevelopers.kotlingfgproject
 
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
 
// on below line we are creating a class for slider
// adapter and passing our array list to it.
class SliderAdapter(imageUrl: ArrayList<String>) :
    SliderViewAdapter<SliderAdapter.SliderViewHolder>() {
 
    // on below line we are creating a
    // new array list and initializing it.
    var sliderList: ArrayList<String> = imageUrl
 
    // on below line we are calling get method
    override fun getCount(): Int {
        // in this method we are returning
        // the size of our slider list.
        return sliderList.size
    }
 
    // on below line we are calling on create view holder method.
    override fun onCreateViewHolder(parent: ViewGroup?): SliderAdapter.SliderViewHolder {
        // inside this method we are inflating our layout file for our slider view.
        val inflate: View =
            LayoutInflater.from(parent!!.context).inflate(R.layout.slider_item, null)
 
        // on below line we are simply passing
        // the view to our slider view holder.
        return SliderViewHolder(inflate)
    }
 
    // on below line we are calling on bind view holder method to set the data to our image view.
    override fun onBindViewHolder(viewHolder: SliderAdapter.SliderViewHolder?, position: Int) {
 
        // on below line we are checking if the view holder is null or not.
        if (viewHolder != null) {
            // if view holder is not null we are simply
            // loading the image inside our image view using glide library
            Glide.with(viewHolder.itemView).load(sliderList.get(position)).fitCenter()
                .into(viewHolder.imageView)
        }
    }
 
    // on below line we are creating a class for slider view holder.
    class SliderViewHolder(itemView: View?) : SliderViewAdapter.ViewHolder(itemView) {
 
        // on below line we are creating a variable for our
        // image view and initializing it with image id.
        var imageView: ImageView = itemView!!.findViewById(R.id.myimage)
    }
}

Paso 7: 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 androidx.appcompat.app.AppCompatActivity
import com.smarteist.autoimageslider.SliderView
 
class MainActivity : AppCompatActivity() {
 
    // on below line we are creating a variable
    // for our array list for storing our images.
    lateinit var imageUrl: ArrayList<String>
 
    // on below line we are creating
    // a variable for our slider view.
    lateinit var sliderView: SliderView
 
    // on below line we are creating
    // a variable for our slider adapter.
    lateinit var sliderAdapter: SliderAdapter
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        // on below line we are initializing our slier view.
        sliderView = findViewById(R.id.slider)
 
        // on below line we are initializing
        // our image url array list.
        imageUrl = ArrayList()
 
        // on below line we are adding data to our image url array list.
        imageUrl =
            (imageUrl + "https://practice.geeksforgeeks.org/_next/image?url=https%3A%2F%2Fmedia.geeksforgeeks.org%2Fimg-practice%2Fbanner%2Fdsa-self-paced-thumbnail.png&w=1920&q=75") as ArrayList<String>
        imageUrl =
            (imageUrl + "https://practice.geeksforgeeks.org/_next/image?url=https%3A%2F%2Fmedia.geeksforgeeks.org%2Fimg-practice%2Fbanner%2Fdata-science-live-thumbnail.png&w=1920&q=75") as ArrayList<String>
        imageUrl =
            (imageUrl + "https://practice.geeksforgeeks.org/_next/image?url=https%3A%2F%2Fmedia.geeksforgeeks.org%2Fimg-practice%2Fbanner%2Ffull-stack-node-thumbnail.png&w=1920&q=75") as ArrayList<String>
 
        // on below line we are initializing our
        // slider adapter and adding our list to it.
        sliderAdapter = SliderAdapter( imageUrl)
 
        // on below line we are setting auto cycle direction
        // for our slider view from left to right.
        sliderView.autoCycleDirection = SliderView.LAYOUT_DIRECTION_LTR
 
        // on below line we are setting adapter for our slider.
        sliderView.setSliderAdapter(sliderAdapter)
 
        // on below line we are setting scroll time
        // in seconds for our slider view.
        sliderView.scrollTimeInSec = 3
 
        // on below line we are setting auto cycle
        // to true to auto slide our items.
        sliderView.isAutoCycle = true
 
        // on below line we are calling start
        // auto cycle to start our cycle.
        sliderView.startAutoCycle()
 
    }
 
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: