How to achieve partially visible next item in RecyclerView

Question

I'm using onFling to scroll one item at a time and want only one item to be fully visible on the page while next item to be visible partially.

I want to this, how can I achieve this in RecyclerView. Here is the adapter code, just in place of cardView(which is shown in image), it's imageView:

public class SimpleItemRecyclerViewAdapter extends RecyclerView.Adapter<SimpleItemRecyclerViewAdapter.ViewHolder> {

private final ArrayList<Movie> mValues;

public SimpleItemRecyclerViewAdapter(ArrayList<Movie> items) {
    mValues = items;
}

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

@Override
public void onBindViewHolder(final ViewHolder holder, final int position) {
    holder.mItem = mValues.get(position);
    Context context = holder.imageView.getContext();
    String logo = mValues.get(position).getPosterPath();
    Picasso.with(context).load(logo).into(holder.imageView);

}

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

public class ViewHolder extends RecyclerView.ViewHolder {
    public final View mView;
    public ImageView imageView;
    public Movie mItem;
    MainActivity mainActivity = new MainActivity();

    public ViewHolder(View view) {
        super(view);
        mView = view;
        imageView = (ImageView) view.findViewById(R.id.image_movie_poster);

        android.view.ViewGroup.LayoutParams params = imageView.getLayoutParams();
        params.height = (int) (mainActivity.height * 0.7);
        imageView.setLayoutParams(params);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(view.getContext(), "Clicked", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public String toString() {
        return "Blah";
    }
}
}

Answer 1

This works for my horizontal recyclerview. You could just change to vertical layout manager.

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

    recyclerView = findViewById(R.id.recyclerView);
    recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
    final SnapHelper snapHelper = new PagerSnapHelper();
    snapHelper.attachToRecyclerView(recyclerView);

    recyclerView.post(new Runnable() {
        @Override
        public void run() {
            recyclerView.setAdapter(new TestAdapter());
        }
    });
}

private class TestAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>
{
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int i) {
        final View view =
                LayoutInflater.from(parent.getContext())
                        .inflate(R.layout.test_card, parent, false);
        int width = recyclerView.getWidth();
        ViewGroup.LayoutParams params = view.getLayoutParams();
        params.width = (int)(width * 0.8);
        view.setLayoutParams(params);
        return new TestViewHolder(view);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int i) {
        TestViewHolder holder = (TestViewHolder) viewHolder;
        holder.numText.setText(((Integer) i).toString());
    }

    @Override
    public int getItemCount() {
        return 20;
    }
}

Answer 2

you can use custom layout Manager to control how each item be shown

class RatioLayoutManager constructor(
        context: Context?,
        @RecyclerView.Orientation orientation: Int = RecyclerView.VERTICAL,
        reverseLayout: Boolean = false
) : LinearLayoutManager(context, orientation, reverseLayout) {

    var ratio = 0.7f

    private val horizontalSpace get() = width - paddingStart - paddingEnd

    private val verticalSpace get() = width - paddingTop - paddingBottom

    override fun generateDefaultLayoutParams() =
            scaledLayoutParams(super.generateDefaultLayoutParams())

    override fun generateLayoutParams(lp: ViewGroup.LayoutParams?) =
            scaledLayoutParams(super.generateLayoutParams(lp))

    override fun generateLayoutParams(c: Context?, attrs: AttributeSet?) =
            scaledLayoutParams(super.generateLayoutParams(c, attrs))

    private fun scaledLayoutParams(layoutParams: RecyclerView.LayoutParams) =
            layoutParams.apply {
                when (orientation) {
                    HORIZONTAL -> width = (horizontalSpace * ratio + 0.5).toInt()
                    VERTICAL -> height = (verticalSpace * ratio + 0.5).toInt()
                }
            }
}