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%2Fround-lake.dustinice.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%2Fround-lake.dustinice.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%2Fround-lake.dustinice.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:
Similar Reads
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
6 min read
Slide Animation in Android with Kotlin
Animations in Android allow UI elements to perform aesthetic moves across the screen. Animations can be implemented from a third party as well as developed from scratch. Despite the source, animations can be applied to any kind of view or UI element. Typically, we have demonstrated a slide animation
3 min read
Image Switcher in Android with Example
Sometimes, you may not want an image to appear suddenly on the screen. Instead, you might prefer a smooth transition from one image to another using animation. Android offers a tool called ImageSwitcher to help with this. An ImageSwitcher lets you add simple transition effects to your images.What ar
4 min read
Android - Create a Pie Chart with Kotlin
A Pie Chart is a circular type of UI interface which is used to display the data in the form of percentages for different categories. This is used to display a vast amount of data. In this article, we will take a look at building a pie chart in an Android application using Kotlin. A sample video is
5 min read
Android Slide Up/Down in Kotlin
In Android Animations are the visuals that are added to make the user interface more interactive, clear and good looking. In this article we will be discussing how to create a Slide Up/Down animation in Kotlin. XML Attributes Description android:duration It is used to specify the duration of animati
3 min read
ViewFlipper in Android with Kotlin
View Flipper is a UI component in Android which is used to flip the view within the screen in the android application. The View Flipper class is an extension of ViewAnimator class. With the help of this, we can simply flip the views. In this article, we will take a look at How we can use ViewFlipper
4 min read
Create Custom Intro Slider of an Android App with Kotlin
IntroSlider is seen in many android applications to display the introduction of the different screens within our application. This intro slider will display information about different features within the android application. In this article, we will take a look at How to Create a Custom Intro Slide
8 min read
Spinner in Android with Example
Android Spinner is a view similar to the dropdown list which is used to select one option from the list of options. It provides an easy way to select one item from the list of items and it shows a dropdown list of all values when we click on it. The default value of the android spinner will be the c
4 min read
Android Image Slider using ViewPager in Kotlin
Image slider is seen in most e-commerce applications that display advertisements on the home screen. This slider displays the advertisement banners which users can slide to view the others. In this article, we will take a look at Implementing the image slider using ViewPager in Android using Kotlin.
5 min read
SlidingDrawer in Android with Example
SlidingDrawer is a common requirement in android mobiles to view the content whenever needed by sliding horizontally as well as vertically. In this article, let us check out Sliding Drawer which is used to hide the content out from the screen and allows the user to drag a handle to bring the content
9 min read