¿Cómo crear un control deslizante de introducción básico de una aplicación de Android?

Cuando descargamos cualquier aplicación y la usamos por primera vez. Luego veremos el control deslizante de introducción dentro de nuestra aplicación. Con la ayuda de este control deslizante, educamos a nuestros usuarios sobre cómo pueden usar esa aplicación y les informa en detalle sobre la aplicación. En este artículo, veremos la implementación de Intro Slider dentro de nuestra aplicación. Ahora, avancemos hacia la implementación de esta función en nuestra aplicación. 

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

Construiremos una aplicación simple en la que agregaremos un control deslizante de introducción que informará sobre los diferentes cursos que están disponibles en GeeksforGeeks . qué

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

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 Intro Slider en el archivo build.gradle.

Navegue hasta el archivo gradle scripts > build.gradle (app) y agregue la dependencia a continuación en la sección de dependencias.

implementación ‘com.github.AppIntro:AppIntro:6.0.0’

Ahora navegue hasta el archivo Gradle Scripts > build.gradle de (Proyecto) y agregue el siguiente código dentro de la sección de repositorios. 

todos los proyectos {

   repositorios {

       // agregar debajo de la línea en la sección de repositorios

       experto {url ‘https://jitpack.io’}

       Google()

       jcenter()

        }

}

Paso 3: Cree una nueva clase de Java que mostrará las diapositivas de nuestro control deslizante

Para crear una nueva clase Java, 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 IntroSlider . Después de crear esta clase, agregue el siguiente código. Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
  
import androidx.core.content.ContextCompat;
  
import com.github.appintro.AppIntro;
import com.github.appintro.AppIntroFragment;
  
public class IntroSlider extends AppIntro {
  
    // we are calling on create method
    // to generate the view for our java file.
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
  
        // below line is for adding the new slide to our app.
        // we are creating a new instance and inside that
        // we are adding the title, description, image and 
        // background color for our slide.
        // below line is use for creating first slide
        addSlide(AppIntroFragment.newInstance("C++", "C++ Self Paced Course",
                R.drawable.gfgimage, ContextCompat.getColor(getApplicationContext(), R.color.purple_200)));
  
        // below line is for creating second slide.
        addSlide(AppIntroFragment.newInstance("DSA", "Data Structures and Algorithms", R.drawable.gfgimage,
                ContextCompat.getColor(getApplicationContext(), R.color.purple_200)));
  
        // below line is use to create third slide.
        addSlide(AppIntroFragment.newInstance("Java", "Java Self Paced Course", R.drawable.gfgimage,
                ContextCompat.getColor(getApplicationContext(), R.color.purple_200)));
    }
}

Paso 4: Trabajar con el archivo AndroidManifest.xml 

Como estamos creando una nueva actividad para mostrar nuestro Control deslizante de introducción, estamos agregando esta actividad a su archivo AndroidManifest.xml . Agregue las siguientes líneas a su archivo AndroidManifest.xml

<!–agregando actividad para nuestro control deslizante de introducción–>

<actividad

           android:nombre=”.IntroSlider”

           android:tema=”@estilo/Tema.AppCompat.NoActionBar” />

A continuación se muestra el código completo del archivo AndroidManifest.xml .

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.gtappdevelopers.firebaseapp">
  
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.FirebaseApp">
        
        <!--adding activity for our intro slider-->
        <activity
            android:name=".IntroSlider"
            android:theme="@style/Theme.AppCompat.NoActionBar" />
        
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
  
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
  
</manifest>

Paso 5: 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 . 

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
  
import android.content.Intent;
import android.os.Bundle;
import android.widget.GridView;
import android.widget.Toast;
  
import java.util.ArrayList;
import java.util.List;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        Intent i =new Intent(getApplicationContext(),IntroSlider.class);
        startActivity(i);
  
    }
}

Después de agregar este código, ejecute su aplicación y vea el resultado de la aplicación. 

Producción: