Home Ask Login Register

Developers Planet

Your answer is one click away!

Androider February 2016

Scroll effect for RecyclerView

I am using horisontal RecyclerView in Android app.
Showing two items (ImageViews) on the screen at a time.

To do this I am setting width of each ImageView to half of the screen in ViewHolder class of the adapter:

  public static class ViewHolder extends RecyclerView.ViewHolder { 

  private LinearLayout ll_Img;
        private ImageView iv_ad;

        private ViewHolder(View v) {

            ll_Img = (LinearLayout) itemView.findViewById(R.id.ll_Img);
            ll_Img.getLayoutParams().width = (Utils.getScreenWidth(itemView.getContext()) / 2);

            iv_ad = (ImageView) v.findViewById(R.id.iv_main_ad);

And getting scrren width:

public static int getScreenWidth(Context context) {

    WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
    Display display = wm.getDefaultDisplay();
    Point size = new Point();
    int screenWidth = size.x;

    return screenWidth;

It works fine but I want to implement scroll effect like on iOS,
to scroll one item per swipe,
so after each swipe 2 items must fit the screen width.

By the way, two videos worth 1000 words
so here what I am having now: https://drive.google.com/file/d/0B7j1Rf_oUEbLOWk1OUtpWXFpcEE/view?usp=sharing

And what I want to achieve (as my colleague implemented on iOS): https://drive.google.com/file/d/0B6B-4-ITg1EQTElNTWsxMWg4aWs/view?usp=sharing

Each piece of advice is appreciated


TP89 February 2016

Not entirely sure if this would give the desired effect, but if you are using a linearlayoutmanager, you could add a scrolllistener to your recyclerview, and whenever it gets called, use the linearlayout's method scrollToPosition to force it to scroll all the way to the next item.

billynomates February 2016

This is a viewpager, not a recyclerview. This link might help https://commonsware.com/blog/2012/08/20/multiple-view-viewpager-options.html

Just for anyone else's benefit:

getPageWidth() returns a floating-point number, between 0 and 1, representing the portion of the width of the ViewPager that a given page should take up. By default, the page width is 1, but by overriding this, you can have multiple pages on the screen simultaneously.

Post Status

Asked in February 2016
Viewed 1,227 times
Voted 10
Answered 2 times


Leave an answer

Quote of the day: live life