Image Slide Show

Hi everyone.
In this tutorial i am going to show you all the code which when run will display the images as a slideshow.
Below is the attached screen shot : 

For this i am considering the images from the Sdcard's images folder where i am having all the images.
Next to display the images i am using View Flipper concept. I am adding ImageViews to the viewflipper so that the images can be displayed onto the screen.
Now lets start 
Design an xml layout as below (say main.xml)

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.     xmlns:tools="http://schemas.android.com/tools"
3.     android:layout_width="match_parent"
4.     android:layout_height="match_parent" >
5. 
   
6.     <ViewFlipper
7.         android:id="@+id/main_flipper"
8.         android:layout_width="wrap_content"
9.         android:layout_height="wrap_content"
10.         android:layout_alignParentLeft="true"
11.         android:layout_alignParentTop="true" >
12.     </ViewFlipper>
13. 
    
14. </RelativeLayout>

Now place few images into the sdcard's images folder.

We can get the path of the images folder of our sdcard using the following statement.

File sdcardPath = new File(Environment.getExternalStorageDirectory()

.getPath() + "/images");

String sdcard =  sdcardPath .getPath();

Now let us create a method named  to setImagesToFlipper() add ImageViews dynamically to the ViewFlipper.

I am creating imageviews dynamically because the number of images in the sdcard may not be the same all the times.

Consider the following function.

1. private void setImagesToFlipper(ViewFlipper flipper, File sdcardPath) {
2. int imageCount = sdcardPath.listFiles().length;
3. for (int count = 0; count < imageCount - 1; count++) {
4. ImageView imageView = new ImageView(this);
5. Bitmap bmp = BitmapFactory.decodeFile(sdcardPath.listFiles()[count]
6. .getAbsolutePath());
7. imageView.setImageBitmap(bmp);
8. flipper.addView(imageView);
9. 
   
10. }
11. 
    
12. }

In the above code 

Line 2 : imageCount will hold the number of files in the path (here images folder).

Line 4 : Dynamically creating an imageView.

Line 5 : Getting a bitmap object of the image present in the sdcard/images folder.

Line 7 : Setting the bitmap image to the image view 

Line 8 : Adding the image to the ViewFlipper.

Now we are with all the images of the sdcard/images folder. Now we need to give a slide show for the images.The following code helps to do this.

1.             runnable = new Runnable() {
2. public void run() {
3. handler.postDelayed(runnable, 3000);
4. imageViewFlipper.showNext();
5. 
   
6. }
7. };
8. handler = new Handler();
9. handler.postDelayed(runnable, 500);

If you want to update the UI in the middle of a thread execution, the best approach to do this is creating a handler which will update the UI and let the thread to continue running.

That's the reason i used a handler here.

The line 4 makes the images to slide.showNext() of the ViewFlipper manullay shows the next Child i.e.., the next image .

Now lets have a look at the entire code 

1.   public class MainActivity extends Activity {
2. 
   
3. ViewFlipper imageViewFlipper;
4.         Handler handler;
5. Runnable runnable;
6. 
   
7. @Override
8. public void onCreate(Bundle savedInstanceState) {
9. super.onCreate(savedInstanceState);
10. setContentView(R.layout.main);
11. imageViewFlipper = (ViewFlipper) findViewById(R.id.main_flipper);
12. 
    
13. // getting the path of the images folder in the sdcard
14. File sdcardPath = new File(Environment.getExternalStorageDirectory()
15. .getPath() + "/images");
16. 
    
17. setImagesToFlipper(imageViewFlipper, sdcardPath);
18. 
    
19. runnable = new Runnable() {
20. 
    
21. public void run() {
22. 
    
23. handler.postDelayed(runnable, 3000);
24. imageViewFlipper.showNext();
25. 
    
26. }
27. };
28. handler = new Handler();
29. handler.postDelayed(runnable, 500);
30. 
    
31. }
32.      /**
33.        * Sets the images to the ViewFlipper
34.        * @param flipper : the Flipper object
35.        * @param sdcardPath : the image file in the sdcard
36.      */
37.      private void setImagesToFlipper(ViewFlipper flipper, File sdcardPath) {
38. int imageCount = sdcardPath.listFiles().length;
39. for (int count = 0; count < imageCount - 1; count++) {
40. ImageView imageView = new ImageView(this);
41. Bitmap bmp = BitmapFactory.decodeFile(sdcardPath.listFiles()[count]
42. .getAbsolutePath());
43. imageView.setImageBitmap(bmp);
44. flipper.addView(imageView);
45. 
    
46. }
47. 
    
48. }
49. }

Any suggestions are welcomed.

Please comment if anyone has some or the other problem with this one.