Android Auto Image Slider with Kotlin
Most e-commerce application uses auto image slider 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
< 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" ?>
< RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
tools:context = ".MainActivity" >
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_marginTop = "50dp"
android:gravity = "center"
android:padding = "8dp"
android:text = "Auto Image Slider"
android:textAlignment = "center"
android:textColor = "@color/purple_200"
android:textSize = "20sp"
android:textStyle = "bold" />
< 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 = "#FFF"
app:sliderScrollTimeInSec = "1" />
</ RelativeLayout >
|
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" ?>
< RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent" >
< ImageView
android:id = "@+id/myimage"
android:layout_width = "400dp"
android:layout_height = "300dp"
android:layout_centerHorizontal = "true"
android:contentDescription = "@string/app_name" />
</ RelativeLayout >
|
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.gtappdevelopers.kotlingfgproject
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(imageUrl: ArrayList<String>) :
SliderViewAdapter<SliderAdapter.SliderViewHolder>() {
var sliderList: ArrayList<String> = imageUrl
override fun getCount(): Int {
return sliderList.size
}
override fun onCreateViewHolder(parent: ViewGroup?): SliderAdapter.SliderViewHolder {
val inflate: View =
LayoutInflater.from(parent!!.context).inflate(R.layout.slider_item, null )
return SliderViewHolder(inflate)
}
override fun onBindViewHolder(viewHolder: SliderAdapter.SliderViewHolder?, position: Int) {
if (viewHolder != null ) {
Glide.with(viewHolder.itemView).load(sliderList.get(position)).fitCenter()
.into(viewHolder.imageView)
}
}
class SliderViewHolder(itemView: View?) : SliderViewAdapter.ViewHolder(itemView) {
var imageView: ImageView = itemView!!.findViewById(R.id.myimage)
}
}
|
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() {
lateinit var imageUrl: ArrayList<String>
lateinit var sliderView: SliderView
lateinit var sliderAdapter: SliderAdapter
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
sliderView = findViewById(R.id.slider)
imageUrl = ArrayList()
imageUrl =
imageUrl =
imageUrl =
sliderAdapter = SliderAdapter( imageUrl)
sliderView.autoCycleDirection = SliderView.LAYOUT_DIRECTION_LTR
sliderView.setSliderAdapter(sliderAdapter)
sliderView.scrollTimeInSec = 3
sliderView.isAutoCycle = true
sliderView.startAutoCycle()
}
}
|
Now run your application to see the output of it.
Output:
Last Updated :
16 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...