RecyclerView expandable cardView

Question

I make small project with RecyclerView with CardView items inside. I created expandable card (expanded by pressing on small button inside the card). Each card always contain visible part (id:top_layout) and expandable part (id:expandable_part_layout).

Problem is that when I expand last item or item which after expand has bottom edge below bottom edge of RecyclerView (some part of item or expanded item is invisible to user) the RecyclerView should scroll up all items to show whole item that I expanded. I tried use scrollToPosition and similar methods to scroll to end of expanded card but without success.

So, my question is how to make that after I expand card scroll up RecyclerView about height of expanded part of card? - That is my idea, maybe someone has better solution.

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardCornerRadius="8px"
   app:cardPreventCornerOverlap="false">

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <RelativeLayout
        android:id="@+id/top_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="false"
        android:layout_alignParentTop="true"
        >
             <!-- some other controls -->

            <ImageButton
                android:id="@+id/card_header_inner_expand_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:background="?android:selectableItemBackground"
                android:clickable="true"
                android:padding="6dp"
                android:src="@drawable/expand_icon" />

    </RelativeLayout>

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/expandable_part_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/top_layout"
        android:animateLayoutChanges="true"
        android:clickable="false"
        android:visibility="gone">

        <RadioGroup
            android:id="@+id/extened_stage_radiogroup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:orientation="vertical">

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

        </RadioGroup>

      <!-- some other controls -->

    </RelativeLayout>
</RelativeLayout>

Answer 1

What tecnique are you using in order to do that?

I was in the same situation but for me the problem were these functions ExpandAndCollapseViewUtil.expand() and ExpandAndCollapseViewUtil.collapse() from this tutorial Diseño Android: Tarjetas con CardView so I didn't use it. Instead of that I just show/hide the view of the cardview without any animation.

Answer 2

You can use this lib instance your self developed way, try this:

STEP 1: Add below dependency to your build.gradle file:

**compile 'com.github.traex.expandablelayout:library:1.2.2'** use instead of
 compile 'com.github.traex.expandablelayout:library:1.3'

STEP 2: Add below View to Your card layout ,card_layout Must be look like this:

<com.andexert.expandablelayout.library.ExpandableLayout
    android:id="@+id/row_0"
    xmlns:expandable="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    expandable:headerLayout="@layout/YOUR_CARD_VIEW_UI"
    expandable:contentLayout="@layout/YOUR_CARD_VIEW_EXPANDED_UI"/>

STEP 3: In your define of RecyclerView remember to:

recList.setItemViewCacheSize(ITEMS_COUNT);

Feel free to Ask :-)

Answer 3

I had the same problem and solved it by putting following code (Kotlin) in the ViewHolder

    if (expandableView.isVisible) {
        val recyclerView = containerView?.parent as RecyclerView
        recyclerView.adapter.notifyItemChanged(adapterPosition)
        recyclerView.smoothScrollToPosition(adapterPosition)
    }

As you see before scroll to a position I notified the adapter that the item on this position was changed. And I only do this if the view became visible