Deslizador de imágenes de Android usando ViewPager en Kotlin

El control deslizante de imágenes se ve en la mayoría de las aplicaciones de comercio electrónico que muestran anuncios en la pantalla de inicio. Este control deslizante muestra los banners publicitarios que los usuarios pueden deslizar para ver los demás. En este artículo, veremos cómo implementar el control deslizante de imágenes usando ViewPager en Android usando Kotlin.

Nota : si desea crear Image Slider en Android usando Java. Deslizador de imágenes en Android usando View Pager

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Cómo crear/iniciar un nuevo proyecto en Android Studio

Paso 2: 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 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"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <!--on below line we are adding view pager -->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/idViewPager"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:layout_margin="10dp" />
  
</RelativeLayout>

Paso 3: crear un archivo de diseño para ImageView en View Pager

Vaya a la aplicación > res > diseño > haga clic con el botón derecho en él > Nuevo > Archivo de recursos de diseño y especifique el nombre como image_slider_item. Agregue el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

<?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">
  
    <!--on below line we are creating an image view-->
    <ImageView
        android:id="@+id/idIVImage"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true" />
  
</RelativeLayout>

Paso 4: Creando una nueva clase java para el adaptador de nuestro ViewPager

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/Kotlin y asígnele el nombre ViewPagerAdapter y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

package com.gtappdevelopers.kotlingfgproject
  
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.RelativeLayout
import androidx.viewpager.widget.PagerAdapter
import java.util.*
  
class ViewPagerAdapter(val context: Context, val imageList: List<Int>) : PagerAdapter() {
    // on below line we are creating a method 
    // as get count to return the size of the list.
    override fun getCount(): Int {
        return imageList.size
    }
  
    // on below line we are returning the object
    override fun isViewFromObject(view: View, `object`: Any): Boolean {
        return view === `object` as RelativeLayout
    }
  
    // on below line we are initializing 
    // our item and inflating our layout file
    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        // on below line we are initializing 
        // our layout inflater.
        val mLayoutInflater =
            context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
          
        // on below line we are inflating our custom 
        // layout file which we have created.
        val itemView: View = mLayoutInflater.inflate(R.layout.image_slider_item, container, false)
          
        // on below line we are initializing 
        // our image view with the id.
        val imageView: ImageView = itemView.findViewById<View>(R.id.idIVImage) as ImageView
          
        // on below line we are setting 
        // image resource for image view.
        imageView.setImageResource(imageList.get(position))
          
        // on the below line we are adding this
        // item view to the container.
        Objects.requireNonNull(container).addView(itemView)
          
        // on below line we are simply 
        // returning our item view.
        return itemView
    }
  
    // on below line we are creating a destroy item method.
    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        // on below line we are removing view
        container.removeView(`object` as RelativeLayout)
    }
}

Paso 5: agregar imágenes a la carpeta dibujable

Seleccione las imágenes que desea agregar, cópielas. Navegue a aplicación> res> dibujable y haga clic derecho sobre él. Simplemente péguelo y agregue todas las imágenes a la carpeta dibujable. 

Paso 6: 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 androidx.viewpager.widget.ViewPager
  
class MainActivity : AppCompatActivity() {
  
    // on below line we are creating variable for view pager, 
    // viewpager adapter and the image list.
    lateinit var viewPager: ViewPager
    lateinit var viewPagerAdapter: ViewPagerAdapter
    lateinit var imageList: List<Int>
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
          
        // initializing variables 
        // of below line with their id.
        viewPager = findViewById(R.id.idViewPager)
          
        // on below line we are initializing 
        // our image list and adding data to it.
        imageList = ArrayList<Int>()
        imageList = imageList + R.drawable.android
        imageList = imageList + R.drawable.c
        imageList = imageList + R.drawable.java
        imageList = imageList + R.drawable.js
        imageList = imageList + R.drawable.python
          
        // on below line we are initializing our view 
        // pager adapter and adding image list to it.
        viewPagerAdapter = ViewPagerAdapter(this@MainActivity, imageList)
          
        // on below line we are setting 
        // adapter to our view pager.
        viewPager.adapter = viewPagerAdapter
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: