Tutorial step by step with free source code: how to make a slideshow, with ViewFlipper, displaying pictures with next and prev buttons in Android Studio version 1.5.1.

Create New Project with Application name: Slideshow Next Prev; Minimum SDK: API 10 – Android 2.3.3 (Gingerbread).
Add pictures as many as you want from your computer, in project folder app->res->drawable:  picture1.jpg,  picture2.jpg, picture3.jpg etc.

In app->res->layout->activity_main.xml add an ImageView for each picture you want to display in slideshow, inside of ViewFlipper and complete the code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.toyo.slideshownextprev.MainActivity">
<ViewFlipper
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/viewFlipper">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:id="@+id/imageView"
android:src="@drawable/picture1"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:id="@+id/imageView2"
android:src="@drawable/picture2"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:id="@+id/imageView3"
android:src="@drawable/picture3"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:id="@+id/imageView4"
android:src="@drawable/picture4"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:id="@+id/imageView5"
android:src="@drawable/picture5"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:id="@+id/imageView6"
android:src="@drawable/picture6"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:id="@+id/imageView7"
android:src="@drawable/picture7"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:id="@+id/imageView8"
android:src="@drawable/picture8"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:id="@+id/imageView9"
android:src="@drawable/picture9"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:id="@+id/imageView10"
android:src="@drawable/picture10"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:id="@+id/imageView11"
android:src="@drawable/picture11"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:id="@+id/imageView12"
android:src="@drawable/picture12"/>
</ViewFlipper>
<Button
android:id="@+id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"/>
<Button
android:id="@+id/previous"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Prev"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_alignTop="@+id/next"/>
</RelativeLayout>

In app->java->MainActivity complete the code:

package com.example.toyo.slideshownextprev;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ViewFlipper;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
ViewFlipper viewFlipper;
Button next;
Button previous;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper);
next = (Button) findViewById(R.id.next);
previous = (Button) findViewById(R.id.previous);
next.setOnClickListener(this);
previous.setOnClickListener(this);
}
@Override
public void onClick(View v) {
if (v == next) {
viewFlipper.showNext();
}
else if (v == previous) {
viewFlipper.showPrevious();
}
}
}

Slideshow with next and prev buttons in Android Studio 1.5.1That’s all!
Run your app in Emulator and see how you can change the images from slideshow with next and prev buttons.

Watch the Video Tutorial:

Download free SlideshowNextPrev.apk application from here and install it on your device to see how works.
For further questions leave a message.

10 Comments

You can follow any responses to this entry through the RSS 2.0 feed.

good and nice ,
please create and learn how to use fragment in android studio .1.5.1

why i cant make a viewFlipper with 40 pict ? this is always stopped !! tell me

I want to place the independent list.
how can I do it

Thanks great tut. but it’s only working with 12 images if I add 20 images it will fail to start. do you know why?

    probably you use too large images

      Hi, how to create a photo album whereby i can swipe up and down to see all the picture and enlarge the picture when I click on to it. Really appreciate your help. 🙂

plz…help me to solve the error of unfortunately application stop when i install app in emulator using android studio ..i write the same code.

Congratulations. Very nice this tutorial. I have one doubt. Can I use this example with fragment? Do I have to declare this code in the fragment activity at onCreate or onCreateView? Thanks.

help me to solve the error of unfortunately application stop when I install app in emulator using android studio ..I write the same code,
but it’s not working.

why i cant make a viewFlipper with 40 pict ? this is always stopped !! tell me

Leave a Reply

Your email address will not be published. Required fields are marked *

Blue Captcha Image Refresh

*