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 Lazyroar. 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.
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.
