RecyclerView to be Scrolled horizontally with the width

Question

I have more items to show in the cardView horizontally inside a recyclerView and I have more cards veritically.

I tried to place cardView inside a HorizontalScrollView, It worked to scroll the idividual card. I wanted to scroll the entire RecyclerView to be scrolled to see right end items.

I tried with the RecyclerView inside a HorizontalScroolView not worked. RecyclerView inside a NestedScrollView not worked.

The RecyclerView is in a fragment. Inside the viewPager tabLayout, this is one of the fragment

fragment xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal">    
  <android.support.v7.widget.RecyclerView
    android:id="@+id/record_recycler"
    android:layout_width="550dp"
    android:scrollbars="horizontal"
    android:layout_height="0dp"
    android:layout_weight="1" />
</LinearLayout>

Adapter:

public class TestAdapter extends RecyclerView.Adapter{
   private List<Model> items;
   Context context;
   public TestAdapter(Context con, List<Model> itemslist) {
      context=con;
      this.items = itemslist;
    }

@Override
public int getItemViewType(int position) {
    return items.get(position).getUnique();
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
   if(viewType==0)
    return new MyViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.cricketrank_record_valuecard, parent, false));
else
    return new MyViewHolder1(LayoutInflater.from(parent.getContext()).inflate(R.layout.cricketrank_record_titlecard, parent, false));

}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
  if (holder instanceof MyViewHolder)
    try{
    ((MyViewHolder)holder).bindViewHolder(position);
    }catch (Exception e){
        Log.e(Constant.Tag,e.toString());
    }
else if(holder instanceof MyViewHolder1)
    try{
        ((MyViewHolder1)holder).bindViewHolder(position);
    }catch (Exception e){
        Log.e(Constant.Tag,e.toString());
    }
}

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

public class MyViewHolder extends RecyclerView.ViewHolder{
    public TextView text,text1,text2,text3,text4,text5;
    public View mCardView;

   public MyViewHolder(View view) {
    super(view);
    text1 = (TextView) view.findViewById(R.id.text1);
    text2 = (TextView) view.findViewById(R.id.text2);
    text3 = (TextView) view.findViewById(R.id.text3);
    text4 = (TextView) view.findViewById(R.id.text4);
  }

 public void bindViewHolder(int position) {

    text1.setText(items.get(position).getTeam());
    text2.setText(items.get(position).getRank());
    text3.setText(items.get(position).getMatches());
    text4.setText(items.get(position).getPoints());
 }
 }
}

public class MyViewHolder1 extends RecyclerView.ViewHolder{
    public TextView text,text1,text2,text3,text4,text5;
    public RelativeLayout rl;

   public MyViewHolder1(View view) {
    super(view);
    text = (TextView) view.findViewById(R.id.text);
    text1 = (TextView) view.findViewById(R.id.text1);
    text2 = (TextView) view.findViewById(R.id.text2);
    text3 = (TextView) view.findViewById(R.id.text3);
    text4 = (TextView) view.findViewById(R.id.text4);
    rl = (RelativeLayout) view.findViewById(R.id.rl);
   }

  public void bindViewHolder(int position) {
    text1.setText(items.get(position).getTeam());
    text2.setText(items.get(position).getRank());
    text3.setText(items.get(position).getMatches());
    text4.setText(items.get(position).getPoints());

   }
 }
}

MainActivity:

RecyclerView record_recycler= (RecyclerView) view.findViewById(R.id.record_recycler);
RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getActivity());
record_recycler.setLayoutManager(mLayoutManager);
record_recycler.setItemAnimator(new DefaultItemAnimator());
TestAdapter adapter = new TestAdapter(getActivity(), list);
record_recycler.setAdapter(adapter);

miljon · Answer 1 · 2016-07-25T19:50:40.137

0

You can archive it with LayoutManager refrence, with 3 arguments, in your case, change MainActivity a little bit, it will look this:

RecyclerView.LayoutManager mLayoutManager
= new LinearLayoutManager(getActivity(), LinearLayoutManager.HORIZONTAL, false);

Like documentation says, second argument define orientation:

/**
 * @param context       Current context, will be used to access resources.
 * @param orientation   Layout orientation. Should be {@link #HORIZONTAL} or {@link
 *                      #VERTICAL}.
 * @param reverseLayout When set to true, layouts from end to start.
 */

edited Jul 25 '16 at 19:50

answered Jul 25 '16 at 19:42

miljon

2,611
1
16
19

1

But it will not scroll to see the extra things if we have it in right side after the screen size. This will show the next item, if I scroll. But I want to see same item view values which is extended after the screen size (like scrolling of page horizontally to see the non visible contents). Thanks @Mij – 12345 Jul 25 '16 at 19:53

score 0 · Accepted Answer · answered Jul 25 '16 at 19:48

I think you are trying to scroll the recyclerview in two direction. Vertical is usual scroll of recylerview and in horizontally, the scrolling view if it is not fit with the mentioned width. Right?

If you are trying this, then I think it is not possible to scroll like you think. You can scroll the recycler view in both the directions with different views holding on them.

As you said the scrolling of cardview is possible, by default it won't have any scrolling properly normally. So it will scroll to show the card content completely to the user if they are not seeing completely and you set the scrolling view to scroll.

The possible way is, keep the views vertically with their field name and value. If you want to create more, then add one more row to accommodate the values down.

Have a look below:

<android.support.v7.widget.CardView
    android:id="@+id/card"
    android:layout_marginTop="2dp"
    android:layout_marginBottom="4dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
        <LinearLayout
            android:id="@+id/layout2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/layout1"
            android:orientation="horizontal">
            <TextView
                android:text="One"
                android:textSize="@dimen/font_itemsrow_13dp"
                android:layout_weight=".11"
                android:paddingLeft="3dp"
                android:paddingRight="3dp"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />
            <TextView
                android:text="Two"
                android:textSize="@dimen/font_itemsrow_13dp"
                android:layout_weight=".11"
                android:paddingRight="3dp"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />
            <TextView
                android:text="Three"
                android:textSize="@dimen/font_itemsrow_13dp"
                android:layout_weight=".24"
                android:paddingRight="3dp"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />
            <TextView
                android:text="Four"
                android:textSize="@dimen/font_itemsrow_13dp"
                android:layout_weight=".11"
                android:paddingRight="3dp"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />
            <TextView
                android:text="Five"
                android:textSize="@dimen/font_itemsrow_13dp"
                android:layout_weight=".17"
                android:paddingRight="3dp"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />
            <TextView
                android:text="Six"
                android:textSize="@dimen/font_itemsrow_13dp"
                android:layout_weight=".26"
                android:paddingRight="3dp"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />

        </LinearLayout>
        <LinearLayout
            android:id="@+id/layout3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/padding_3dp"
            android:layout_below="@+id/layout2"
            android:orientation="horizontal">
            <TextView
                android:id="@+id/one"
                android:textSize="@dimen/font_itemsrow_14dp"
                android:textColor="@color/black"
                android:layout_weight=".11"
                android:paddingLeft="3dp"
                android:paddingRight="3dp"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />
            <TextView
                android:id="@+id/two"
                android:textSize="@dimen/font_itemsrow_14dp"
                android:textColor="@color/black"
                android:layout_weight=".11"
                android:paddingRight="3dp"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />
            <TextView
                android:id="@+id/three"
                android:textSize="@dimen/font_itemsrow_14dp"
                android:textColor="@color/black"
                android:layout_weight=".24"
                android:paddingRight="3dp"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />
            <TextView
                android:id="@+id/four"
                android:textSize="@dimen/font_itemsrow_14dp"
                android:textColor="@color/black"
                android:layout_weight=".11"
                android:paddingRight="3dp"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />
            <TextView
                android:id="@+id/five
                android:textSize="@dimen/font_itemsrow_14dp"
                android:textColor="@color/black"
                android:layout_weight=".17"
                android:paddingRight="3dp"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />
            <TextView
                android:id="@+id/six"
                android:textSize="@dimen/font_itemsrow_14dp"
                android:textColor="@color/black"
                android:layout_weight=".26"
                android:paddingRight="3dp"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
         ....// Add extra title Row
        </LinearLayout>
        <LinearLayout
         ....// Add extra Values Row
        </LinearLayout>
    </RelativeLayout>
</android.support.v7.widget.CardView>

RecyclerView to be Scrolled horizontally with the width

2 Answers2