Open In App

How to Create a Basic Intro Slider of an Android App?

Improve
Improve
Like Article
Like
Save
Share
Report

When we download any app and use that app for the very first time. Then we will get to see the intro slider inside our app. With the help of this slider, we educate our users on how they can use that app and it tells in detail about the app. In this article, we will take a look at the implementation of Intro Slider inside our app. Now, let’s move towards the implementation of this feature in our app. 

What we are going to build in this article? 

We will be building a simple application in which we will be adding an intro slider that will tell about the different courses which are available on GeeksforGeeks. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Create a Basic Intro Slider of an Android App Sample GIF

Step by Step Implementation of Intro Slider

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add dependency of Intro Slider in build.gradle file.

Navigate to the gradle scripts > build.gradle (app) file and add the below dependency to it in the dependencies section.

implementation ‘com.github.AppIntro:AppIntro:6.0.0’

Now navigate to the Gradle Scripts > build.gradle file of (Project) and add below code inside the repositories section. 

allprojects {

   repositories {

       // add below line in repositories section

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

       google()

       jcenter()

        }

}

Step 3: Create a new Java class that will display the slides for our slider

For creating a new java class navigate to the app > java > your app’s package name > Right-click on it and click on New > Java class and name it as IntroSlider. After creating this class add the below code to it. Comments are added inside the code to understand the code in more detail.

Java




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)));
    }
}


Step 4: Working with the AndroidManifest.xml file 

As we are creating a new activity for displaying our Intro Slider we are adding this activity to your AndroidManifest.xml file. Add the below lines to your AndroidManifest.xml file

<!–adding activity for our intro slider–>

<activity

           android:name=”.IntroSlider”

           android:theme=”@style/Theme.AppCompat.NoActionBar” />

Below is the complete code for the AndroidManifest.xml file.

XML




<?xml version="1.0" encoding="utf-8"?>
    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>


Step 5: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. 

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);
  
    }
}


After adding this code now run your app and see the output of the app. 

Output:



Last Updated : 20 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads