Two recycler view in same layout as in flipboard app

Question

I want to use a RecyclerView(list like) below another RecyclerView(Grid like) as in flipboard

I tried two RecyclerView inside ScrollView with wrap content but nothing is showing.

I can able to see two views if it is placed in linear layout and equal weight is added to it. But that does not look like this app View.

This is my layout

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/parent_category_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minWidth="@dimen/default_small_padding"
        android:gravity="center"
        android:visibility="visible"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/category_grid"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnWidth="150dp"
        android:gravity="center"
        android:visibility="visible"/>

</LinearLayout>

Answer 1

I don't think that they use two ListViews (or ListView + GridView).

I think they use a ListView ( the one in the bottom) and they add a custom Header to this list (the one in the top), which look like a GridView.

Or if they use a Recyclerview, they can achieve this by using a different layout in the adapter for the first item.

PS: it's not recommended to use two scrollable view inside each other (like Recyclerview inside ScrollView).

Answer 2

In android we are advise to use only one scrollable view at time , if you want to use one scrollable view inside other one refer below links.

1)Android list view inside a scroll view

2) https://stackoverflow.com/questions/6210895/listview-inside-scrollview-is-not-scrolling-on-android

Answer 3

There's actually a really simple way to achieve the desired layout with just one RecyclerView!

The key is using a GridLayoutManager and its SpanSizeLookup. First of all define your GridLayoutManager like this:

GridLayoutManager layoutManager = new GridLayoutManager(context, spanCount);

where spanCount is the maximum amount of spans/columns you want to have. In your case, spanCount should be 2;

Now you need a way to tell this layoutManager how many spans an item should span. A simple way would be to use a viewtype/ViewHolder for items that should span just one column and another one for items that span the whole width.

Let's assume you define the viewtype for grid-items as VIEWTYPE_GRID_ITEM and the viewtype for standard listitems as VIEWTYPE_LIST_ITEM. You can then use these viewtypes to tell the layoutManager when to use just one span:

layoutManager.setSpanSizeLookup(new SpanSizeLookup() {
    @Override
    public int getSpanSize(int position){
        return adapter.getItemViewType(position) == VIEWTYPE_GRID_ITEM ? 1 : spanCount;
    }
});

Finally, set the layoutManager to your RecyclerView:

recyclerView.setLayoutManager(layoutManager);

And that's it!