Cree un control deslizante de introducción personalizado de una aplicación de Android con Kotlin

IntroSlider se ve en muchas aplicaciones de Android para mostrar la introducción de las diferentes pantallas dentro de nuestra aplicación. Este control deslizante de introducción mostrará información sobre diferentes funciones dentro de la aplicación de Android. En este artículo, veremos cómo crear un control deslizante de introducción personalizado en una 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 Custom Intro Slider en su aplicación de Android usando Java. Consulte el siguiente artículo: Cómo crear un control deslizante de introducción personalizado de una aplicación de Android usando 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: 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:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <!--view pager for displaying our slides-->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/idViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
    <!--on below line we are creating
         a simple linear layout-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@android:color/transparent"
        android:orientation="horizontal"
        android:weightSum="5">
 
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="2" />
 
        <!--adding linear layout for
            creating dots view-->
        <LinearLayout
            android:id="@+id/idLLDots"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            android:weightSum="3">
 
            <!--on below line we are creating a text view
                 for displaying our dots-->
            <TextView
                android:id="@+id/idTVSlideOne"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:text="•"
                android:textAlignment="center"
                android:textColor="@color/white"
                android:textSize="40sp"
                android:textStyle="bold" />
 
            <!--on below line we are creating a text view
                 for displaying our dots-->
            <TextView
                android:id="@+id/idTVSlideTwo"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:text="•"
                android:textAlignment="center"
                android:textColor="@color/grey"
                android:textSize="40sp"
                android:textStyle="bold" />
 
            <!--on below line we are creating a text view
                for displaying our dots-->
            <TextView
                android:id="@+id/idTVSlideThree"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:text="•"
                android:textAlignment="center"
                android:textColor="@color/grey"
                android:textSize="40sp"
                android:textStyle="bold" />
 
        </LinearLayout>
 
        <!--button for skipping our intro slider-->
        <Button
            android:id="@+id/idBtnSkip"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="2"
            android:backgroundTint="@color/button_color"
            android:padding="4dp"
            android:text="Skip"
            android:textAllCaps="false"
            android:textColor="@color/white" />
 
    </LinearLayout>
   
</RelativeLayout>

Paso 3: Actualización de colores en el archivo color.xml

Vaya a aplicación > res > valores > colores.xml y agregue el siguiente código para actualizar el color dentro de nuestra aplicación. 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#0F9D58</color>
    <color name="purple_500">#0F9D58</color>
    <color name="purple_700">#0F9D58</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="grey">#aaa</color>
    <color name="button_color">#1E573B</color>
</resources>

Paso 4: crear un archivo de diseño para slider_item

Vaya a la aplicación > res > diseño > haga clic con el botón derecho en él > Nuevo > Archivo de recursos de diseño. Nómbrelo como slider_item y agréguele 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:id="@+id/idRLSlider"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/purple_200">
 
    <!--text view for displaying
        our heading-->
    <TextView
        android:id="@+id/idTVSliderTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="Slide 1"
        android:textAlignment="center"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:textStyle="bold" />
 
    <!--Image view for displaying
        our slider image-->
    <ImageView
        android:id="@+id/idIVSlider"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_below="@id/idTVSliderTitle"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:padding="10dp"
        android:src="@mipmap/ic_launcher" />
 
    <!--text view for displaying our
        slider description-->
    <TextView
        android:id="@+id/idTVSliderDescription"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idIVSlider"
        android:layout_marginStart="20dp"
        android:layout_marginTop="60dp"
        android:layout_marginEnd="20dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="C++ data structure and ALgorithm Course"
        android:textAlignment="center"
        android:textColor="@color/white"
        android:textSize="15sp" />
   
</RelativeLayout>

Paso 5: Crear una clase modal para almacenar nuestros datos

Vaya a aplicación > java > nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Kotlin y asígnele el nombre SliderData. Agregue el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

package com.gtappdevelopers.kotlingfgproject
 
data class SliderData(
    // on below line we are creating a string
    // for our slide title, slide
    // description and image.
    var slideTitle: String,
    var slideDescription: String,
    var slideImage: Int
)

Paso 6: crear una clase de adaptador para configurar datos en cada elemento de nuestro control deslizante

Vaya a aplicación > java > nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Kotlin y nombre el archivo como SliderAdapter 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 android.widget.TextView
import androidx.viewpager.widget.PagerAdapter
 
class SliderAdapter(
    val context: Context,
    val sliderList: ArrayList<SliderData>
) : PagerAdapter() {
 
    override fun getCount(): Int {
        // on below line we are returning
        // the size of slider list
        return sliderList.size
    }
 
    override fun isViewFromObject(view: View, `object`: Any): Boolean {
        // inside isViewFromobject method we are
        // returning our Relative layout object.
        // inside isViewFromobject method we are
        // returning our Relative layout object.
        return view === `object` as RelativeLayout
    }
 
    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        // in this method we will initialize all our layout
        // items and inflate our layout file as well.
        // in this method we will initialize all our layout
        // items and inflate our layout file as well.
        val layoutInflater: LayoutInflater =
            context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
 
        // below line is use to inflate the
        // layout file which we created.
 
        // below line is use to inflate the
        // layout file which we created.
        val view: View = layoutInflater.inflate(R.layout.slider_item, container, false)
 
        // on below line we are initializing our image view,
        // heading text view and description text view with their ids.
        val imageView: ImageView = view.findViewById(R.id.idIVSlider)
        val sliderHeadingTV: TextView = view.findViewById(R.id.idTVSliderTitle)
        val sliderDescTV: TextView = view.findViewById(R.id.idTVSliderDescription)
 
        // on below line we are setting data to our text view
        // and image view on below line.
        val sliderData: SliderData = sliderList.get(position)
        sliderHeadingTV.text = sliderData.slideTitle
        sliderDescTV.text = sliderData.slideDescription
        imageView.setImageResource(sliderData.slideImage)
         
        // on below line we are adding our view to container.
        container.addView(view)
 
        // on below line we are returning our view.
        return view
    }
 
    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        // this is a destroy view method
        // which is use to remove a view.
        // this is a destroy view method
        // which is use to remove a view.
        container.removeView(`object` as RelativeLayout)
    }
 
}

Paso 7: Crear una nueva actividad para nuestra pantalla de inicio

Vaya a aplicación > java > nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nueva actividad vacía y nombre su actividad como MainActivity2. Después de crear esta actividad. Usaremos esta actividad para mostrar un mensaje de vista de texto simple que se llamará cuando un usuario haga clic en el botón de omisión. 

Paso 8: 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.content.Intent
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.viewpager.widget.ViewPager
 
class MainActivity : AppCompatActivity() {
 
    // on below line we are creating a
    // variable for our view pager
    lateinit var viewPager: ViewPager
 
    // on below line we are creating a variable
    // for our slider adapter and slider list
    lateinit var sliderAdapter: SliderAdapter
    lateinit var sliderList: ArrayList<SliderData>
 
    // on below line we are creating a variable for our
    // skip button, slider indicator text view for 3 dots
    lateinit var skipBtn: Button
    lateinit var indicatorSlideOneTV: TextView
    lateinit var indicatorSlideTwoTV: TextView
    lateinit var indicatorSlideThreeTV: TextView
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // on below line we are initializing all
        // our variables with their ids.
        viewPager = findViewById(R.id.idViewPager)
        skipBtn = findViewById(R.id.idBtnSkip)
        indicatorSlideOneTV = findViewById(R.id.idTVSlideOne)
        indicatorSlideTwoTV = findViewById(R.id.idTVSlideTwo)
        indicatorSlideThreeTV = findViewById(R.id.idTVSlideThree)
 
        // on below line we are adding click listener for our skip button
        skipBtn.setOnClickListener {
            // on below line we are opening a new activity
            val i = Intent(this@MainActivity, MainActivity2::class.java)
            startActivity(i)
        }
 
        // on below line we are initializing our slider list.
        sliderList = ArrayList()
 
        // on below line we are adding data to our list
        sliderList.add(
            SliderData(
                "Python",
                "Python Development Course",
                R.drawable.python
            )
        )
 
        sliderList.add(
            SliderData(
                "Java",
                "Java Development Course",
                R.drawable.java
            )
        )
 
        sliderList.add(
            SliderData(
                "C++",
                "C++ Development Course",
                R.drawable.c
            )
        )
 
        // on below line we are adding slider list
        // to our adapter class.
        sliderAdapter = SliderAdapter(this, sliderList)
 
        // on below line we are setting adapter
        // for our view pager on below line.
        viewPager.adapter = sliderAdapter
 
        // on below line we are adding page change
        // listener for our view pager.
        viewPager.addOnPageChangeListener(viewListener)
 
    }
 
    // creating a method for view pager for on page change listener.
    var viewListener: ViewPager.OnPageChangeListener = object : ViewPager.OnPageChangeListener {
        override fun onPageScrolled(
            position: Int,
            positionOffset: Float,
            positionOffsetPixels: Int
        ) {
        }
 
        override fun onPageSelected(position: Int) {
            // we are calling our dots method to
            // change the position of selected dots.
 
            // on below line we are checking position and updating text view text color.
            if (position == 0) {
                indicatorSlideTwoTV.setTextColor(resources.getColor(R.color.grey))
                indicatorSlideThreeTV.setTextColor(resources.getColor(R.color.grey))
                indicatorSlideOneTV.setTextColor(resources.getColor(R.color.white))
 
            } else if (position == 1) {
                indicatorSlideTwoTV.setTextColor(resources.getColor(R.color.white))
                indicatorSlideThreeTV.setTextColor(resources.getColor(R.color.grey))
                indicatorSlideOneTV.setTextColor(resources.getColor(R.color.grey))
            } else {
                indicatorSlideTwoTV.setTextColor(resources.getColor(R.color.grey))
                indicatorSlideThreeTV.setTextColor(resources.getColor(R.color.white))
                indicatorSlideOneTV.setTextColor(resources.getColor(R.color.grey))
            }
        }
 
        // below method is use to check scroll state.
        override fun onPageScrollStateChanged(state: Int) {}
    }
}

Paso 9: trabajar con el archivo activity_main2.xml

Vaya a app > res > layout > activity_main2.xml y agréguele 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity2">
 
    <!--on below line we are creating a
         simple text view for heading-->
    <TextView
        android:id="@+id/idTVHead"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginStart="20dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="20dp"
        android:gravity="center"
        android:padding="8dp"
        android:text="Welcome to\n Geeks for Geeks"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="20sp"
        android:textStyle="bold" />
 
</RelativeLayout>

Ahora ejecute su aplicación para ver el resultado. 

Producción: