Android Auto Image Slider with Kotlin
Last Updated :
26 Aug, 2024
Most e-commerce application uses auto image sliders to display ads and offers within their application. Auto Image Slider is used to display data in the form of slides. In this article, we will take a look at the Implementation of Auto Image Slider in our Android application using Kotlin. A sample video is given below to get an idea about what we are going to do in this article.
Note: If you are looking to implement Auto Image Slider within your android application in Java. Check out the following article: Auto Image Slider in Android in Java
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.
Step 2: Add dependency of Slider View in build.gradle file
Navigate to the Gradle scripts and then build.gradle(Module) level. Add below line in build.gradle file in the dependencies section.
// dependency for slider view
implementation ‘com.github.smarteist:autoimageslider:1.3.9’
// dependency for loading image from url
implementation “com.github.bumptech.glide:glide:4.11.0”
After adding this dependency sync your project to install it.
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 in the manifest tag.
XML
<!--internet permissions and network state permission-->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
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. Comments are added inside the code to understand the code in more detail.
XML
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="2dp"
app:tabIndicatorFullWidth="true"
app:tabBackground="@color/white"
app:tabIndicatorHeight="2dp"
android:fitsSystemWindows="true"
app:tabMode="fixed"
app:tabIndicatorColor="@color/secondary"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@id/viewPager">
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@+id/tabLayout"
app:layout_constraintBottom_toTopOf="@id/btnSignIn"/>
<Button
android:id="@+id/btnSignIn"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="I have an account"
app:backgroundTint="@color/gray"
android:textSize="16sp"
android:textColor="@color/white"
android:layout_marginHorizontal="30dp"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toTopOf="@id/btn_signup"/>
<Button
android:id="@+id/btn_signup"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="Get started"
app:backgroundTint="@color/white"
android:textSize="16sp"
android:textColor="@color/black"
android:layout_marginHorizontal="30dp"
android:layout_marginBottom="40dp"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Step 5: 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_item.xml. After creating this file add the below code to it.
XML
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="@+id/tvHeading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textSize="22sp"
android:textColor="@color/white"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="@+id/tvSubHeading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="14sp"
app:layout_constraintTop_toBottomOf="@+id/tvHeading"
/>
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:padding="20dp"
android:scaleType="fitXY"
app:layout_constraintTop_toBottomOf="@id/tvSubHeading"
app:layout_constraintBottom_toBottomOf="parent"
android:contentDescription="sliderImage" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 6: Create an 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 > Kotlin class and name your class as SliderAdapter and below code inside that Kotlin class. Below is the code for the SliderAdapter.kt file. Comments are added inside the code to understand the code in more detail.
Kotlin
package com.autoimageslider
import android.content.Context
import android.os.Handler
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.viewpager.widget.PagerAdapter
import androidx.viewpager.widget.ViewPager
class AutoImageSliderAdapter(private val context: Context, private var imageList: List<ItemImageSlider>) : PagerAdapter() {
override fun getCount() =imageList.size
override fun isViewFromObject(view: View, `object`: Any): Boolean {
return view === `object`
}
override fun instantiateItem(container: ViewGroup, position: Int): Any {
val view: View = (context.getSystemService(Context.LAYOUT_INFLATER_SERVICE)
as LayoutInflater).inflate(R.layout.image_slider_item, null)
val ivImages = view.findViewById<ImageView>(R.id.imageView)
val heading=view.findViewById<TextView>(R.id.tvHeading)
val subHeading=view.findViewById<TextView>(R.id.tvSubHeading)
ivImages.setImageResource(imageList[position].image)
heading.text=imageList[position].heading
subHeading.text= imageList[position].subheading
val vp = container as ViewPager
vp.addView(view, 0)
return view
}
}
Step 7: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
Kotlin
package com.gtappdevelopers.kotlingfgproject
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.smarteist.autoimageslider.SliderView
class MainActivity : AppCompatActivity() {
// on below line we are creating a variable
// for our array list for storing our images.
lateinit var imageUrl: ArrayList<String>
// on below line we are creating
// a variable for our slider view.
lateinit var sliderView: SliderView
// on below line we are creating
// a variable for our slider adapter.
lateinit var sliderAdapter: SliderAdapter
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// on below line we are initializing our slier view.
sliderView = findViewById(R.id.slider)
// on below line we are initializing
// our image url array list.
imageUrl = ArrayList()
// on below line we are adding data to our image url array list.
imageUrl =
(imageUrl + "https://practice.geeksforgeeks.org/_next/image?url=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttps%2Fmedia.geeksforgeeks.org%2Fimg-practice%2Fbanner%2Fdsa-self-paced-thumbnail.png&w=1920&q=75") as ArrayList<String>
imageUrl =
(imageUrl + "https://practice.geeksforgeeks.org/_next/image?url=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttps%2Fmedia.geeksforgeeks.org%2Fimg-practice%2Fbanner%2Fdata-science-live-thumbnail.png&w=1920&q=75") as ArrayList<String>
imageUrl =
(imageUrl + "https://practice.geeksforgeeks.org/_next/image?url=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttps%2Fmedia.geeksforgeeks.org%2Fimg-practice%2Fbanner%2Ffull-stack-node-thumbnail.png&w=1920&q=75") as ArrayList<String>
// on below line we are initializing our
// slider adapter and adding our list to it.
sliderAdapter = SliderAdapter( imageUrl)
// on below line we are setting auto cycle direction
// for our slider view from left to right.
sliderView.autoCycleDirection = SliderView.LAYOUT_DIRECTION_LTR
// on below line we are setting adapter for our slider.
sliderView.setSliderAdapter(sliderAdapter)
// on below line we are setting scroll time
// in seconds for our slider view.
sliderView.scrollTimeInSec = 3
// on below line we are setting auto cycle
// to true to auto slide our items.
sliderView.isAutoCycle = true
// on below line we are calling start
// auto cycle to start our cycle.
sliderView.startAutoCycle()
}
}
Now run your application to see the output of it.
Output: