Open In App

Android Auto Image Slider with Kotlin

Last Updated : 26 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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: 



Next Article
Article Tags :

Similar Reads