Auto Image Slider in Android | Kotlin: A Step-by-Step Guide

Recently, I added an automatic image slider to my Kotlin app.

In this post, I'll guide you through the step-by-step process of implementing this feature.

An image slider is a view that showcases multiple images one at a time. Users can control the slider manually by swiping or using dedicated action buttons to navigate to the next or previous image.

Let's dive into how you can bring this dynamic image experience to your Kotlin app!

Add the needed dependencies

Add autoimageslider and glide to your build.gradle (Module) level file in the dependencies section and sync the project with gradle files.

implementation 'com.github.smarteist:autoimageslider:1.4.0'
implementation “com.github.bumptech.glide:glide:4.11.0”

The autoimageslider library will be used for the image slider and the glide library will be used to display remote images.

Add the SliderView to your main xml file

Open your Activity or Fragment xml file and add the SliderView as shown below.

<androidx.cardview.widget.CardView
    app:cardCornerRadius="6dp"
    android:layout_margin="16dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.smarteist.autoimageslider.SliderView
        android:id="@+id/imageSlider"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:sliderAnimationDuration="600"
        app:sliderAutoCycleDirection="back_and_forth"
        app:sliderAutoCycleEnabled="true"
        app:sliderIndicatorAnimationDuration="600"
        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"
        app:sliderStartAutoCycle="true" />
</androidx.cardview.widget.CardView>

The SliderView is wrapped inside a CardView to give the images a rounded corner and make them look better.

Likely error message

After adding the SliderView above to your xml file, You could come across any of the following errors:

• Class referenced in the layout file, com.smarteist.autoimageslider.SliderView, was not found in the project or the libraries

• Cannot resolve class com.smarteist.autoimageslider.SliderView

Solution to the error message

Add the code below to your settings.gradle file

dependencyResolutionManagement {
 repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
     repositories {
         //...
         jcenter()
         maven { url 'https://jitpack.io' }
     }
 }

Sync the project with gradle files and the error message will disappear.

Create a data class
Create a data class named BannerSliderItem

This data class will have a field named imageUrl that will hold each slider image url.

class BannerSliderItem (val imageUrl: String)

Create an xml file for each slider item

Right-click on your res/layout folder, and click New -> Layout Resource File. Name the file banner_slider_item.xml

<?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="200dp">
    <ImageView
        android:id="@+id/banner_slider_view"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:scaleType="fitXY"
        />

</RelativeLayout>

Paste the code above inside the xml file.

Create a SliderViewAdapter similar to a RecyclerViewAdapter

class BannerSliderAdapter(sliders: ArrayList<BannerSliderItem>) :
    SliderViewAdapter<BannerSliderAdapter.SliderViewHolder>() {

    var sliderList: ArrayList<BannerSliderItem> = sliders

    override fun getCount(): Int {
        return sliderList.size
    }
    override fun onCreateViewHolder(parent: ViewGroup?): BannerSliderAdapter.SliderViewHolder {
        val inflate: View =
            LayoutInflater.from(parent!!.context).inflate(R.layout.banner_slider_item, null)
        return SliderViewHolder(inflate)
    }

    override fun onBindViewHolder(viewHolder: BannerSliderAdapter.SliderViewHolder?, position: Int) {
        if (viewHolder != null) {
            Glide.with(viewHolder.itemView).load(sliderList.get(position).imageUrl,).fitCenter()
                .into(viewHolder.imageView)
        }
    }

    class SliderViewHolder(itemView: View?) : SliderViewAdapter.ViewHolder(itemView) {
        var imageView: ImageView = itemView!!.findViewById(R.id.banner_slider_view)
    }
}

Declare variables

Declare a variable for the BannerSliderAdapter

private lateinit var bannerSliderAdapter: BannerSliderAdapter

Declare an array list to store the BannerSliderItem items

private lateinit var sliderList: ArrayList<BannerSliderItem>

Initialize declared variables

Initialize the bannerSliderAdapter and sliderList inside the onCreateView method if you are using a Fragment or onCreate method if you're using an Activity

// Banner Slider Adapter
sliderList = arrayListOf(
    BannerSliderItem("https://images.pexels.com/photos/1639562/pexels-photo-1639562.jpeg"),
    BannerSliderItem("https://images.pexels.com/photos/2983101/pexels-photo-2983101.jpeg"),
    BannerSliderItem("https://images.pexels.com/photos/2271107/pexels-photo-2271107.jpeg")
);

Create an Instance of the BannerSliderAdapter, pass the slider list to the constructor, and assign it to bannerSliderAdapter

bannerSliderAdapter = BannerSliderAdapter(sliderList)

Find the reference to the SliderView inside the main layout using its ID and assign it to bannerSliderView. This reference can be found in two ways.

• Using findViewById

val bannerSliderView: SliderView = findViewById(R.id.bannerSlider);

• Using Data Binding

val bannerSliderView: SliderView = binding.bannerSlider

Attach the bannerSliderAdapter instance to the SliderView

bannerSliderView.setSliderAdapter(bannerSliderAdapter);

Style the slider

//IndicatorAnimationType. :WORM or THIN_WORM or COLOR or DROP //or FILL or NONE or SCALE or SCALE_DOWN or SLIDE and SWAP.
bannerSliderView.setIndicatorAnimation(IndicatorAnimationType.WORM);

//Set the SliderTransformAnimation
bannerSliderView.setSliderTransformAnimation(SliderAnimations. WORM);

//Set the autoCycleDirection
bannerSliderView.autoCycleDirection = SliderView.AUTO_CYCLE_DIRECTION_RIGHT;

//Set the indicator selected and unselected color
bannerSliderView.indicatorSelectedColor = Color.WHITE;
bannerSliderView.indicatorUnselectedColor = Color.GRAY;

//Set the slider scroll delay in seconds
bannerSliderView.scrollTimeInSec = 4; 

//Start the auto-cycle
bannerSliderView.startAutoCycle();

Outcome

Screen Recording 2024-04-10 at 08.49.11.mov - Google Drive

drive.google.com

.

Conclusion

In conclusion, implementing an automatic image slider in your Kotlin app can greatly enhance the visual experience for users. By following the step-by-step guide outlined in this post, you can easily integrate this feature using libraries like autoimageslider and glide. The dynamic nature of the image slider adds a touch of interactivity and engagement to your app. Don't hesitate to experiment with different styles and functionalities to create a unique and captivating image slider for your app users to enjoy!

Thank you for reading.