RecyclerView with GridLayoutManager inside RecyclerView with LinearLayoutManager

Question

I am basically trying the achieve this design principle (from Google's Material Design): Thus I've made a parent RecyclerView with a LinearLayoutManager, then in the RecyclerView adapter, I've put the child RecyclerView with a GridLayoutManager for the "rich media" section (Action area 2). Everything works fine, except for the fact that I've set the internal RecyclerView grid to have a match_parent width and a wrap_content height, but it won't calculate the size of the content properly, seemingly leaving it at 0 & thus hidden. If I set the child RecyclerView to a specific height, the items show within, but are then of course cut off at the bottom. Others seem to have come across this problem, but in their case, both have linear layouts. (Also see "Khay's" answer here.)

Now my question is, how would one override the onMeasure method as "pptang" did in the accepted answer of the linked question above, but within a custom GridLayoutManager instead of a custom LinearLayoutManager? I haven't posted my code here, because it's essentially the identical to the one linked, only that I need to make a custom GridLayoutManager instead for the child RecyclerView, so that it measures correctly as "pptang's" answer states.

Otherwise, is there a better way than to use 1 RecyclerView inside a 2nd RecyclerView? Can only 1 RecyclerView populate an activity/fragment both with a list of the above CardViews and a grid of unique items within each CardView?

Solution

You can build it with only one RecyclerView using the library SectionedRecyclerViewAdapter.

You can find the full code for the example of the image below here.

First create a Section class:

class MySection extends StatelessSection {

    String title;
    String subtitle;
    List<String> list;

    public MySection(String title, String subtitle, List<String> list) {
        // call constructor with layout resources for this Section header, footer and items 
        super(R.layout.section_header, R.layout.section_item);

        this.title = title;
        this.subtitle = subtitle;
        this.list = list;
    }

    @Override
    public int getContentItemsTotal() {
        return list.size(); // number of items of this section
    }

    @Override
    public RecyclerView.ViewHolder getItemViewHolder(View view) {
        // return a custom instance of ViewHolder for the items of this section
        return new MyItemViewHolder(view);
    }

    @Override
    public void onBindItemViewHolder(RecyclerView.ViewHolder holder, int position) {
        MyItemViewHolder itemHolder = (MyItemViewHolder) holder;

        // bind your view here
        itemHolder.tvItem.setText(list.get(position));
    }

    @Override
    public RecyclerView.ViewHolder getHeaderViewHolder(View view) {
        return new SimpleHeaderViewHolder(view);
    }

    @Override
    public void onBindHeaderViewHolder(RecyclerView.ViewHolder holder) {
        MyHeaderViewHolder headerHolder = (MyHeaderViewHolder) holder;

        // bind your header view here
        headerHolder.tvTitle.setText(title);
        headerHolder.tvSubTitle.setText(subtitle);
    }
}

Then you set up the RecyclerView with your Sections:

// Create an instance of SectionedRecyclerViewAdapter 
SectionedRecyclerViewAdapter sectionAdapter = new SectionedRecyclerViewAdapter();

// Create your sections with the list of data for each year
MySection section1 = new MySection("Title", "Subhead", firstDataList);

// Add your Sections to the adapter
sectionAdapter.addSection(section1);

// Set up your RecyclerView with the SectionedRecyclerViewAdapter
GridLayoutManager glm = new GridLayoutManager(getContext(), 2);
glm.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
    @Override
    public int getSpanSize(int position) {
        switch(sectionAdapter.getSectionItemViewType(position)) {
            case SectionedRecyclerViewAdapter.VIEW_TYPE_HEADER:
                return 2;
            default:
                return 1;
        }
    }
});
recyclerView.setLayoutManager(glm);
recyclerView.setAdapter(sectionAdapter);

Comments

[inferKNOX]

I get what you're saying and that is actually what I had before, having learnt from here. That isn't what I'm after though, I actually want the CardView to be the section, with the elements inside just as illustrated by Google themselves, and have those CardViews themselves be in a RecyclerView. How can that be done to achieve just that same result as Google is showing?

[inferKNOX]

I get what you're saying and agree that RecyclerView inside RecyclerView is wrong. However, to group them with a boundary will only achieve a similar result to the above, not the same result, as that is an actual CardView, not simply a grouping. The question then becomes, how do we get it from simply being groupings to actual CardViews?

[Vitaly]

There is more simply library to support nested recycler view with custom layout manager RendererRecyclerViewAdapter, see CompositeViewRenderer. Also please loot at this answer stackoverflow.com/a/48464993/4894238