Like Us on Facebook

Android Image Slideshow Using ViewPager

 Welcome  guys, in this tutorial I am going  to talk about Image Slide show using ViewPager. ViewPager is used to animate screen slides automatically. Screen slides are transitions between one entire screen to another and are common with UIs like setup wizards or slideshows. Another way of screen slide with Viewpager provided by support library that can animate screen slides Automatically. Let’s do this:-

Read More
Android WebView with Sliding Menu tutorial

How to Create Overflow Menus in Android

Prerequisites:
  • JDK 7.0 or Above
  • Android Studio 2.0
 
Steps to Follow:

Step 1: Create a New Android Studio project name ImageSliderDemo.

Step 2: Select minimum API level 17  so that it can support maximum of Android Device available in the google play.

Step 3: Select  Blank  Activity and Give your layout xml name is activity_main and click finish.


Step 4:Inside activity_main.xml  write the following  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"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context="com.example.imagesliderdemo.MainActivity">
 
 <android.support.v4.view.ViewPager
  android:id ="@+id/view_pager"
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  >
 </android.support.v4.view.ViewPager>

 Step 5: create another xml file called  swipe.xml . write the following code inside it

 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="match_parent"
 android:layout_height="match_parent">
 
<TextView
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:textSize="25dp"
  android:text="Hello world!"
  android:id="@+id/textView"
  android:textStyle="bold"
  android:layout_marginTop="30dp"
  android:gravity="center" />
 
 <ImageView
  android:layout_marginTop="20dp"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:id="@+id/imageView"
   />
 </LinearLayout>

Step 6: put all the required images to Drawable folder.

Step 7:create a new class CustomAdapter.java . write the following code inside it.
 
 public class CustomAdapter extends PagerAdapter {
 private int[] images = {R.drawable.pic1,R.drawable.pic2,R.drawable.pic3,R.drawable.pic4,R.drawable.pic5};
 private Context ctx;
 private LayoutInflater inflater;

 public CustomAdapter(Context ctx){
 this.ctx = ctx;
 }
 
@Override
 public int getCount() {
 return images.length;
 }
 
@Override
 public boolean isViewFromObject(View view, Object object) {
 return (view ==(LinearLayout)object);
 }
 
@Override
 public Object instantiateItem(ViewGroup container, int position) {
 inflater = (LayoutInflater)ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
 View v = inflater.inflate(R.layout.swipe,container,false);
 ImageView img =(ImageView)v.findViewById(R.id.imageView);
 TextView tv  = (TextView)v.findViewById(R.id.textView);
 img.setImageResource(images[position]);
 tv.setText("Image :"+position);
 container.addView(v);
 return v;
 }
 
 @Override
  public void destroyItem(View container, int position, Object object) {
  container.refreshDrawableState();
  }
  }

Step 8: Inside MainActivity.java  write the following code inside it.
 public class MainActivity extends AppCompatActivity {
 ViewPager viewPager;
 CustomAdapter adapter;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 viewPager = (ViewPager)findViewById(R.id.view_pager);
 adapter = new CustomAdapter(this);
 viewPager.setAdapter(adapter);
 }
 }

 

This completes the coding part .Now you can test this Application in real device. If you have any questain or thoughts you can write in the comment section  below.

Posted By UandBlog

UandBlog is a Global Leading source of Finance, Health, Lifestyle, Technology, Gaming and Programing and other information, it is a fastest growing blog for all , for latest post or information like us on facebook , follow on Twitter, Google+ and Pinterest.

Comments ( 0 )

    Leave a comment..

    Click to login.

    Subscribe Latest Information

    Most Popular Posts

    You May Like Also