Skip to content
Related Articles

Related Articles

How to Create a Basic Intro Slider of an Android App?
  • Last Updated : 20 Jan, 2021

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<?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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

Output:


Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :