¿Cómo crear un control deslizante de introducción personalizado de una aplicación de Android?

Intro Slider en muchas aplicaciones se usa principalmente para educar a los usuarios sobre la aplicación, las características de la aplicación y los servicios que nuestra aplicación nos brindará. En este artículo, veremos la implementación de Custom Intro Slider en nuestra aplicación. 

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

Construiremos una aplicación simple en la que mostraremos un control deslizante de introducción en el que mostraremos el control deslizante en nuestra aplicación. Este control deslizante contiene una imagen simple y dos TextView . qué

Implementación paso a paso del control deslizante de introducción personalizado

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: agregar la dependencia de Picasso en su archivo build.gradle

Como cargaremos todas nuestras imágenes desde fuentes en línea, usaremos Picasso para cargar imágenes desde URL dentro de nuestra aplicación. Entonces, para usar las imágenes de la URL, debemos agregar la dependencia a continuación en nuestro archivo build.gradle . 

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

Paso 3: Agregar permisos para Internet 

Como cargaremos imágenes desde la URL, debemos agregar permisos para Internet en su archivo AndroidManifest.xml . Para agregar permisos. Navegue a la aplicación > archivo AndroidManifest.xml y agregue los siguientes permisos. 

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

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 .

<?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"
    android:weightSum="5"
    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" />
 
    <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" />
 
        <!--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:background="@color/purple_500"
            android:backgroundTint="@color/purple_500"
            android:text="Skip"
            android:textAllCaps="false"
            android:textColor="@color/white" />
 
    </LinearLayout>
     
</RelativeLayout>

Paso 5: crear un archivo de diseño para nuestro elemento deslizante 

Ahora crearemos un elemento que mostraremos en nuestro control deslizante. Entonces, para crear un nuevo diseño, navegue a la aplicación> res> diseño> Haga clic con el botón derecho en él> Haga clic en Nuevo> archivo de recursos de diseño y asígnele el nombre slider_layout y agregue el código a continuación. 

<?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">
 
    <!--text view for displaying
        our heading-->
    <TextView
        android:id="@+id/idTVtitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        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/idIV"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_below="@id/idTVtitle"
        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/idTVheading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idIV"
        android:layout_marginStart="20dp"
        android:layout_marginTop="90dp"
        android:layout_marginEnd="20dp"
        android:padding="10dp"
        android:text="C++ data structure and ALgorithm Course"
        android:textAlignment="center"
        android:textColor="@color/white"
        android:textSize="15sp" />
 
</RelativeLayout>

Paso 6: crear una clase modal para almacenar todos los datos de los elementos del control deslizante

Para crear una nueva clase Modal, vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él y haga clic en Nuevo > Clase Java y asígnele el nombre SliderModal . Después de crear esta clase, agregue el siguiente código. 

public class SliderModal {
 
    // string variable for storing
    // title, image url and description.
    private String title;
    private String heading;
    private String imgUrl;
    private int backgroundDrawable;
 
    public SliderModal() {
        // empty constructor is required
        // when using firebase
    }
 
    // creating getter methods.
    public String getTitle() {
        return title;
    }
 
    public void setTitle(String title) {
        this.title = title;
    }
 
    public String getHeading() {
        return heading;
    }
 
    // creating setter methods
    public void setHeading(String heading) {
        this.heading = heading;
    }
 
    public String getImgUrl() {
        return imgUrl;
    }
 
    public void setImgUrl(String imgUrl) {
        this.imgUrl = imgUrl;
    }
     
    // constructor for our modal class
    public SliderModal(String title, String heading, String imgUrl, int backgroundDrawable) {
        this.title = title;
        this.heading = heading;
        this.imgUrl = imgUrl;
        this.backgroundDrawable = backgroundDrawable;
    }
 
    public int getBackgroundDrawable() {
        return backgroundDrawable;
    }
 
    public void setBackgroundDrawable(int backgroundDrawable) {
        this.backgroundDrawable = backgroundDrawable;
    }
}

Paso 7: cree una clase de adaptador para configurar datos en cada vista

Para crear una nueva 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 > Nueva clase de Java y asígnele el nombre SliderAdapter y agréguele el siguiente código. Se agregan comentarios dentro del código para comprender el código con más detalle.

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.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
 
import com.squareup.picasso.Picasso;
 
import java.util.ArrayList;
 
public class SliderAdapter extends PagerAdapter {
 
    // creating variables for layout
    // inflater, context and array list.
    LayoutInflater layoutInflater;
    Context context;
    ArrayList<SliderModal> sliderModalArrayList;
 
    // creating constructor.
    public SliderAdapter(Context context, ArrayList<SliderModal> sliderModalArrayList) {
        this.context = context;
        this.sliderModalArrayList = sliderModalArrayList;
    }
 
    @Override
    public int getCount() {
        // inside get count method returning
        // the size of our array list.
        return sliderModalArrayList.size();
    }
     
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        // inside isViewFrombject method we are
        // returning our Relative layout object.
        return view == (RelativeLayout) object;
    }
 
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
         
        // in this method we will initialize all our layout
        // items and inflate our layout file as well.
        layoutInflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
         
        // below line is use to inflate the
        // layout file which we created.
        View view = layoutInflater.inflate(R.layout.slider_layout, container, false);
         
        // initializing our views.
        ImageView imageView = view.findViewById(R.id.idIV);
        TextView titleTV = view.findViewById(R.id.idTVtitle);
        TextView headingTV = view.findViewById(R.id.idTVheading);
        RelativeLayout sliderRL = view.findViewById(R.id.idRLSlider);
 
        // setting data to our views.
        SliderModal modal = sliderModalArrayList.get(position);
        titleTV.setText(modal.getTitle());
        headingTV.setText(modal.getHeading());
        Picasso.get().load(modal.getImgUrl()).into(imageView);
         
        // below line is to set background
        // drawable to our each item
        sliderRL.setBackground(context.getResources().getDrawable(modal.getBackgroundDrawable()));
 
        // after setting the data to our views we
        // are adding the view to our container.
        container.addView(view);
         
        // at last we are
        // returning the view.
        return view;
    }
 
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        // this is a destroy view method
        // which is use to remove a view.
        container.removeView((RelativeLayout) object);
    }
}

Paso 8: crear un degradado personalizado dibujable para nuestro fondo de cada diapositiva

Navegue a la aplicación> res> dibujable> Haga clic con el botón derecho en él> Nuevo> archivo de recurso dibujable y nombre el archivo como gradiente_uno y agregue el código a continuación. 
 

gradiente_uno.xml  

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:endColor="@color/purple_500"
        android:startColor="#4B6CD6" />
</shape>

gradiente_dos.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:endColor="#FF9800"
        android:startColor="#F4C22B" />
</shape>

gradiente_tres.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:endColor="#F44336"
        android:startColor="#FD7B52" />
</shape>

Paso 9: 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.text.Html;
import android.widget.LinearLayout;
import android.widget.TextView;
 
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
 
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity {
 
    // creating variables for view pager,
    // liner layout, adapter and our array list.
    private ViewPager viewPager;
    private LinearLayout dotsLL;
    SliderAdapter adapter;
    private ArrayList<SliderModal> sliderModalArrayList;
    private TextView[] dots;
    int size;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        // initializing all our views.
        viewPager = findViewById(R.id.idViewPager);
        dotsLL = findViewById(R.id.idLLDots);
         
        // in below line we are creating a new array list.
        sliderModalArrayList = new ArrayList<>();
         
        // on below 3 lines we are adding data to our array list.
        sliderModalArrayList.add(new SliderModal("Slide 1 ", "Slide 1 heading", "https://images.unsplash.com/photo-1610842546881-b282c580b51d?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", R.drawable.gradient_one));
        sliderModalArrayList.add(new SliderModal("Slide 2 ", "Slide 2 heading", "https://images.unsplash.com/photo-1610783131813-475d08664ef6?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", R.drawable.gradient_two));
        sliderModalArrayList.add(new SliderModal("Slide 3 ", "Slide 3 heading", "https://images.unsplash.com/photo-1610832958506-aa56368176cf?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxN3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", R.drawable.gradient_three));
 
        // below line is use to add our array list to adapter class.
        adapter = new SliderAdapter(MainActivity.this, sliderModalArrayList);
         
        // below line is use to set our
        // adapter to our view pager.
        viewPager.setAdapter(adapter);
         
        // we are storing the size of our
        // array list in a variable.
        size = sliderModalArrayList.size();
         
        // calling method to add dots indicator
        addDots(size, 0);
         
        // below line is use to call on
        // page change listener method.
        viewPager.addOnPageChangeListener(viewListner);
    }
 
    private void addDots(int size, int pos) {
        // inside this method we are
        // creating a new text view.
        dots = new TextView[size];
        
        // below line is use to remove all
        // the views from the linear layout.
        dotsLL.removeAllViews();
         
        // running a for loop to add
        // number of dots to our slider.
        for (int i = 0; i < size; i++) {
            // below line is use to add the
            // dots and modify its color.
            dots[i] = new TextView(this);
            dots[i].setText(Html.fromHtml("•"));
            dots[i].setTextSize(35);
             
            // below line is called when the dots are not selected.
            dots[i].setTextColor(getResources().getColor(R.color.black));
            dotsLL.addView(dots[i]);
        }
        if (dots.length > 0) {
            // this line is called when the dots
            // inside linear layout are selected
            dots[pos].setTextColor(getResources().getColor(R.color.purple_200));
        }
    }
 
    // creating a method for view pager for on page change listener.
    ViewPager.OnPageChangeListener viewListner = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 
        }
 
        @Override
        public void onPageSelected(int position) {
            // we are calling our dots method to
            // change the position of selected dots.
            addDots(size, position);
        }
 
        @Override
        public void onPageScrollStateChanged(int state) {
 
        }
    };
}

Ahora ejecute su aplicación y vea el resultado de la aplicación. Asegúrese de mantener su Internet encendido. 

Producción: