How to achieve horizontal scrolling images on Android?

2 years ago
Benjamin Taylor
2 minutes

To achieve horizontal scrolling images in Android, you can use either RecyclerView or ViewPager.

  1. Utilize RecyclerView:

To begin with, add a RecyclerView component to your layout file.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" />

Then, in your Activity or Fragment, locate the RecyclerView and configure the LayoutManager and Adapter.

RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
recyclerView.setAdapter(new ImageAdapter(imageList));

ImageAdapter is a custom implementation of RecyclerView.Adapter used for binding data and creating views.

public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.ImageViewHolder> {
    private List<Drawable> imageList;

    public ImageAdapter(List<Drawable> imageList) {
        this.imageList = imageList;
    }

    @NonNull
    @Override
    public ImageViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_image, parent, false);
        return new ImageViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ImageViewHolder holder, int position) {
        Drawable image = imageList.get(position);
        holder.imageView.setImageDrawable(image);
    }

    @Override
    public int getItemCount() {
        return imageList.size();
    }

    public static class ImageViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;

        public ImageViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.imageView);
        }
    }
}

item_image is a custom layout file used to display the view of a single image.

  1. Utilize ViewPager:

Firstly, add a ViewPager component to your layout file.

<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Next, in your Activity or Fragment, locate the ViewPager and set the PagerAdapter.

ViewPager viewPager = findViewById(R.id.viewPager);
viewPager.setAdapter(new ImagePagerAdapter(imageList));

The ImagePagerAdapter is a custom implementation class of PagerAdapter used to bind data and create views.

public class ImagePagerAdapter extends PagerAdapter {
    private List<Drawable> imageList;

    public ImagePagerAdapter(List<Drawable> imageList) {
        this.imageList = imageList;
    }

    @Override
    public int getCount() {
        return imageList.size();
    }

    @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(container.getContext());
        imageView.setImageDrawable(imageList.get(position));
        container.addView(imageView);
        return imageView;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView((View) object);
    }
}

This way, horizontal scrolling images can be implemented in Android.

bannerAds