Auto Image Slider in Android with Example

Auto Image Slider is one of the most seen UI components in Android. This type of slider is mostly seen inside the apps of big E-commerce sites such as Flipkart, Amazon, and many more. Auto Image Slider is used to represent data in the form of slides that change after a specific interval of time. In this article, we will take a look at How to Create Auto Image Slider on Android. We will use the SliderView library to add this type of UI component in our app.  

Note: You may also refer to Image Slider in Android using ViewPager.

Now we will see the Implementation of this SliderView in Android. 

Example

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

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 Slider View in build.gradle file

Navigate to the Gradle scripts and then to build.gradle(Module) level. Add the below line in build.gradle file in the dependencies section.

Step 3: Add internet permission in the AndroidManifest.xml file

Navigate to the app > Manifest to open the Manifest file and add below two lines.

Step 4: Working with the activity_main.xml file

Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file.

Step 5: Create a new Modal class for storing data

Navigate to app > java > your app's package name and then right-click on it and New > Java class and name your Model class as SliderData and below code inside that Java class. Below is the code for the SliderData.java file. Comments are added inside the code to understand the code in more detail.

Step 6: Create an XML file for the items of SliderView 

Navigate to the app > res > layout > Right-click on it and select New > Layout Resource File and then name your XML file as slider_layout.xml. After creating this file add the below code to it.  

Step 7: Create Adapter Class for setting data to each item of our SliderView

Navigate to app > java > your app's package name and then right-click on it and New > Java class and name your class as SliderAdapter and below code inside that Java class. Below is the code for the SliderAdapter.java file. Comments are added inside the code to understand the code in more detail.

Step 8: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. Comments are added inside the code to understand the code in more detail.

Output: 

Check out the project on this link:https://github.com/ChaitanyaMunje/GFGImageSlider