Image Slider in Android using ViewPager

When talking about Android Apps, the first thing that comes to mind is variety. There are so many varieties of Android apps providing the user with beautiful dynamic UI. One such feature is to navigate in the Android Apps using the left and right swipes as opposed to clicking on Buttons. Not only does it look more simple and elegant but also provides ease of access to the user. There are many apps that use this swipe feature to swipe through different activities in the app. For example, the popular chatting app, Snapchat, uses it to swipe through lenses, chats, and stories. Here let’s discuss how to create an Image Slider using ViewPager. ViewPager is a class in Java that is used in conjunction with Fragments. It is mostly used for designing the UI of the app. A sample GIF is given below to get an idea about what we are going to do in this article.

Image slider

Steps for Creating Image Slider in Android

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Designing the UI



  • Below is the code for the activity_main.xml file. We have added only a ViewPager to show the images. Below is the complete code for the activity_main.xml file.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
  <!-- viewpager to show images -->
  <androidx.viewpager.widget.ViewPager
      android:id="@+id/viewPagerMain"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>
  
</RelativeLayout>

chevron_right


  • Create a new Layout Resource File item.xml inside the app -> res -> layout folder. Add only an ImageView. Below is the code of the item.xml file.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  
    <!-- image viwer to view the images -->
    <ImageView
        android:id="@+id/imageViewMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
  
</LinearLayout>

chevron_right


Step 3: Coding Part

  • First, create an Adapter for the ViewPager and named it as ViewPagerAdapter class below is the complete code of ViewPagerAdapter.java class. Comments are added inside the code to understand each line of the code.

Java

filter_none

edit
close

play_arrow

link
brightness_4
code

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
import java.util.Objects;
  
class ViewPagerAdapter extends PagerAdapter {
  
    // Context object 
    Context context;
      
    // Array of images
    int[] images;
      
    // Layout Inflater
    LayoutInflater mLayoutInflater;
  
  
    // Viewpager Constructor 
    public ViewPagerAdapter(Context context, int[] images) {
        this.context = context;
        this.images = images;
        mLayoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }
  
    @Override
    public int getCount() {
        // return the number of images
        return images.length;
    }
  
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == ((LinearLayout) object);
    }
  
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, final int position) {
        // inflating the item.xml 
        View itemView = mLayoutInflater.inflate(R.layout.item, container, false);
  
        // referencing the image view from the item.xml file 
        ImageView imageView = (ImageView) itemView.findViewById(R.id.imageViewMain);
          
        // setting the image in the imageView
        imageView.setImageResource(images[position]);
  
        // Adding the View
        Objects.requireNonNull(container).addView(itemView);
  
        return itemView;
    }
  
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
          
        container.removeView((LinearLayout) object);
    }
}

chevron_right


  • After creating the Adapter for the ViewPager, reference the ViewPager from the XML and set the adapter to it in the MainActivity.java file. Create an array of integer which contains the images which we will show in the ViewPager. Below is the complete code for the MainActivity.java file. Comments are added inside the code to understand each line of the code.

Java

filter_none

edit
close

play_arrow

link
brightness_4
code

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
  
public class MainActivity extends AppCompatActivity {
  
    // creating object of ViewPager
    ViewPager mViewPager;
  
    // images array
    int[] images = {R.drawable.a1, R.drawable.a2, R.drawable.a3, R.drawable.a4,
                    R.drawable.a5, R.drawable.a6, R.drawable.a7, R.drawable.a8};
      
    // Creating Object of ViewPagerAdapter
    ViewPagerAdapter mViewPagerAdapter;
  
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Initializing the ViewPager Object
        mViewPager = (ViewPager)findViewById(R.id.viewPagerMain);
  
        // Initializing the ViewPagerAdapter
        mViewPagerAdapter = new ViewPagerAdapter(MainActivity.this, images);
  
        // Adding the Adapter to the ViewPager
        mViewPager.setAdapter(mViewPagerAdapter);
    }
}

chevron_right


Output: Run on Emulator

Additional Links:

  • Download the Full Project From the Link
  • Download Images Using in This Project 
  • Download The App

Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.