Android Image Slideshow using ViewPager

Screen slides are transitions between one entire screen to another and are common with UIs like setup wizards or slideshows. This Android tutorial shows how to create image slideshow with ViewPager (provided as part of Android support library). ViewPager can animate screen slides automatically.

Here’s what a screen slide looks like – transition from one screen to the next:

Project Description:

In this Android Image Slideshow tutorial we will be doing the following,

  • Create an image slideshow along with image description using ViewPager and display circle indicator to show the current position in the slideshow.
  • Enclose ViewPager and circle indicator in a layout and provide a border.
  • Retrieve and parse JSON (product information) from remote server and store it as list of products.
  • Handle ViewPager item clicks to display product details in another fragment (ProductDetailFragment)
  • Proper back navigation of fragments on back key pressed.
  • Handle fragment orientation changes and retain the state of the fragment.

We will also be using the following library projects,

Prerequisites

  • Place the Universal Image Loader JAR file in your libs folder and add it to project’s “Build Path”.

Create JSON File

Create a new JSON file and name it as products.json and copy-paste the following content. Place this file in a remote server, for example Apache server’s “www” folder or /webapps/ROOT folder.

Android Project

Create a new Android project and name it as AndroidImageSlideShow.

Download “Android Image Slideshow using ViewPager” ImageViewSlideshow.zip – Downloaded 18893 times – 2 MB

Resources

colors.xml

Create a new file res/values/colors.xml and copy paste the following content.

strings.xml

Open res/values/strings.xml and edit to have the content as shown below.

indicator_tags.xml

Create a new file res/values/indicator_tags.xml and copy the following content. The attributes defined here are used by circle page indicator. You can use this file to change the circle indicator fill color, stroke color, stroke width, circle radius and any other related styles.

img_border.xml

Create a new file res/drawable/img_border.xml and copy the following content. This brings a border to ViewPager and circle page indicator layout.

Layout files

activity_main.xml

This is the main layout file which uses a Framelayout to hold fragments. Open res/layout/activity_main.xml and edit to have the content as shown below.

fragment_home.xml

This layout file is used by HomeFragment to display image slide show using ViewPager. Here it encloses ViewPager and circle page indicator in a single layout by displaying circle page indicator over ViewPager.

vp_image.xml

This layout file is for the content of a fragment to be used by ViewPager. The file contains an image view.

fragmet_pdt_detail.xml

This layout file is used by ProductDetailFragment to display product details when a page (fragment) in ViewPager is clicked.

Sources

TagName

In src folder, create a new class TagName in the package com.androidopentutorials.imageslideshow.utils. This class defines tag and key names defined in JSON.

CheckNetworkConnection

In src folder, create a new class CheckNetworkConnection in the package com.androidopentutorials.imageslideshow.utils.

Before our app attempts to connect to the network, it should check to see whether a network connection is available using getActiveNetworkInfo() and isConnected(). Remember, the device may be out of range of a network, or the user may have disabled both Wi-Fi and mobile data access.

We use this class to check whether the device has internet connection before sending request to receive remote JSON.

PageIndicator

In src folder, create a new interface PageIndicator in the package com.androidopentutorials.imageslideshow.utils. This is a class from Android ViewPagerIndicator library which is used to draw a circle indicator over the ViewPager. This interface is responsible for showing an visual indicator indicating the currently visible view.

CirclePageIndicator

In src folder, create a new class CirclePageIndicator in the package com.androidopentutorials.imageslideshow.utils. This is also a class from Android ViewPagerIndicator library which implements the above interface.

FileUtils

In src folder, create a new class FileUtils in the package com.androidopentutorials.imageslideshow.utils. This class has utility methods to close Reader, Writer, InputStream and OutputStream which is used by JSONParser class.

GetJSONObject

In src folder, create a new class GetJSONObject in the package com.androidopentutorials.imageslideshow.json. For the given URL, it gets JSONObject. It checks for Android version, if it is greater than FROYO then it uses HttpURLConnection else uses HttpClient. For more information on this refer Android Http Clients.

JSONParser

In src folder, create a new class JSONParser in the package com.androidopentutorials.imageslideshow.json. This class opens a connection to the remote json url, creates a reader object, retrieves the json string and returns a JSONObject.

JsonReader

In src folder, create a new class JsonReader in the package com.androidopentutorials.imageslideshow.json. This class has an utility method which takes JSONObject as parameter, parses it and returns a list of products.

Product

In src folder, create a new class Product in the package com.androidopentutorials.imageslideshow.bean. This is a bean class which represents a single product.

ImageSlideAdapter

In src folder, create a new class ImageSlideAdapter in the package com.androidopentutorials.imageslideshow.adapter.

  • This class is an implementation of PagerAdapter to populate pages inside a ViewPager.
  • When you implement a PagerAdapter, you must override the following methods at minimum:
    • instantiateItem(ViewGroup, int)
    • destroyItem(ViewGroup, int, Object)
    • getCount()
    • isViewFromObject(View, Object)
  • When the ImageView is clicked, it starts a FragmentTransaction and replaces the content frame with ProductDetailFragment.

HomeFragment

In src folder, create a new class HomeFragment in the package com.androidopentutorials.imageslideshow.fragment.

  • ViewPager.setCurrentItem() is used to animate screen slides automatically.
  • We use Handler to make ViewPager auto slide after five (5) seconds.
  • If the user slides the screen then we make ViewPager auto slide after ten (10) seconds.

Steps:

  • In onResume(), if there are no products (==null) it sends a request where it executes a background AsyncTask to read remote JSON. It parses this JSON using the JsonReader.getHome() and returns list of products. In onPostExecute() it create ImageSlideAdapter and sets it in ViewPager.
  • For ViewPager, we set touch listener and for MotionEvent.ACTION_UP (which is executed on ViewPager touch release) we post a runnable to the handler queue to be executed after ten (10) seconds which changes teh slide to next image.
  • We also set a page change listener which changes the image name to reflect the current image view.

ProductDetailFragment

In src folder, create a new class ProductDetailFragment in the package com.androidopentutorials.imageslideshow.fragment. This class gets a single product from bundle and displays product image, id and name.

MainActivity

In src folder, create a new class MainActivity in the package com.androidopentutorials.imageslideshow.

  • This is the main activity class.
  • When the app starts, it begins a new FragmentTransaction and starts HomeFragment.
  • It handles proper back navigation of fragments on back key pressed by overriding onBackPressed().
  • It handles fragment orientation changes and retains the fragment state by overriding onSaveInstanceState().

AppData

In src folder, create a new class AppData in the package com.androidopentutorials.imageslideshow.

Universal ImageLoader configuration (ImageLoaderConfiguration) is global for application hence create a class which extends android.app.Application and create a global configuration and initialize ImageLoader.