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;
}

Answer 2

I would use the following library on GitHub to implement this change. It lets you swipe hotizontally and remove the item from the ListView once you are done with it.

Use the example below to help you:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mItems = new ArrayList<>(30);
    for (int i = 0; i < 30; i++) {
        mItems.add(String.format("Card number %2d", i));
    }

    mAdapter = new CardViewAdapter(mItems);

    mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);

    mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
    mRecyclerView.setAdapter(mAdapter);

    SwipeableRecyclerViewTouchListener swipeTouchListener =
            new SwipeableRecyclerViewTouchListener(mRecyclerView,
                    new SwipeableRecyclerViewTouchListener.SwipeListener() {
                        @Override
                        public boolean canSwipe(int position) {
                            return true;
                        }

                        @Override
                        public void onDismissedBySwipeLeft(RecyclerView recyclerView, int[] reverseSortedPositions) {
                            for (int position : reverseSortedPositions) {
                                mItems.remove(position);
                                mAdapter.notifyItemRemoved(position);
                            }
                            mAdapter.notifyDataSetChanged();
                        }

                        @Override
                        public void onDismissedBySwipeRight(RecyclerView recyclerView, int[] reverseSortedPositions) {
                            for (int position : reverseSortedPositions) {
                                mItems.remove(position);
                                mAdapter.notifyItemRemoved(position);
                            }
                            mAdapter.notifyDataSetChanged();
                        }
                    });

    mRecyclerView.addOnItemTouchListener(swipeTouchListener);

Hope this helps :)