Android Image Slider

An Image Slider in Android is a user interface component that allows users to slide through a series of images or other content. It is a common feature in many mobile apps and provides an engaging way to display images or other content in a compact space. The Image Slider can be implemented in various ways, but one common approach is to use a ViewPager component with a PagerAdapter to manage the content.

Here is an example of how to create an Image Slider in Android:

  1. Add the ViewPager and Indicator Library to your project by adding the following lines to your app-level build.gradle file:
  2. implementation 'com.android.support:viewpager:28.0.0'
        implementation 'com.viewpagerindicator:library:2.4.1'
  3. Create a layout file for the Image Slider, which will contain the ViewPager and the Indicator:
  4. <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>
    
        <com.viewpagerindicator.CirclePageIndicator
            android:id="@+id/indicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"/>
    
    </LinearLayout>
  5. Create a PagerAdapter class to manage the content of the ViewPager:
  6. public class ImagePagerAdapter extends PagerAdapter {
    
        private Context mContext;
        private int[] mImageIds;
    
        public ImagePagerAdapter(Context context, int[] imageIds) {
            mContext = context;
            mImageIds = imageIds;
        }
    
        @Override
        public int getCount() {
            return mImageIds.length;
        }
    
        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
            return view == object;
        }
    
        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            ImageView imageView = new ImageView(mContext);
            imageView.setImageResource(mImageIds[position]);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            container.addView(imageView);
            return imageView;
        }
    
        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            container.removeView((ImageView) object);
        }
    }
  7. In the Activity or Fragment where you want to display the Image Slider, initialize the ViewPager and Indicator:
  8. ViewPager viewPager = findViewById(R.id.view_pager);
    CirclePageIndicator indicator = findViewById(R.id.indicator);
    ImagePagerAdapter adapter = new ImagePagerAdapter(this, new int[]{R.drawable.image1, R.drawable.image2, R.drawable.image3});
    viewPager.setAdapter(adapter);
    indicator.setViewPager(viewPager);

With this setup, you should have a working Image Slider in your Android app. The ViewPager allows the user to swipe through the images, while the Indicator shows which image is currently displayed. The ImagePagerAdapter is responsible for managing the content of the ViewPager, in this case, a list of image resources.

Next Article ❯