How to implement Expandable items with LinearLayoutManager (introduced with Android L)

Question

RecyclerView has been introduced with Android L and is part of the AppCompat v7 library. I then decided to update my app with this brand new RecyclerView to replace my ListViews. For doing so, when it comes to set a LayoutManager for the RecyclerView, I am using the LinearLayoutManager, which works fine.

Here is the hard stuff: when I want to change my ExpandableListView to a RecyclerView. Since Google has not created an "ExpandableLayoutManager", this is quite tricky and I can't achieve this.

The documentation mentions children but it appears to be children of the root view of the RecyclerView not of children themselves.

Has someone a workaround or some clues about it? Or at least some information like where to start so that I can implement my own LayoutManager.

Answer 1

This library helps you to group your items into "sections" and you can then implement the expand/collapse functionality following in this example.

First you create your section class:

class MySection extends StatelessSection {

    String header;
    List<String> list;
    boolean expanded = true;

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

    @Override
    public int getContentItemsTotal() {
        return expanded? list.size() : 0;
    }

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

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

        headerHolder.tvTitle.setText(title);

        headerHolder.rootView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                expanded = !expanded;
                headerHolder.imgArrow.setImageResource(
                        expanded ? R.drawable.ic_keyboard_arrow_up_black_18dp : R.drawable.ic_keyboard_arrow_down_black_18dp
                );
                sectionAdapter.notifyDataSetChanged();
            }
        });
    }

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

Then create instance of your sections and set up your adapter:

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

// Add your Sections
sectionAdapter.addSection(new MySection("Section 1", Arrays.asList(new String[] {"Item 1", "Item 2", "Item 3", "Item 4" })));
sectionAdapter.addSection(new MySection("Section 2", Arrays.asList(new String[] {"Item 1", "Item 2" })));

// Set up your RecyclerView with the SectionedRecyclerViewAdapter
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
recyclerView.setAdapter(sectionAdapter);