Collapsing card view when Recycler View scroll down

BageraBagera USMember ✭✭

How I can put the card below the toolbar and collapse it until it disappear when I scroll down and re open when I scroll up

I am using Xamarin.Android with design libary

Here is my AXML code:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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:id="@+id/coordinatorLayoutMainLayoutPublicationsLayout"
    android:fitsSystemWindows="true">

  <android.support.design.widget.AppBarLayout
         android:id="@+id/main.appbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
          android:id="@+id/collapsing_toolbar"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:fitsSystemWindows="true"
          app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

      <android.support.v7.widget.CardView
             xmlns:card_view="http://schemas.android.com/apk/res-auto"
             android:id="@+id/card_view"
             android:layout_gravity="center"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             app:cardCornerRadius="4dp"
             app:cardElevation="4dp"
             app:cardUseCompatPadding="true">

        <Button
         android:layout_width="match_parent"
         android:layout_height="150dp"
         android:text="BOBOBOBOBOBOB"
         app:layout_scrollFlags="scroll|enterAlways"/>

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

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

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

    <android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/swipeContainerPublicationsLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.RecyclerView
      android:id="@+id/recyclerViewPublicationsLayout"
      android:scrollbars="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />

  </android.support.v4.widget.SwipeRefreshLayout>

  <android.support.v7.widget.Toolbar
        android:id="@+id/toolbarPublicationsLayout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />

  <android.support.design.widget.FloatingActionButton
    android:id="@+id/fabPublicationsLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:src="@drawable/icon_add_fab"
    android:layout_margin="15dp" />

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

The output view is like this:

Best Answer

  • BageraBagera US ✭✭
    edited March 2017 Accepted Answer

    After many hours searching I found the solution, make the recyclerview and the cardview inside a NestedScrollView

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:background="?attr/colorPrimary" />
    

    <android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/coordinatorLayoutMainLayout">;

    <android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/swipeContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
    
         <android.support.v7.widget.CardView 
    

    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="4dp"
    app:cardElevation="4dp"
    app:cardUseCompatPadding="true">

    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:padding="8dp">
    
      <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textStyle="bold"
        android:id="@+id/textView1" />
      <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView2" />
      <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView3" />
      <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView4" />
      <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button" />
    
    </LinearLayout>
    

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

         <android.support.v7.widget.RecyclerView
          android:id="@+id/recyclerView"
          android:scrollbars="vertical"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:nestedScrollingEnabled="false"/>
    
    </LinearLayout>
    

    </android.support.v4.widget.NestedScrollView>

      </android.support.v4.widget.SwipeRefreshLayout>
    

    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:src="@drawable/icon_add_fab"
    android:layout_margin="15dp"/>

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

Answers

  • BageraBagera USMember ✭✭
    edited March 2017 Accepted Answer

    After many hours searching I found the solution, make the recyclerview and the cardview inside a NestedScrollView

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:background="?attr/colorPrimary" />
    

    <android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/coordinatorLayoutMainLayout">;

    <android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/swipeContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
    
         <android.support.v7.widget.CardView 
    

    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="4dp"
    app:cardElevation="4dp"
    app:cardUseCompatPadding="true">

    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:padding="8dp">
    
      <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textStyle="bold"
        android:id="@+id/textView1" />
      <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView2" />
      <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView3" />
      <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView4" />
      <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button" />
    
    </LinearLayout>
    

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

         <android.support.v7.widget.RecyclerView
          android:id="@+id/recyclerView"
          android:scrollbars="vertical"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:nestedScrollingEnabled="false"/>
    
    </LinearLayout>
    

    </android.support.v4.widget.NestedScrollView>

      </android.support.v4.widget.SwipeRefreshLayout>
    

    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:src="@drawable/icon_add_fab"
    android:layout_margin="15dp"/>

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

Sign In or Register to comment.