Collapse/hide a specific layout when recyclerview scrolls

Question

What i currently have is this:

Would it possible to hide the Linearlayout1 when the recyclerview starts scrolling and the linearlayout2 will move to top which will act as header:

Just like this:

I have already see coordinatelayout but it i have an exisiting toolbar that shouldn't be replace.

EDIT-----

for nightmaregiba i can't properly do it , i keep trying to rearrange the code, i can't find the right positioning. here is my code

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/translucent_clear_bg"
    tools:context=".fragment.AccountFragment">


    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="50dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp"
            ></android.support.v7.widget.Toolbar>

    <!-- TODO: Update blank fragment layout -->
    <LinearLayout

        android:id="@+id/mAccount_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/background_white"
        android:paddingTop="5dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:orientation="vertical"
        android:gravity="top">

        <com.weiwangcn.betterspinner.library.material.MaterialBetterSpinner
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/account_number"
            android:layout_margin="10dp"
            android:hint="@string/label_account_number"
            android:textColor="@color/text_color_teal"
            android:textColorHint="@color/base_text"
            android:textColorHighlight="@color/colorAccent"
            app:met_floatingLabel="highlight"
            app:met_errorColor="@color/vt_color1"
            app:met_primaryColor="@color/aub_gold_new"
            app:met_textColor="@color/text_color_teal"
            android:textSize="@dimen/font_size_header"
            android:gravity="left"
            android:dropDownWidth="wrap_content"
            />

        <TextView
            android:layout_below="@id/account_number"
            android:textStyle="bold"
            android:paddingLeft="5dp"
            android:textSize="@dimen/font_size"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="gone"
            android:text="@string/label_available_balance"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/available_balance"
            android:layout_marginRight="5dp"
            android:textSize="@dimen/font_size"
            android:gravity="right"
            android:layout_gravity="right"
            android:visibility="gone"
            android:text="@string/lorem_ipsum_short"
            />
        <TextView
            android:layout_below="@id/available_balance"
            android:textStyle="bold"
            android:paddingLeft="5dp"
            android:textSize="@dimen/font_size"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="gone"
            android:text="@string/label_ledger_balance"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/ledger_balance"
            android:layout_marginRight="5dp"
            android:textSize="@dimen/font_size"
            android:gravity="right"
            android:layout_gravity="right"
            android:visibility="gone"
            android:text="@string/lorem_ipsum_short"
            />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/mDateLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="@color/background_white"
        android:paddingRight="10dp"
        android:paddingLeft="10dp"
        android:weightSum="4">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_date_from"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:hint="@string/hint_date_from"
            card_view:errorEnabled="true"
            android:textSize="12sp"
            android:layout_weight="1.65"
            app:theme="@style/TextInputLayoutGold">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/input_date_from"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:singleLine="true"
                android:maxLength="20"
                android:inputType="datetime"
                android:text="asdasda"
                android:textSize="@dimen/font_size"
                app:theme="@style/EditTextGold"
                />
        </android.support.design.widget.TextInputLayout>

        <!--<TextView-->
        <!--android:layout_width="0dp"-->
        <!--android:layout_height="match_parent"-->
        <!--android:layout_gravity="center"-->
        <!--android:gravity="center"-->
        <!--android:textSize="30sp"-->
        <!--android:text="-"-->
        <!--android:layout_weight="0.2"-->
        <!--/>-->


        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_date_to"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:hint="@string/hint_date_to"
            card_view:errorEnabled="true"
            android:textSize="12sp"
            android:layout_weight="1.65"
            app:theme="@style/TextInputLayoutGold">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/input_date_to"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:singleLine="true"
                android:maxLength="20"
                android:text="asdasda"
                android:inputType="datetime"
                android:textSize="@dimen/font_size"
                app:theme="@style/EditTextGold"
                />
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/btn_search"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginLeft="8dp"
            android:layout_marginBottom="8dp"
            android:layout_marginRight="16dp"
            android:layout_weight="0.9"
            android:background="@drawable/btn_transparent_redborder"
            android:minHeight="0dp"
            android:minWidth="0dp"
            android:paddingBottom="4dp"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:paddingTop="4dp"
            android:text="APPLY"
            android:textColor="@color/aub_red"
            android:textSize="12sp"
            />

    </LinearLayout>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/column_header"
        android:weightSum="3"
        android:padding="10dp"
        >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_gravity="left|center_vertical"
            android:gravity="left|center_vertical"
            android:weightSum="2">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/tv_date"
                android:layout_weight="1"
                android:text="Date"
                android:textSize="12sp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Txn Code"
                android:textSize="12sp"/>

        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv_amount"
            android:layout_weight="1"
            android:layout_gravity="center|center_vertical"
            android:gravity="center|center_vertical"
            android:text="Amount"
            android:textSize="12sp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv_balance"
            android:layout_gravity="right|center_vertical"
            android:gravity="right|center_vertical"
            android:layout_weight="1"
            android:text="Ledger\nBalance"
            android:textSize="12sp"/>
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_below="@id/column_header"
        android:layout_height="2dp"
        android:background="@android:color/darker_gray"
        android:layout_marginTop="2dp"
        android:visibility="gone"/>
    <RelativeLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/translucent_clear_bg"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_below="@id/column_header">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/account_recycler_view"
            android:layout_width="match_parent"

            android:layout_height="match_parent"
            android:clipToPadding="false"
            android:gravity="center_horizontal"
            android:scrollbars="vertical"/>

    </RelativeLayout>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

the mAccount_header and mDateLayout is supposed to be hidden.

Answer 1

With the newest version of Android Studio (4.0 Canary 9), you can use the new MotionLayout layout type to do exactly what you want.

In short, you would do the following:

1. In your build.gradle (Module: app) file, add the following line:

   implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta4'

2. Create a new ConstraintLayout layout file that determines how all of your views should be arranged at the beginning

3. Convert that ConstraintLayout to a MotionLayout using the right-click menu in the layout editor
   

4. In the MotionLayout editor, add constraints to each view in the "start" and "end" layouts

5. In the new MotionScene XML file that was added to the XML folder in your res folder, edit the tag to look like this:

<Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        >
        <OnSwipe               
            app:touchAnchorSide="top"
            app:dragDirection="dragUp"
            app:moveWhenScrollAtTop="true"
            motion:touchAnchorId="@id/YOUR_RECYCLERVIEW"
            motion:dragDirection="dragUp" />
       <KeyFrameSet>
       </KeyFrameSet>
    </Transition>

* In the MotionLayout Codelab, it says to use app:touchAnchorID instead of motion:touchAnchorId but that didn't work for me *

Now, when you scroll to the top of your RecyclerView, the transition will begin. To hide your LinearLayout 1, you would need to add this to its "end" Constraint in the Motion file:

android:alpha="0.0"

Answer 2

You can handle scrolls with CoordinatorLayout

You can check this structure:

<android.support.design.widget.CoordinatorLayout >
<android.support.design.widget.AppBarLayout >
    <android.support.design.widget.CollapsingToolbarLayout >
        <!- Your LinearLayout1->
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<!-- Scrollable content -->
   <!-- LinearLayout2 -->
   <!-- RecyclerView -->

</android.support.design.widget.CoordinatorLayout>

You can check this example: https://android.jlelse.eu/creating-the-flexible-space-with-image-pattern-on-android-b5f8908b9921 to achieve the exact animation. Hope it help!

Answer 3

I achieved this so easily using MotionLayout to reduce the size of the views and make them disappear.

This my Motion Scene File Here