What is the best way to do sliding images in cardview inside recycler?

Question

I have a RecyclerView with Cardviews. I want sliding images inside this CardView, just like in OLX app. What is the best way to do so? I think about puting viewpager inside cardview. Is it ok or maybe I should try something else?

I did it with ViewPager but it looks like too slow. Here is a part of viewpager adapter.

 @Override
public Object instantiateItem(ViewGroup collection, int position) {

    LayoutInflater inflater = LayoutInflater.from(mContext);
    ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.viewpager_custom, collection, false);
    collection.addView(layout);

    ImageView image = (ImageView) layout.findViewById(R.id.viewPagerImageView);
    image.setImageResource(mPics[position]);

    return layout;
}

Answer 1

You are going the right way.

Just do one thing load compressed bitmaps instead of uncompressed ones. You are directly setting bitmap resource to your imageview. Either use a library like Picasso https://github.com/square/picasso/

or use google's official source for loading large bitmaps efficiently.

Firstly copy this method in your activity:

public static int calculateInSampleSize(
            BitmapFactory.Options options, int reqWidth, int reqHeight) {
    // Raw height and width of image
    final int height = options.outHeight;
    final int width = options.outWidth;
    int inSampleSize = 1;

    if (height > reqHeight || width > reqWidth) {

        final int halfHeight = height / 2;
        final int halfWidth = width / 2;

        // Calculate the largest inSampleSize value that is a power of 2 and keeps both
        // height and width larger than the requested height and width.
        while ((halfHeight / inSampleSize) > reqHeight
                && (halfWidth / inSampleSize) > reqWidth) {
            inSampleSize *= 2;
        }
    }

    return inSampleSize;
}

Then this method to decode bitmaps:

public static Bitmap decodeSampledBitmapFromResource(Resources res, int resId,
        int reqWidth, int reqHeight) {

    // First decode with inJustDecodeBounds=true to check dimensions
    final BitmapFactory.Options options = new BitmapFactory.Options();
    options.inJustDecodeBounds = true;
    BitmapFactory.decodeResource(res, resId, options);

    // Calculate inSampleSize
    options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight);

    // Decode bitmap with inSampleSize set
    options.inJustDecodeBounds = false;
    return BitmapFactory.decodeResource(res, resId, options);
}

Then load your bitmap like this:

@Override
public Object instantiateItem(ViewGroup collection, int position) {

    LayoutInflater inflater = LayoutInflater.from(mContext);
    ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.viewpager_custom, collection, false);
    collection.addView(layout);

    ImageView image = (ImageView) layout.findViewById(R.id.viewPagerImageView);
    image.setImageBitmap(
    decodeSampledBitmapFromResource(getResources(), R.id.myimage, reqwidth, reqheight));

    return layout;
}