Open In App
Related Articles

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

Like Article
Save Article
Report issue

Intro Slider in many apps is mostly used to educate the users about the app, the features of the app, and the services that our app will provide to us. In this article, we will take a look at the implementation of Custom Intro Slider in our app. 

What we are going to build in this article? 

We will be building a simple application in which we will be displaying an intro slider in which we will show slider in our app. This slider contains a simple image and two TextView. 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 Custom Intro Slider of an Android App Sample GIF

Step by Step Implementation of Custom 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: Adding the dependency for Picasso in your build.gradle file

As we will be loading all our images from online sources so we will be using Picasso for loading images from URLs inside our application. So for using the images from the URL we have to add the below dependency in our build.gradle file. 

implementation ‘com.squareup.picasso:picasso:2.71828’

Step 3: Adding permissions for the Internet 

As we will be loading images from the URL, so we have to add permissions for the internet in your AndroidManifest.xml file. For adding permissions. Navigate to the app > AndroidManifest.xml file and add the below permissions. 

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

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 


<?xml version="1.0" encoding="utf-8"?>
    <!--view pager for displaying our slides-->
        android:layout_height="match_parent" />
            android:layout_weight="2" />
        <!--adding linear layout for
            creating dots view-->
            android:orientation="horizontal" />
        <!--button for skipping our intro slider-->
            android:textColor="@color/white" />



Step 5: Creating a layout file for our slider item 


Now we will create an item that we will be displaying in our slider. So for creating a new layout navigate to the app > res > layout > Right-click on it > Click on New > layout resource file and name it as slider_layout and add below code to it. 


<?xml version="1.0" encoding="utf-8"?>
    <!--text view for displaying
        our heading-->
        android:text="Slide 1"
        android:textStyle="bold" />
    <!--Image view for displaying
        our slider image-->
        android:src="@mipmap/ic_launcher" />
    <!--text view for displaying our
        slider description-->
        android:text="C++ data structure and ALgorithm Course"
        android:textSize="15sp" />



Step 6: Creating a Modal class for storing all the data for Slider items


For creating a new Modal 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 SliderModal. After creating this class add the below code to it. 


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;



Step 7: Create an Adapter class for setting data to each view


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



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;
    public int getCount() {
        // inside get count method returning
        // the size of our array list.
        return sliderModalArrayList.size();
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        // inside isViewFromobject method we are
        // returning our Relative layout object.
        return view == (RelativeLayout) object;
    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(;
        TextView titleTV = view.findViewById(;
        TextView headingTV = view.findViewById(;
        RelativeLayout sliderRL = view.findViewById(;
        // setting data to our views.
        SliderModal modal = sliderModalArrayList.get(position);
        // below line is to set background
        // drawable to our each item
        // after setting the data to our views we
        // are adding the view to our container.
        // at last we are
        // returning the view.
        return view;
    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);



Step 8: Creating custom gradient drawable for our background of each slide


Navigate to the app > res > drawable > Right-click on it > New > drawable resource file and name the file as gradient_one and add the below code to it. 



<?xml version="1.0" encoding="utf-8"?>
        android:startColor="#4B6CD6" />




<?xml version="1.0" encoding="utf-8"?>
        android:startColor="#F4C22B" />




<?xml version="1.0" encoding="utf-8"?>
        android:startColor="#FD7B52" />


Step 9: Working with the file

Go to the file and refer to the following code. Below is the code for the file. Comments are added inside the code to understand the code in more detail.


import android.os.Bundle;
import android.text.Html;
import android.widget.LinearLayout;
import android.widget.TextView;
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;
    protected void onCreate(Bundle savedInstanceState) {
        // initializing all our views.
        viewPager = findViewById(;
        dotsLL = findViewById(;
        // 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", "", R.drawable.gradient_one));
        sliderModalArrayList.add(new SliderModal("Slide 2 ", "Slide 2 heading", "", R.drawable.gradient_two));
        sliderModalArrayList.add(new SliderModal("Slide 3 ", "Slide 3 heading", "", 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.
        // 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.
    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.
        // 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);
            // below line is called when the dots are not selected.
        if (dots.length > 0) {
            // this line is called when the dots
            // inside linear layout are selected
    // creating a method for view pager for on page change listener.
    ViewPager.OnPageChangeListener viewListener = new ViewPager.OnPageChangeListener() {
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        public void onPageSelected(int position) {
            // we are calling our dots method to
            // change the position of selected dots.
            addDots(size, position);
        public void onPageScrollStateChanged(int state) {



Now run your app and see the output of the app. Make sure to keep your Internet On. 




Last Updated : 23 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Similar Reads