Implementing Slide Shows in Android apps

SliderView in Prime Video

What is SliderView?

With the advent of big screen smartphones, UI features popular for websites are now also implementable in mobile apps. SliderView or slideshows is one such feature. Whether it is latest movies/TV shows on Amazon Prime or latest shows on BookMyShow, slideshows can be seen everywhere. Following is my implementation of SliderView. Since this implementation contains a lot of boilerplate code, I have created a library for the same. Link and usage of that library is also given below.

Let’s Code !

I’ve used ViewPager, TabLayout and PagerAdapter to implement slides as following. The steps are :

1. Add a ViewPager(for slideshows) and TabLayout(for navigation dots) as follows:

2. For implementing navigation dots, create tab_default.xml :

Then tab_selected.xml :

And now tab_selector.xml which will serve as the background resource for TabLayout.

3. Now create a SliderAdapter java class which extends PagerAdapter. This will provide image resources for each page and inflate the ViewPager.

4. Create an instance of the adapter in MainActivity and pass the list of image resources (jpeg/png) as ArrayList. Finally setup ViewPager with SliderAdapter and TabLayout with ViewPager.

5. To implement automatic time-based swiping, a TimerTask must be executed on the main UI thread. This can be done by initialising an int variable “current_page” to 0 and then updating the ViewPager position according to it.

Here DELAY_MS and PERIOD_MS are int variables which signify the delay and time period of swipes in milliseconds.

But this seems like too much work.

Hence I have created a library to implement this with few lines of codes. It wraps the above logic to execute slideshows easily.

Include this in root build.gradle

allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

And this in app build.gradle to add dependencies.

dependencies {
        implementation 'com.github.nikhil-sachdeva:SliderViewLibrary:1.0'
}

Add SliderView to your activity_main.xml.

<com.example.sliderviewlibrary.SliderView
    android:id="@+id/sliderView"
    android:layout_centerHorizontal="true"
    android:layout_width="300dp"
    android:layout_height="200dp"/>

Adjust layout height and width based on the size of images to be used.

Either use list of images as resources.

images.add(R.drawable.pic1);
images.add(R.drawable.pic2);
images.add(R.drawable.pic3);
sliderView.setImages(images);

Or use list of URLs. (Add <uses-permission android:name=”android.permission.INTERNET”/> in AndroidManifest.xml to access internet.)

Urls.add("url1");
Urls.add("url2");
Urls.add("url3");
sliderView.setUrls(Urls);

To implement time-based auto swiping, define DELAY_MS and PERIOD_MS as int variables to define delay and time period for swipes respectively. And then execute a TimerTask on main UI thread as follows.

TimerTask task = sliderView.getTimerTask();
Timer timer = new Timer();
timer.schedule(task,DELAY_MS,PERIOD_MS);

Example implementation

And Voila!

Get yourself a slideshow in your app. More ideas for better customisations and features are welcome in the issues tab of the library. Link

📝 Read this story later in Journal.

🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >