Recyclerview with CoordinatorLayout and AppBarLayout

Question

Based on the comments below I have changed my layout. It is working but when I go to the bottom of items in recyclerview and try to scroll up, it only goes up to the start of the recyclerview. I have to scroll again to get to the header.

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

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_scrollFlags="scroll">

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/iv_profile"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="15dp"
                android:gravity="center_vertical"
                android:src="@drawable/ap_placeholder"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent"/>

            <TextView
                android:id="@+id/tv_profile_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="25dp"
                android:text="@string/profile_name"
                app:layout_constraintLeft_toRightOf="@+id/iv_profile"
                app:layout_constraintTop_toTopOf="parent"/>

            <TextView
                android:id="@+id/tv_username"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:text="@string/username"
                android:textStyle="bold"
                app:layout_constraintLeft_toRightOf="@+id/iv_profile"
                app:layout_constraintTop_toBottomOf="@+id/tv_profile_name"/>

            <ImageView
                android:id="@+id/iv_settings"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="16dp"
                android:layout_marginRight="16dp"
                android:layout_marginTop="33dp"
                android:contentDescription="@string/settings_content_description"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/ap_settings"/>

            <TextView
                android:id="@+id/tv_profile_description"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginEnd="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:layout_marginStart="16dp"
                android:layout_marginTop="8dp"
                android:ellipsize="end"
                android:maxLines="2"
                android:text="@string/profile_description"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/iv_profile"/>

            <View
                android:id="@+id/view"
                android:layout_width="0dp"
                android:layout_height="1dp"
                android:layout_marginTop="20dp"
                android:background="@color/light_grey"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tv_profile_description"/>

            <com.roughike.bottombar.BottomBar
                android:id="@+id/bottom_bar"
                android:layout_width="0dp"
                android:layout_height="60dp"
                android:layout_marginTop="20dp"
                android:background="@color/light_grey"
                app:bb_activeTabColor="@color/ap_yellow"
                app:bb_inActiveTabColor="@color/ap_black"
                app:bb_tabXmlResource="@xml/profile_bar_tabs"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tv_followers"/>

            <TextView
                android:id="@+id/tv_history"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="50dp"
                android:layout_marginStart="50dp"
                android:text="@string/tv_history"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/number_history"/>

            <TextView
                android:id="@+id/tv_followers"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/tv_followers"
                app:layout_constraintLeft_toLeftOf="@+id/tv_history"
                app:layout_constraintRight_toRightOf="@+id/tv_following"
                app:layout_constraintTop_toBottomOf="@+id/number_followers"/>

            <TextView
                android:id="@+id/tv_following"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="40dp"
                android:layout_marginRight="40dp"
                android:text="@string/tv_following"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/number_following"/>

            <TextView
                android:id="@+id/number_history"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:text="@string/test_history"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="@id/tv_history"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintStart_toStartOf="@id/tv_history"
                app:layout_constraintTop_toBottomOf="@+id/view"/>

            <TextView
                android:id="@+id/number_followers"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:text="@string/test_followers"
                android:textStyle="bold"
                app:layout_constraintLeft_toLeftOf="@+id/number_history"
                app:layout_constraintRight_toRightOf="@+id/number_following"
                app:layout_constraintTop_toBottomOf="@+id/view"/>

            <TextView
                android:id="@+id/number_following"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:text="@string/test_following"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="@id/tv_following"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintStart_toStartOf="@id/tv_following"
                app:layout_constraintTop_toBottomOf="@+id/view"/>


        </android.support.constraint.ConstraintLayout>

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        android:visibility="visible"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

As per my recommendation, initialize new adapter object with required layout on the click of button. — Rahul Sharma, Apr 10 '17 at 08:25

Stephen · Accepted Answer · 2017-04-10T10:10:08.510

1

Edited:

If you need exact instagram design, please check out this Sample:

When you click on the tab button, just use hide and show view and put separate layout manager for both.

 private boolean gridClick = false;


   case R.id.list_click:                       

                if(listClick) {                 // Check whether the tab is already clicked or not

                    Log.e("AlreadyClicked", "Test");

                } else {

                    Log.e("ClickedFirstTime", "Test");

                    loadPost();

                    ivGrid.setVisibility(View.GONE);      // Hiding grid recyclerview
                    ivList.setVisibility(View.VISIBLE);   // showing list recyclerview

                    rvGrid.setVisibility(View.GONE);      // Make grid recyclerview as gone
                    recyclerList.setVisibility(View.VISIBLE); // make listview as visible



                    RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(this);       // Use separate layoutmanager for list recyclerview

                    recyclerList.setLayoutManager(mLayoutManager);
                    recyclerList.setItemAnimator(new DefaultItemAnimator());
                    recyclerList.setAdapter(friendsProfileUserPostitemsAdapter);

                    listClick = true;


                }

                break;

edited Apr 10 '17 at 10:10

answered Apr 10 '17 at 08:24

Stephen

9,899
16
90
137

Hmm I can't access those lists because they are in different binders. I need to hide/show items from the second binder in the first one according to your solution. – Esteban Apr 10 '17 at 08:37
@Esteban I have already did instagram designs.You can simply do with 4 or 5 buttons in single activity.Just hide and show the views according to that.You need to user Coordinator layout like [this](http://stackoverflow.com/a/40182035/3960700).Never use nested scroll view .Its bad way to do in recyclerview. – Stephen Apr 10 '17 at 08:44
@Esteban check my edited post.When you run that sample, you can get some clear identification. – Stephen Apr 10 '17 at 10:10
Thank you, this is very helpful, even though the scrolling is not smooth here either. You can't get to top with a fling. :( – Esteban Apr 10 '17 at 11:32
@Esteban are you facing any issues now? – Stephen Apr 10 '17 at 11:35
When I scroll down in the `recyclerview` and I fling back to top, I only get to the top of the `recyclerview`. I need to scroll once more to get to the header (which is the `AppBarLayout`). – Esteban Apr 10 '17 at 11:36
1

@Esteban I think in that sample also they did like that only it seems. – Stephen Apr 10 '17 at 11:37

score 1 · Answer 2 · answered Apr 10 '17 at 08:29

1

I think you have done wrong implementation. Dont need to add TabLayout in RecyclerView item.

You code should be like this

<android.support.design.widget.CoordinatorLayout>
     <android.support.design.widget.AppBarLayout>
          <android.support.design.widget.CollapsingToolbarLayout>

              <YourHeaderLayout />
              <android.support.design.widget.TabLayout />              

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

    <RecyclerView /> 
    <!-- OR -->
    <ViewPager />


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

Here If you display RecyclerView then you need to change LayoutManager on Tab press. Or you can place two RecyclerView with List and Grid in ViewPager.

answered Apr 10 '17 at 08:29

Kishan Vaghela

7,678
5
42
67

Is there a way to do this without having the `CollapsingToolbarLayout?` I need the content to be scroll-able, something like Instagram user profile page. – Esteban Apr 10 '17 at 08:32
You can use AppBarLayout without CollapsingToolbarLayout. And for scrolling you can you android.support.v4.widget.NestedScrollView. – Kishan Vaghela Apr 10 '17 at 08:41
@Esteban doesn't getting.What you want to say about header scrolling? – Kishan Vaghela Apr 11 '17 at 09:00
When I scroll to bottom and then I fling to top I only get to the top of the `recyclerview`, but not the whole layout. I've found some workaround but it does not really solve the problem. Do you have any suggestion? – Esteban Apr 12 '17 at 09:10
@Esteban You are saying that when to scroll to top your header layout is visible. right? – Kishan Vaghela Apr 12 '17 at 09:45

Recyclerview with CoordinatorLayout and AppBarLayout

2 Answers2