Expand/collapse two CardViews inside a LinearLayout BUT keep both CardViews inside the screen boundaries

Question

it's been quite many hours now working on this and I can't come up with solution.

I have a LinearLayout that contains two CardViews. Each CardView contains two RelativeLayouts. One RelativeLayout that is always visible, has fixed height and is clickable. The second RelativeLayout can be expanded/collapsed. The xml structure goes like this:

<LinearLayout
    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="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:id="@+id/cardview_one"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:id="@+id/visible_part_one"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:onClick="toggleCardViews">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="visible part one"/>

            </RelativeLayout>

            <com.github.aakira.expandablelayout.ExpandableRelativeLayout
                android:id="@+id/expandable_layout_one"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:ael_expanded="true"
                app:ael_duration="500"
                app:ael_interpolator="linear"
                app:ael_orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="expandable part one"/>

            </com.github.aakira.expandablelayout.ExpandableRelativeLayout>

        </LinearLayout>

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:id="@+id/cardview_two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:id="@+id/visible_part_two"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:onClick="toggleCardViews">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="visible part two"/>

            </RelativeLayout>

            <com.github.aakira.expandablelayout.ExpandableRelativeLayout
                android:id="@+id/expandable_layout_two"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:ael_expanded="false"
                app:ael_duration="500"
                app:ael_interpolator="linear"
                app:ael_orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="expandable part two"/>

            </com.github.aakira.expandablelayout.ExpandableRelativeLayout>

        </LinearLayout>

    </android.support.v7.widget.CardView>

</LinearLayout>

What I want to achieve is click on collapsed cardVie to expand it's expandable part, while collapsing the collapsing the other cardview. At the same time, I want to keep both cardviews inside the screen boundaries. It should look like that.

+--LinearLayout---+
| +--CardView1---+|
| |visible part  ||
| |--------------||
| |exppanded part||
| |80% of screen|||
| |              ||
| +--------------+|
|                 |
| +--CardView2---+|
| |visible part  ||
| |20% of screen ||
| +--------------+|
+-----------------+

after the user clicks on first CardView's visible part (vise versa):

+--LinearLayout---+
| +--CardView1---+|
| |visible part  ||
| |20% of screen ||
| +--------------+|
| +--CardView2---+|
| |visible part  ||
| |--------------||
| |exppanded part||
| |80% of screen|||
| |              ||
| +--------------+|
+-----------------+

For the moment, in order to keep both card views inside the screen while collapsing or expanding, tried to change the cardviews weight attribute programmatically done like this. This solution keeps both cardviews inside the screen but the transition animation is not smooth at all.I'm suspecting that the use of ExpandableRelativeLayout is causing the problem.

Anyone faced the same problems and came up with a solution? Any help is appreciated!!

Answer 1

Well so far there is no answer. In the meanwhile I experimented with alternatives. And I found that BottomSheet is a neat solution with really smooth animation.

The problem: The challenge in my case was to toggle between two expandable views but also make sure that both of them remain within the screen boundaries.

My initial solution (that did NOT work): Initially I used a LinearLayout as a parent View and I set the layout_weight attribute for both child views. So on click to expand a child view, the other view was collapsing and I was programmatically setting the height for each view. That switch of views heights had really bad transition animation.

The BottomSheet: The solution that worked for me is the use of BottomSheetfrom Android Support Library 23.2. Now my layout consists of two viewGroups, the top view and the bottomSheet. When I click one of them, then the bottomSheet expands or collapse accordingly. Note that the top view is not an instance of the ExpandableRalativeLayout anymore, but rather a LinearLayout that is overlapped when the bottomSheet is expanded.