Auto Image Slider in Android with Example

Android Mobile Development Apps/Applications

What is an Auto Image Slider in Android?

In this tutorial, we are going to learn on How to implement an Auto Image Slider in our android application using Kotlin as a programming language.

Auto Image Slider is a UI widget which contains multiple images sliding automatically from left to right or in opposite directions. This type of feature is seen in many ecommerce applications which are used to display different types of banners to the customers using auto image slider widget.

Implementation of Auto Image Slider

We will be creating a simple application in which we will be simply displaying an auto image slider within our application which will contain 3 images in it. We will be loading these images from the internet using image URL and displaying those images within our auto image slider. We will be following a step by step guide to implement a circular fillable loader in an android application.

Step 1 : Creating a new project in Android Studio

Navigate to Android studio as shown in below screen. In the below screen click on New Project to create a new Android Studio Project.

After clicking on New Project you will get to see the below screen.

Inside this screen we have to simply select Empty Activity and click on Next. After clicking on next you will get to see the screen below.

Inside this screen we have to simply specify the project name. Then the package name will be generated automatically.

Note − Make sure to select the Language as Kotlin.

After specifying all the details click on Finish to create a new Android studio project.

Once our project has been created we will get to see 2 files which are open i.e activity_main.xml and MainActivity.kt file.

Step 2 : Adding dependency in build.gradle file to use this library

Navigate to Gradle Scripts>build.gradle file and add the below dependency in dependencies section.

implementation 'com.github.smarteist:autoimageslider:1.3.9'
implementation "com.github.bumptech.glide:glide:4.11.0"

In the dependencies section we will be adding 2 dependencies as shown above. The first dependency is used to create an auto image slider within our application and the second dependency is of Glide which is used to load images from the Internet using image URL.

After adding the above dependency you will get to see the Sync Now option in the top right corner of your IDE. Simply click on it to sync your project and install this dependency within your project.

Step 3 : Working with activity_main.xml

Navigate to activity_main.xml. If this file is not visible. To open this file. In the left pane navigate to app>res>layout>activity_main.xml to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <!-- creating text view for displaying heading-->
   <TextView
      android:id="@+id/idTVHeading"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_above="@id/slider"
      android:layout_margin="20dp"
      android:gravity="center"
      android:text="Auto Image Slider in Android"
      android:textAlignment="center"
      android:textAllCaps="false"
      android:textColor="#FF000000"
      android:textSize="20sp"
      android:textStyle="bold" />

   <!--Creating auto image slider on below line-->
   <com.smarteist.autoimageslider.SliderView
      android:id="@+id/slider"
      android:layout_width="match_parent"
      android:layout_height="150dp"
      android:layout_centerInParent="true"
      app:sliderAnimationDuration="600"
      app:sliderAutoCycleDirection="back_and_forth"
      app:sliderIndicatorAnimationDuration="600"
      app:sliderIndicatorEnabled="true"
      app:sliderIndicatorGravity="center_horizontal|bottom"
      app:sliderIndicatorMargin="15dp"
      app:sliderIndicatorOrientation="horizontal"
      app:sliderIndicatorPadding="3dp"
      app:sliderIndicatorRadius="2dp"
      app:sliderIndicatorSelectedColor="#5A5A5A"
      app:sliderIndicatorUnselectedColor="#BCB8B8"
      app:sliderScrollTimeInSec="1" />

</RelativeLayout>

Explanation − In the above code the root element is a Relative layout in android. This layout is a view group which is used to align all the elements within it relative to each other. We can relatively align all elements within Relative Layout with the help of ids or positions.

Inside this relative layout the first view which we have created is Text View. It is used to display a simple text message. Inside this text view widget we have specified its width as match_parent so that it will take the complete width of the mobile device and height as wrap content to take the text height.We are specifying id for our text view which is a unique identifier for that widget. We can use this id to perform some operations of this text view such as overriding a new text to it. Then we are adding a layout above param to align this text view layout above of our circular fillable loader with the help of circular fillable loader view id. Then we are adding margin for our text view from all sides. After that we are adding a text as a parameter inside which we will be specifying the value which we have to show inside our Text View. After specifying text we are specifying the text alignment. This will align the text inside the text view widget to the center of the widget. Then we are specifying text color as black, text size as 20sp and lastly specifying the text style as bold.

After adding our text view for heading we are creating our slider view for using auto image slider within our android application. Inside this firstly we are specifying the unique id for it, then we are specifying height and width for our widget. After that we are aligning this widget to the center of the screen by calling centerInParent. Then we are specifying the slider animation duration at 600 milliseconds. Then we are setting the auto cycle direction for the slider view as back and forth. After that we are adding slider indicator animation duration also as 600 milliseconds. Then we are calling the slider indicator enabled to true to display our slider indicator. After that we are setting the slider indicator gravity to the center of the slider view. Adding a margin for the slider indicator from all sides. Then we are adding margin for indicators, orientation for indicators as horizontal, padding for indicators and radius for indicators. After that we are setting selected and unselected color for indicators and lastly adding slider scroll time as 1 second.

At last we are adding a closing tag for our Relative Layout as the text view and button is enclosed in our relative layout.

Step 4 : Creating a new layout file for items of slider view

Now we will be creating a new layout file that we will be using for the individual items of the slider view. For creating that file navigate to app>res>layout>Right click on it>New>Layout resource file and specify the file name as slider_item and click on Create to create a new file. After creating that file add below code to it. Comments are added in the code to get to know in detail.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <!--Creating an image view to display in slider view-->
   <ImageView
      android:id="@+id/idIVSliderItem"
      android:layout_width="400dp"
      android:layout_height="300dp"
      android:layout_centerHorizontal="true" />

</RelativeLayout>

Inside this relative layout we are creating an image view which is used to display the images in our auto image slider. For this image view we are specifying the unique id which we will be using to set the image for it. Then we are specifying width and height for our image view. After that we are adding layout center horizontal to true to align our image view center horizontal to the screen.

At last we are adding a closing tag for our Relative Layout as the text view and button is enclosed in our relative layout.

Step 5 : Creating an Adapter class for setting the data to items of Slider View

Adapter class is used to set the data to each item of Slider View. Inside this class we will be specifying which layout file we have to display for the items of slider view. Then we will be initializing items of that layout file and setting data to that layout file such as in the current case we will be updating the image.

Now to create the adapter class. Navigate to app>java>your app’s package name>Right click on it>New>Java/Kotlin class and name the file as SliderAdapter and add below code to it. Comments are added in the code to get to know in detail.

package com.gtappdevelopers.androidapplication

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import com.bumptech.glide.Glide
import com.smarteist.autoimageslider.SliderViewAdapter


class SliderAdapter(private val sliderList: List<String>) :
   SliderViewAdapter<SliderAdapter.SliderViewHolder>() {
  
   // creating  a class for slider view holder
   class SliderViewHolder(ItemView: View) : SliderViewAdapter.ViewHolder(ItemView) {
      // on below line creating and initializing variable for slider image view with unique id.
      val sliderIV: ImageView = itemView.findViewById(R.id.idIVSliderItem)
   }

  
   // below method is use to return the count for the size of slider list
   override fun getCount(): Int {
      return sliderList.size
   }

   override fun onCreateViewHolder(parent: ViewGroup?): SliderAdapter.SliderViewHolder {
      // on below line we are creating a variable to inflate the layout file which we have created.
      val itemView: View =
         LayoutInflater.from(parent!!.context).inflate(R.layout.slider_item, null)
      // on below line we are passing that view to view holder class.
      return SliderViewHolder(itemView)
   }

   override fun onBindViewHolder(viewHolder: SliderAdapter.SliderViewHolder?, position: Int) {
      // on below line we are loading an image from image url using Glide library and displaying that image in
      // our slider image view
      Glide.with(viewHolder!!.itemView).load(sliderList.get(position)).fitCenter()
         .into(viewHolder.sliderIV)
   }
}

Explanation − In the above code we are creating an adapter class by specifying the class name as SliderAdapter and we are extending the class with SliderViewAdapter to get the properties of that class. Along with that we are passing the list of string as a parameter to our class.

After that we have to create an inner class named as Slider View Holder which will hold items of Slider View. Inside this class we will be creating a variable for image view which we have created in our slider_item.xml file. We will be initializing this variable with the id which we have specified in our slider_item.xml file.

After that we have to override the default methods of SliderViewAdapter class which are generated as below −

getCount() − In this method we have to return the size of the list of data which we have to display inside our slider view. For our slider view we are displaying the images from the list so we will be returning the size of the list to return the size of our list to get the item count.
onCreateViewHolder() − In this method we will be inflating the layout file which we have to display for the items of the slider view. We will be inflating the layout file which we have named as slider_item and passing this item view to our slider view holder to initialize the views within this layout file.
onBindViewHolder() − In this method we will be setting the data for the image view which we have created in our slider_item.xml file. We will be using the Glide library to load images from the URL within this image view. We are getting this image URL from the array list which we are getting from the variable named as sliderList. We are loading images from that image URL inside our image view of each item of slider view.

Step 6 : Adding internet permissions in AndroidManifest.xml file

As we are loading images from the internet using image URLs we have to add internet permissions within our android application to access the internet to load this images. So we have to add internet permission. For adding internet permissions. Navigate to app>AndroidManifest.xml file and add below permission to it above the application tag.

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

Step 7 : Working with MainActivity.kt

Navigate to MainActivity.kt. If this file is not visible. To open this file. In the left pane navigate to app>java>your app’s package name>MainActivity.kt to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

package com.gtappdevelopers.androidapplication

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.smarteist.autoimageslider.SliderView
import java.util.*
class MainActivity : AppCompatActivity() {
   // creating variable for slider view
   lateinit var sliderView: SliderView
   // on below line creating variables for image urls.
   var url1 =
      "https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-program/img/3bbebda874e6003b_960.png"
   var url2 =
      "https://lh3.googleusercontent.com/GTmuiIZrppouc6hhdWiocybtRx1Tpbl52eYw4l-nAqHtHd4BpSMEqe-vGv7ZFiaHhG_l4v2m5Fdhapxw9aFLf28ErztHEv5WYIz5fA"
   var url3 =
      "https://www.tutorialspoint.com/images/logo.png"

   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
      // on below line initializing variables for auto image slider.
      sliderView = findViewById(R.id.slider)
      // on below line creating variable for array list.
      val sliderDataArrayList: ArrayList<String> = ArrayList()
      // on below line adding urls in slider list.
      sliderDataArrayList.add(url1)
      sliderDataArrayList.add(url2)
      sliderDataArrayList.add(url3)
      // on below line initializing our adapter class by passing our list to it.
      val adapter = SliderAdapter(sliderDataArrayList)
      // on below line setting auto cycle direction for slider view from left to right.
      sliderView.setAutoCycleDirection(SliderView.LAYOUT_DIRECTION_LTR);
      // on below line setting adapter for slider view.
      sliderView.setSliderAdapter(adapter);
      // on below line setting scroll time for slider view
      sliderView.setScrollTimeInSec(3);
      // on below line setting auto cycle for slider view.
      sliderView.setAutoCycle(true);
      // on below line setting start cycle for slider view.
      sliderView.startAutoCycle();
   }
}

Explanation − In the above code for the MainActivity.kt file. Firstly we are creating a variable for slider view and then we are creating a variable for image urls named as url1,url2,url3 and initializing these variables with the image URLs which we have to display within our auto image slider.

Now we will get to see the onCreate method. This is the default method of every android application. This method is called when the application view is created. Inside this method we are setting the content view i.e the layout file named activity_main.xml to set the UI from that file.

After specifying the view we are initializing our slider view with its unique id which we have given in the activity_main.xml file.

After initializing the slider view we are creating an array list and initializing it. Then we are adding data to it as url1,url2 and url3 to it. After that we are initializing our adapter class and passing our slider array list to it. After that we are setting the slider view auto cycle direction from left to right so that images within the slider can move from left to right in the slider view. Then we are setting the adapter for our slider view which we have created above named as adapter. Then we are setting scroll time for items of slider view as 3 seconds. Then setting the auto cycle for the slider view as true. Lastly we are starting the slider view cycle.

After adding the above code now we have to simply click on the green icon in the top bar to run our application on a mobile device.

Note : Make sure you are connected to your real device or emulator.

Conclusion

In the above tutorial we learn What is auto image slider and How we can implement auto image slider within our android application to display images within it.

Vaibhav Ahire

Updated on: 14-Mar-2023

10K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started