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?

Answer 1

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);

Answer 2

To sum up. You shouldn't use recycler inside of a recycler. You need to implement a custom gridLayoutManager. To achieve this read these:

From docs https://developer.android.com/reference/android/support/v7/widget/RecyclerView.ItemDecoration.html

An ItemDecoration allows the application to add a special drawing and layout offset to specific item views from the adapter's data set. This can be useful for drawing dividers between items, highlights, visual grouping boundaries and more.

So if you use the above along with this http://blog.sqisland.com/2014/12/recyclerview-grid-with-header.html you can definitely achieve what you are looking for. Just think of the image you presented from material guidelines as a group in your gridLayoutManager.

• You can have different types of views
• Each row might have multiple views
• Each row might be decorated differently