Recycler View Of Vertical Scrolling List With Horizontal Scrollable Row

I want an RecyclerView in which we have vertical scrollable list of items. From this scrollable list of items some should have ability to scroll in horizontal direction. As shown i

Solution 1:

Custom LayoutManagers

• StaticGridLayoutManager - 2D scrolling grid with variable column count based on data set. Window of visible (non-recycled) views is determined statically.
• DynamicGridLayoutManager - 2D scrolling grid where window of visible views is determined dynamically. Results in fewer views in memory, but scrolling performance is questionable.

I have met the same problem and I found this library. Maybe it will help you. https://github.com/devunwired/recyclerview-playground

More detail about RecyclerView LayoutManager: http://wiresareobsolete.com/2014/09/building-a-recyclerview-layoutmanager-part-1/

p/s: For your case http://lucasr.org/2014/07/31/the-new-twowayview/

Solution 2:

Since this seems to be a commonly asked problem, I thought I'll share my simple implementation of this. It is quite easy to achieve this using a RecyclerView. I did this while trying to create a horizontal list of scrollable images when a picture was taken using the device camera. I have pasted the relevant section of the adapter.

I used a RecyclerView that used a LinearLayoutManager with orientation set to horizontal.

The adapter itself is quite simple and is (please note only relevant sections are here):

import android.content.Context;
import android.graphics.Bitmap;
import android.media.Image;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.ebay.lockers.R;
import com.ebay.lockers.utils.AsyncDrawable;
import com.ebay.lockers.utils.BitmapUtils;
import com.ebay.lockers.utils.BitmapWorkerTask;

import java.io.File;
import java.util.List;

/**
 * Created by Sunil on 6/17/2016.
 */publicclassImagesHorizontalListAdapterextendsRecyclerView.Adapter<ImagesHorizontalListAdapter.ImagesViewHolder> {

    private Context context;
    private List<File> imageFiles;

    publicImagesHorizontalListAdapter(Context context, List<File> imageFiles) {
        this.context = context;
        this.imageFiles = imageFiles;
    }

    @Overridepublic ImagesHorizontalListAdapter.ImagesViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        Viewlayout= LayoutInflater.from(context).inflate(R.layout.simple_image_view, parent, false);
        ImagesViewHolderviewHolder=newImagesViewHolder(layout);
        return viewHolder;
    }

    @OverridepublicvoidonBindViewHolder(final ImagesHorizontalListAdapter.ImagesViewHolder holder, finalint position) {
        intavailableWidth= context.getResources().getDisplayMetrics().widthPixels;
        intimageWidth= availableWidth/4; // Number of images to be shown by defaultintimageHeight= imageWidth*4/3;
        finalintminDimenForScaling= Math.min(imageWidth, imageHeight);

        holder.image.post(newRunnable() {
            @Overridepublicvoidrun() {
                loadBitmap(imageFiles.get(position), holder.image, minDimenForScaling, minDimenForScaling);
            }
        });
    }

    @OverridepublicintgetItemCount() {
        return imageFiles.size();
    }

    publicvoidloadBitmap(File file, ImageView imageView, int reqWidth, int reqHeight) {
        if(BitmapUtils.cancelPotentialWork(file, imageView)) {
            finalBitmapWorkerTasktask=newBitmapWorkerTask(imageView, reqWidth, reqHeight);
            // The second Bitmap parameter is a placeholder image// Should consider animation; TO DO --finalAsyncDrawableasyncDrawable=newAsyncDrawable(context.getResources(), null, task);
            imageView.setImageDrawable(asyncDrawable);
            task.execute(file);
        }
    }

    publicstaticclassImagesViewHolderextendsRecyclerView.ViewHolder {
        // each data item is an image
        ImageView image;

        publicImagesViewHolder(View layout) {
            super(layout);
            this.image = (ImageView) layout.findViewById(R.id.image);
        }
    }
}