Search code examples
androidandroid-layoutandroid-recyclerviewexpandablerecyclerview

RecycleView 2 columns with horizontally expandable card

I'm looking for how to implement this with recycleview and layout manager like at the screenshots.

Grid with 2 columns (same size). Each card could be expanded by click overlapping its horizontal neighbour. And by click it'd collapse back to its original state.

enter image description here enter image description here

Solution

  • The question is solved by overriding RecyclerView.ItemDecoration. In the adapter we change item's property on click and call notifyItemChanged for clicked card and its neighbour.

    Then, we attach Decorator to RecylceView (before assigning adapter).

    gridView = findViewById(R.id.gridview_words_titles);
gridView.addItemDecoration(new OverlapDecoration());

    And, after that inside OverlapDecoration class we could make all the changes we need to overlap cards. In my case, I just expand rectangle depends if it is right or left in pair.

    View layout = view.findViewById(R.id.layout_words_full);
ViewGroup.LayoutParams params = layout.getLayoutParams();
params.width = (int) (width_px - 15 * scale);

    And, 

    int horizOverlap;

if (itemPosition % 2 == 0) {
    horizOverlap = (int) ((width_px - 20 * scale) / 2);
    outRect.set(-horizOverlap, 0, 0, 0);
} else {
    horizOverlap = (int) ((width_px - 5 * scale) / 2);
    outRect.set(0, 0, -horizOverlap, 0);
}